/* =========================================================
   ITALA — V3A "PROFESSIONALE"
   Deriva dalla V3: fullwidth, blocchi contigui, quattro
   colori, titoli molto grandi. Peso spostato su coal/bone,
   arancio come punteggiatura. Nessun gradiente, nessuna foto.
   ========================================================= */

:root{
  --orange:#DE7B23;
  /* stesso arancio, piu' scuro: 4,6-5,0:1 su bone contro i
     2,5-2,7:1 di --orange, che sotto AA non ci arriva. E' SOLO
     per il TESTO su fondo chiaro — riempimenti, filetti, bordi e
     bottoni restano --orange. Qui lo usa il plinto della hero 07,
     che e' l'unico blocco su bone dentro la hero. */
  --orange-ink:#A35310;
  --steel:#474749;

  --coal:#0F0F11;
  --coal-2:#17171A;
  --coal-3:#1F1F23;
  --bone:#EDEAE4;
  --bone-2:#E2DED6;

  --on-dark:#F4F2EE;
  --on-dark-2:#A7A6A4;
  --on-light:#141416;
  --on-light-2:#5C5B58;
  --on-orange:#231204;

  --line-d:rgba(255,255,255,.13);
  --line-l:rgba(20,20,22,.15);

  --sans:'Archivo', ui-sans-serif, system-ui, sans-serif;
  --mono:'Martian Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --hdr:76px;
  --pad:clamp(20px,3.4vw,64px);

  /* opacita' del velo piatto sopra l'asset della hero.
     Col segnaposto (gia' scuro) basta poco; con il video definitivo
     si sale verso .55 e si cambia SOLO qui. */
  --hero-veil:.26;

  --ease:cubic-bezier(.16,.84,.44,1);
  --ease-2:cubic-bezier(.19,1,.22,1);

  --hero-img: url('../img/hero/hero-test-3.webp');
  --hero-img-mobile: url('../img/hero/hero-test-mobile-1.webp');
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--hdr)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}

body{
  margin:0;
  background:var(--coal);
  color:var(--on-dark);
  font-family:var(--sans);
  font-variation-settings:'wdth' 100,'wght' 400;
  font-size:16px;line-height:1.58;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}

img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,dl,dd,figure{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--orange);color:var(--on-orange)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* maschere per SplitText */
.sp-line{overflow:hidden;display:block}

/* ---------------------------------------------------------
   BLOCCHI
   --------------------------------------------------------- */
.blk{position:relative;padding:var(--pad)}
.blk--coal{background:var(--coal-2);color:var(--on-dark)}
.blk--steel{background:var(--steel);color:var(--on-dark)}
.blk--bone{background:var(--bone);color:var(--on-light)}
.blk--orange{background:var(--orange);color:var(--on-orange)}

/* ---------------------------------------------------------
   HEADER
   Una fila di celle contigue alte quanto la testata, come il
   plinto della hero: marchio a sinistra (rispetta --pad), a
   destra le voci e la CTA divise dal filetto da 1px. La CTA va a
   filo del bordo destro: una linguetta arancio piena, e il suo
   testo rientra di --pad per stare in gabbia con la pagina.

   Fondo a .9 e non piu' .82: sopra le sezioni bone il composito
   era ~#353534 e il dato arancio dell'hover scendeva a 4,1:1.
   A .9 il fondo resta sotto ~#242424 ovunque: --on-dark-2 6,4:1,
   --orange 5,2:1.

   Tutto il movimento e' in transform: il filetto arancio che
   scende dal bordo alto (cresce da sinistra, si ritira a destra),
   l'etichetta che rotola, la freccia. Il fondo della cella cambia
   colore, non misura.
   --------------------------------------------------------- */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(15,15,17,.9);
  backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);
  border-bottom:1px solid var(--line-d);
}
.hdr__in{height:var(--hdr);display:flex;align-items:stretch;padding-left:var(--pad)}
.hdr__prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none}
.hdr__prog i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:var(--orange);will-change:transform}

.brand{display:flex;align-items:center;flex:0 0 auto;margin-right:auto;padding-right:24px}
/* Il marchio reale e' un lockup 1141x283 (~4:1) che porta con se' la
   parola ITALA: si vincola l'altezza, la larghezza segue. width/height
   nell'HTML tengono il rapporto e non fanno saltare la testata prima
   che l'immagine arrivi. */
.brand__logo{height:32px;width:auto;display:block;flex:0 0 auto}

/* fuoco tastiera: anello arancio a 3px, dentro la cella — fuori
   finirebbe tagliato dal bordo della testata */
.brand:focus-visible,.nav__a:focus-visible,.burger:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}

.nav{display:flex}
.nav__l{display:flex}
.nav__l li{display:flex}
.nav__a{
  position:relative;
  display:grid;grid-template-areas:"k" "t";align-content:center;row-gap:7px;
  padding:0 clamp(16px,1.7vw,28px);
  border-left:1px solid var(--line-d);
  color:var(--on-dark);
  transition:background-color .45s var(--ease);
}
.nav__a::before{
  content:'';position:absolute;left:-1px;right:0;top:0;height:3px;
  background:var(--orange);
  transform:scaleX(0);transform-origin:right;
  transition:transform .55s var(--ease-2);
}
.nav__k{
  grid-area:k;
  font-family:var(--mono);font-size:11px;line-height:1;letter-spacing:.02em;
  text-transform:uppercase;white-space:nowrap;color:var(--on-dark-2);
  transition:color .35s var(--ease);
}
/* l'etichetta rotola: due copie impilate in una finestra alta una
   riga, all'hover salgono insieme di una riga. La copia sotto e'
   aria-hidden nell'HTML. */
.nav__t{
  grid-area:t;position:relative;display:block;overflow:hidden;
  font-size:15px;line-height:1.3;letter-spacing:.005em;white-space:nowrap;
  font-variation-settings:'wdth' 106,'wght' 600;
}
.nav__t span{display:block;transition:transform .6s var(--ease-2)}
.nav__t span + span{position:absolute;left:0;top:100%}

.nav__a:hover,.nav__a:focus-visible{background:rgba(244,242,238,.05)}
.nav__a:hover::before,.nav__a:focus-visible::before,
.nav__a[aria-current="page"]::before{transform:none;transform-origin:left}
.nav__a:hover .nav__k,.nav__a:focus-visible .nav__k,
.nav__a[aria-current="page"] .nav__k{color:var(--orange)}
.nav__a:hover .nav__t span,.nav__a:focus-visible .nav__t span{transform:translateY(-100%)}

/* la CTA: stessa cella di .loc__go--p nella hero — dato mono sopra,
   etichetta Archivo sotto, freccia in alto a destra */
.hdr__go{
  position:relative;flex:0 0 auto;
  display:grid;grid-template-columns:auto auto;grid-template-areas:"k a" "t a";
  align-content:center;column-gap:22px;row-gap:7px;
  padding:0 var(--pad) 0 clamp(20px,1.9vw,30px);
  background:var(--orange);color:var(--on-orange);
  transition:background-color .45s var(--ease),color .45s var(--ease);
}
.hdr__go-k{
  grid-area:k;
  font-family:var(--mono);font-size:11px;line-height:1;letter-spacing:.02em;
  text-transform:uppercase;white-space:nowrap;
}
.hdr__go-t{
  grid-area:t;
  font-size:15px;line-height:1.3;letter-spacing:.005em;white-space:nowrap;
  font-variation-settings:'wdth' 106,'wght' 700;
}
.hdr__go-a{
  grid-area:a;align-self:start;
  font-family:var(--mono);font-size:15px;line-height:1;
  transition:transform .55s var(--ease-2);
}
.hdr__go:hover,.hdr__go:focus-visible{background:var(--bone);color:var(--on-light)}
.hdr__go:hover .hdr__go-a,.hdr__go:focus-visible .hdr__go-a{transform:translateX(5px)}
/* sull'arancio l'anello arancio sparirebbe: al fuoco la cella va su
   bone, come all'hover, e l'anello torna visibile */
.hdr__go:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}

/* il bottone del menu: una cella come le altre, a filo del bordo destro */
.burger{
  display:none;flex:0 0 auto;align-items:center;gap:14px;
  margin:0;padding:0 var(--pad) 0 22px;
  background:none;border:0;border-left:1px solid var(--line-d);border-radius:0;
  color:var(--on-dark);font:inherit;cursor:pointer;
  transition:background-color .45s var(--ease);
}
.burger:hover{background:rgba(244,242,238,.05)}
/* "Menu" e "Chiudi" nella stessa cella di griglia: la finestra e'
   larga quanto la parola piu' lunga, e rotolano come le voci */
.burger__t{
  display:grid;justify-items:end;overflow:hidden;
  font-family:var(--mono);font-size:11px;line-height:1.4;letter-spacing:.02em;text-transform:uppercase;
}
.burger__t span{grid-area:1/1;transition:transform .6s var(--ease-2)}
.burger__t span + span{transform:translateY(100%)}
.burger[aria-expanded="true"] .burger__t span{transform:translateY(-100%)}
.burger[aria-expanded="true"] .burger__t span + span{transform:none}
.burger__i{position:relative;display:block;width:20px;height:8px}
.burger__i i{position:absolute;left:0;right:0;height:2px;background:currentColor;transition:transform .5s var(--ease-2)}
.burger__i i:first-child{top:0}
.burger__i i:last-child{bottom:0}
.burger[aria-expanded="true"] .burger__i i:first-child{transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__i i:last-child{transform:translateY(-3px) rotate(-45deg)}

/* ---------------------------------------------------------
   MENU MOBILE
   Pannello a tutta altezza sotto la testata. All'apertura cala
   come una tenda (clip-path) e le righe salgono a scalare: e'
   un'animazione, non uno stato d'attesa, quindi senza motion o
   senza CSS d'animazione il menu e' comunque intero.
   --------------------------------------------------------- */
.mmenu{
  position:fixed;inset:var(--hdr) 0 0 0;z-index:59;
  display:flex;flex-direction:column;
  background:var(--coal-2);
  overflow-y:auto;overscroll-behavior:contain;
  animation:mmTenda .7s var(--ease-2) both;
}
.mmenu[hidden]{display:none}
html.is-menu{overflow:hidden}

.mmenu__l li{animation:mmRiga .8s var(--ease-2) both}
.mmenu__l li:nth-child(2){animation-delay:.05s}
.mmenu__l li:nth-child(3){animation-delay:.1s}
.mmenu__l li:nth-child(4){animation-delay:.15s}
.mmenu__a{
  display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"k a" "t a";
  align-items:center;column-gap:16px;row-gap:10px;
  padding:clamp(18px,3vh,28px) var(--pad);
  border-bottom:1px solid var(--line-d);
  transition:background-color .45s var(--ease);
}
.mmenu__k{
  grid-area:k;
  font-family:var(--mono);font-size:11px;line-height:1;letter-spacing:.02em;
  text-transform:uppercase;color:var(--on-dark-2);
}
.mmenu__t{
  grid-area:t;
  font-size:clamp(30px,8.2vw,52px);line-height:.92;letter-spacing:-.02em;text-transform:uppercase;
  font-variation-settings:'wdth' 112,'wght' 750;
}
.mmenu__ar{
  grid-area:a;font-family:var(--mono);font-size:20px;line-height:1;color:var(--orange);
  transition:transform .55s var(--ease-2);
}
.mmenu__a:hover,.mmenu__a:focus-visible{background:rgba(244,242,238,.05)}
.mmenu__a:hover .mmenu__ar,.mmenu__a:focus-visible .mmenu__ar{transform:translateX(6px)}
.mmenu__a[aria-current="page"] .mmenu__t,.mmenu__a[aria-current="page"] .mmenu__k{color:var(--orange)}
.mmenu__a:focus-visible,.mmenu__r a:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}

.mmenu__b{margin-top:auto;padding-top:clamp(28px,5vh,56px);animation:mmRiga .8s .2s var(--ease-2) both}
.mmenu__go{
  display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"k a" "t a";
  column-gap:16px;row-gap:9px;
  padding:clamp(20px,3vh,28px) var(--pad);
  background:var(--orange);color:var(--on-orange);
  transition:background-color .45s var(--ease),color .45s var(--ease);
}
.mmenu__go-k{grid-area:k;font-family:var(--mono);font-size:11px;line-height:1;letter-spacing:.02em;text-transform:uppercase}
.mmenu__go-t{grid-area:t;font-size:clamp(20px,5.4vw,26px);line-height:1.1;font-variation-settings:'wdth' 108,'wght' 700}
.mmenu__go-a{grid-area:a;align-self:start;font-family:var(--mono);font-size:20px;line-height:1;transition:transform .55s var(--ease-2)}
.mmenu__go:hover,.mmenu__go:focus-visible{background:var(--bone);color:var(--on-light)}
.mmenu__go:hover .mmenu__go-a,.mmenu__go:focus-visible .mmenu__go-a{transform:translateX(6px)}
.mmenu__go:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}

/* recapiti: due celle contigue, il filetto sta sulle celle */
.mmenu__r{display:grid;grid-template-columns:1fr 1fr}
.mmenu__r a{
  display:flex;flex-direction:column;gap:8px;height:100%;
  padding:18px var(--pad);border-bottom:1px solid var(--line-d);
  transition:background-color .45s var(--ease);
}
.mmenu__r li + li a{border-left:1px solid var(--line-d)}
.mmenu__r a:hover{background:var(--coal-3)}
.mmenu__r span{font-family:var(--mono);font-size:11px;line-height:1.3;letter-spacing:.02em;text-transform:uppercase;color:var(--on-dark-2)}
.mmenu__r b{font-size:16px;line-height:1.3;font-variation-settings:'wdth' 106,'wght' 700;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.mmenu__f{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 18px;
  padding:16px var(--pad) 0;font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--on-dark-2);
}

@keyframes mmTenda{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes mmRiga{from{opacity:0;transform:translateY(22px)}}

/* ---------------------------------------------------------
   BOTTONI / LINK
   --------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--orange);color:var(--on-orange);
  font-family:var(--mono);font-weight:700;text-transform:uppercase;
  border:2px solid var(--orange);will-change:transform;
  transition:background .35s var(--ease),color .35s var(--ease);
}
.btn:hover{background:transparent;color:var(--orange)}
.btn--lg{padding:17px 28px;font-size:11.5px;letter-spacing:.01em}
.btn--xl{padding:22px 44px;font-size:13px;letter-spacing:0}

.blk--orange .btn{background:var(--on-orange);border-color:var(--on-orange);color:var(--orange)}
.blk--orange .btn:hover{background:transparent;color:var(--on-orange)}
.cta .btn{background:var(--coal);border-color:var(--coal);color:var(--orange)}
.cta .btn:hover{background:transparent;color:var(--coal)}

.lnk{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:11px;letter-spacing:.01em;text-transform:uppercase;
  color:currentColor;opacity:.75;padding-bottom:5px;border-bottom:1px solid currentColor;
  transition:opacity .3s var(--ease),color .3s var(--ease),gap .3s var(--ease);
}
.lnk::after{content:'\2192'}
.lnk:hover{opacity:1;color:var(--orange);gap:14px}
.blk--bone .lnk:hover,.blk--orange .lnk:hover{color:inherit}

/* ---------------------------------------------------------
   INTESTAZIONE DI SEZIONE
   --------------------------------------------------------- */
.shd{
  display:grid;grid-template-columns:120px minmax(0,1fr) minmax(0,270px);
  gap:36px;align-items:start;
  padding:clamp(64px,8vw,132px) var(--pad) clamp(30px,3.6vw,52px);
  border-bottom:1px solid var(--line-l);
}
.shd--dark{border-bottom-color:var(--line-d)}
.shd__k{font-family:var(--mono);font-size:11px;color:var(--orange);letter-spacing:.02em;padding-top:8px}
.shd__t{
  font-size:clamp(32px,5.2vw,72px);line-height:.94;letter-spacing:-.04em;
  font-variation-settings:'wdth' 112,'wght' 700;text-transform:uppercase;
}
.shd__m{
  font-family:var(--mono);font-size:11px;line-height:1.7;letter-spacing:.01em;
  text-transform:uppercase;opacity:.5;text-align:right;padding-top:8px;
}

.comp,.casi,.cert{background:var(--bone-2);color:var(--on-light)}
.cli,.gar,.storia{background:var(--coal);color:var(--on-dark)}

/* ---------------------------------------------------------
   HERO — la visuale copre tutto il primo schermo
   L'asset (video o immagine) sta dietro a tutto: titolo,
   pannello certificazioni e nastro marchi ci stanno sopra,
   separati dal filetto da 1px della V3.
   Il velo e' piatto, non un gradiente: --hero-veil.
   --------------------------------------------------------- */
.hero{padding-top:var(--hdr)}

.hero__stage{
  position:relative;isolation:isolate;
  display:flex;flex-direction:column;
  min-height:calc(100vh - var(--hdr));
  min-height:calc(100svh - var(--hdr));
}
.hero__stage > *{position:relative;z-index:1}

/* --- il piano dell'immagine --- */
.hero__media{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--coal)}
/* margine in eccesso sopra e sotto: la parallasse non scopre il bordo */
.hero__el{
  position:absolute;top:-6%;left:0;width:100%;height:112%;object-fit:cover;
  /* riporta qualunque ripresa dentro la palette del sito */
  /* filter:grayscale(1) contrast(1.12) brightness(.86); */
}
.hero__veil{position:absolute;inset:0;background:rgba(15,15,17,var(--hero-veil))}

/* --- SEGNAPOSTO: file di rack che scorrono, spie irregolari ---
   Tutto in CSS piatto, niente foto: mette in scena l'asset chiesto
   (rack in scorrimento verticale, led ITALA, reticolo tecnico). --- */
.hm{position:absolute;inset:-9% 0;will-change:transform}

.hm__racks{position:absolute;inset:0;display:flex;gap:clamp(6px,.9vw,14px);padding:0 clamp(6px,.9vw,14px)}
.hm__racks i{position:relative;flex:var(--f,1);overflow:hidden;background:rgba(255,255,255,.014)}
.hm__racks i::before{
  content:'';position:absolute;left:0;right:0;top:0;height:200%;
  background-image:repeating-linear-gradient(to bottom,
    rgba(255,255,255,.105) 0 2px,
    rgba(255,255,255,.03) 2px 5px,
    transparent 5px 14px);
  animation:rack var(--s,4s) linear infinite;
}
/* la corsa e' esattamente due passi del motivo (14px): niente giunta */
@keyframes rack{to{transform:translateY(-28px)}}

@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.2}}

.kick{
  display:flex;align-items:center;gap:14px;
  font-family:var(--mono);font-size:11px;letter-spacing:.01em;
  text-transform:uppercase;color:var(--on-dark-2);
}
.kick__b{width:28px;height:8px;background:var(--orange);flex:0 0 auto}

.h1{
  font-size:clamp(42px,7.8vw,116px);line-height:.86;letter-spacing:-.045em;
  max-width:min(100%,1060px);
  text-transform:uppercase;font-variation-settings:'wdth' 116,'wght' 800;
  margin-bottom:.13em;
}
.h1 em{font-style:normal;color:var(--orange)}
.h1__sub{
  font-size:clamp(17px,2.1vw,30px);line-height:1.24;letter-spacing:-.02em;
  font-variation-settings:'wdth' 98,'wght' 500;color:var(--on-dark-2);
  margin-bottom:clamp(12px,1.7vh,28px);max-width:52ch;
}
.hero__lead{
  font-size:clamp(15px,1.25vw,17.5px);line-height:1.62;color:var(--on-dark-2);
  max-width:54ch;margin-bottom:clamp(16px,2.2vh,38px);
}
.hero__cta{display:flex;align-items:center;gap:30px;flex-wrap:wrap}

/* --- pannello certificazioni: occupa l'angolo libero dell'immagine --- */
.hstat{
  position:absolute;top:clamp(18px,2.4vh,38px);right:var(--pad);
  width:clamp(268px,23vw,330px);
  border-top:1px solid var(--orange);padding-top:12px;
}
.hstat__k{
  font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase;
  color:var(--orange);margin-bottom:12px;
}
.hstat__l{border-top:1px solid var(--line-d)}
.hstat__l li{
  display:flex;align-items:center;gap:12px;padding:7px 0;
  border-bottom:1px solid var(--line-d);
  font-family:var(--mono);font-size:11px;letter-spacing:.01em;
}
.hstat__l b{font-weight:500;flex:0 0 auto;white-space:nowrap}
/* lo stato si allinea a destra: la spia gli sta accanto, non in fondo alla riga */
.hstat__l span{color:var(--on-dark-2);margin-left:auto}
.hstat__d{width:6px;height:6px;background:var(--orange);flex:0 0 auto;animation:blink 2.6s steps(1,end) infinite}
.hstat__l li:nth-child(2) .hstat__d{animation-delay:.9s}
.hstat__f{
  display:flex;justify-content:space-between;gap:14px;padding-top:9px;
  font-family:var(--mono);font-size:11px;letter-spacing:.01em;
}
.hstat__f span{color:var(--on-dark-2)}
.hstat__f b{font-weight:500;font-variant-numeric:tabular-nums}

/* --- riga di segnaposto: sparisce con l'asset definitivo --- */
.hero__ph{
  display:flex;align-items:center;gap:10px;margin-top:clamp(12px,1.8vh,22px);
  font-family:var(--mono);font-size:11px;line-height:1.5;letter-spacing:.01em;
  color:var(--on-dark-2);
}
.hero__ph b{color:var(--orange);font-weight:500}
.hero__ph-d{width:6px;height:6px;background:var(--orange);flex:0 0 auto;animation:blink 1.6s steps(1,end) infinite}

/* --- nastro marchi clienti: etichetta ferma + marchi che scorrono --- */
.marks{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:1px;
  background:var(--line-d);border-top:1px solid var(--line-d);
}
.marks__k{
  background:rgba(15,15,17,.62);width:clamp(196px,19vw,290px);
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(13px,1.7vh,22px) clamp(18px,2vw,30px) clamp(13px,1.7vh,22px) var(--pad);
}
.marks__kk{
  font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase;
  color:var(--orange);margin-bottom:9px;
}
.marks__t{
  display:block;font-size:clamp(15px,1.25vw,19px);line-height:1.04;letter-spacing:-.03em;
  text-transform:uppercase;font-variation-settings:'wdth' 106,'wght' 700;margin-bottom:7px;
}
.marks__m{font-family:var(--mono);font-size:11px;letter-spacing:.01em;color:var(--on-dark-2);line-height:1.5}

/* senza JS resta una riga che si scorre a mano; col JS diventa un nastro continuo */
.marks__vp{
  background:rgba(15,15,17,.62);
  /* flex, cosi' il binario riempie l'altezza della riga -- la detta l'etichetta
     a fianco. Senza, le celle restavano alte quanto il logo e sotto avanzava aria. */
  display:flex;align-items:stretch;
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
}
.marks__vp::-webkit-scrollbar{display:none}
.marks__l{display:flex;flex:0 0 auto;width:max-content;will-change:transform}
.mark{
  flex:0 0 auto;width:clamp(144px,12vw,188px);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(15px,1.9vh,26px) clamp(14px,1.5vw,22px);
  border-right:1px solid var(--line-d);
  transition:background .5s var(--ease);
}
.mark:hover{background:rgba(255,255,255,.04)}
.mark img{
  width:100%;max-width:132px;height:auto;
  /* i marchi arrivano in colori diversi: qui vanno tutti a osso pieno,
     cosi' la fascia resta dentro i quattro colori della V3 */
  filter:brightness(0) invert(1);
  opacity:.56;transition:opacity .5s var(--ease);
}
.mark:hover img{opacity:1}

/* --- fascia scorrevole --- */
.band{background:var(--orange);color:var(--on-orange);overflow:hidden;padding:12px 0;border-bottom:1px solid var(--line-d)}
.band__in{display:flex;width:max-content;white-space:nowrap;will-change:transform}
.band__in span{
  display:inline-flex;align-items:center;gap:22px;padding:0 22px;
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.01em;text-transform:uppercase;
}
.band__in span::after{content:'';width:6px;height:6px;background:var(--on-orange);flex:0 0 auto}

/* ---------------------------------------------------------
   NUMERI
   --------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-d)}
.stat{padding:clamp(32px,3.4vw,52px) var(--pad) clamp(34px,3.6vw,52px);display:flex;flex-direction:column}
.stat__k{font-family:var(--mono);font-size:11px;letter-spacing:.02em;opacity:.55;margin-bottom:30px}
.stat__v{
  display:block;font-size:clamp(60px,8vw,116px);line-height:.8;letter-spacing:-.065em;
  font-variation-settings:'wdth' 108,'wght' 800;font-variant-numeric:tabular-nums;margin-bottom:24px;
}
.blk--coal .stat__v{color:var(--orange)}
.stat__l{
  font-size:clamp(15px,1.35vw,19px);line-height:1.2;letter-spacing:-.025em;
  font-variation-settings:'wdth' 104,'wght' 600;margin-bottom:14px;
}
.stat__n{font-family:var(--mono);font-size:11px;line-height:1.7;letter-spacing:.01em;opacity:.58;margin-top:auto}

/* ---------------------------------------------------------
   MANIFESTO
   --------------------------------------------------------- */
.mani{
  background:var(--coal);color:var(--on-dark);
  border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d);
}
.mani__in{
  min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(80px,10vw,150px) var(--pad);
}
.mani__k{
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--orange);margin-bottom:clamp(28px,4vw,56px);
  display:flex;align-items:center;gap:14px;
}
.mani__k::before{content:'';width:28px;height:8px;background:var(--orange)}
.mani__t{
  font-size:clamp(30px,5.6vw,86px);line-height:1.08;letter-spacing:-.04em;
  font-variation-settings:'wdth' 106,'wght' 700;max-width:19ch;
}
.mani__t .w{opacity:.16}
.mani__f{
  display:flex;flex-wrap:wrap;gap:0;margin-top:clamp(40px,5vw,80px);
  border-top:1px solid var(--line-d);
}
.mani__f span{
  flex:1 1 220px;padding:20px 24px 0 0;
  font-family:var(--mono);font-size:11px;letter-spacing:.02em;
  text-transform:uppercase;color:var(--on-dark-2);line-height:1.6;
}
.mani__f span + span{padding-left:26px;border-left:1px solid var(--line-d)}

/* ---------------------------------------------------------
   COMPETENZE
   --------------------------------------------------------- */
.areas{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-l)}
.area{
  display:flex;flex-direction:column;padding:clamp(34px,3.8vw,62px) var(--pad);
  min-height:320px;transition:background .5s var(--ease),color .5s var(--ease);
}
.area::after{
  content:'';position:absolute;left:0;top:0;width:100%;height:4px;
  background:var(--orange);transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease-2);
}
.area:hover{background:var(--coal-2);color:var(--on-dark)}
.area:hover::after{transform:none}
.area__n{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--orange);margin-bottom:30px}
.area__t{
  font-size:clamp(22px,2.7vw,36px);line-height:1;letter-spacing:-.04em;
  text-transform:uppercase;font-variation-settings:'wdth' 108,'wght' 700;margin-bottom:16px;max-width:16ch;
}
.area__d{font-size:14.5px;line-height:1.62;opacity:.72;max-width:52ch;margin-bottom:30px}
.area__go{
  margin-top:auto;font-family:var(--mono);font-size:11px;letter-spacing:.02em;
  text-transform:uppercase;display:inline-flex;align-items:center;gap:10px;
}
.area__go i{font-style:normal;transition:transform .45s var(--ease)}
.area:hover .area__go{color:var(--orange)}
.area:hover .area__go i{transform:translateX(7px)}

/* ---------------------------------------------------------
   STORIA — binario orizzontale
   Senza JS, con reduced-motion e sotto i 900px e' una riga che
   si scorre a mano. Sopra i 900px main.js aggiunge .storia--pin
   e blocca la sezione INTERA sotto la testata, titolo compreso:
   il titolo tiene la parte alta del fotogramma, il binario scorre
   di lato nel resto. Le card sono alte quanto il loro contenuto --
   con un'altezza fissa sotto il testo restava un pozzo vuoto.
   --------------------------------------------------------- */
.tl{overflow-x:auto;overflow-y:hidden}
.storia--pin{
  display:flex;flex-direction:column;
  min-height:calc(100vh - var(--hdr));
  min-height:calc(100svh - var(--hdr));
}
.storia--pin .tl{flex:1 0 auto;display:flex;align-items:center;overflow:hidden}
.tl__track{display:flex;width:max-content;will-change:transform}
.tl__list{display:flex;gap:1px;background:var(--line-d);border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d)}
.tlx{
  background:var(--coal-2);width:clamp(260px,25vw,360px);flex:0 0 auto;
  padding:clamp(30px,3vw,44px) clamp(24px,2.4vw,36px) clamp(34px,3.4vw,48px);
  display:flex;flex-direction:column;position:relative;
  border-top:3px solid transparent;
}
.tlx b{
  display:block;font-size:clamp(40px,4.4vw,64px);line-height:.86;letter-spacing:-.06em;
  font-variation-settings:'wdth' 110,'wght' 800;color:var(--on-dark-2);margin-bottom:26px;
  font-variant-numeric:tabular-nums;
}
.tlx__t{
  display:block;font-size:clamp(17px,1.7vw,22px);line-height:1.12;letter-spacing:-.03em;
  text-transform:uppercase;font-variation-settings:'wdth' 106,'wght' 700;margin-bottom:12px;
}
.tlx__d{display:block;font-size:13.5px;line-height:1.6;color:var(--on-dark-2)}
.tlx--o{border-top-color:var(--orange)}
.tlx--o b{color:var(--orange)}
.tlx--now{background:var(--orange);color:var(--on-orange)}
.tlx--now b{color:var(--on-orange)}
.tlx--now .tlx__d{color:var(--on-orange);opacity:.85}
/* nel fotogramma bloccato l'altezza in piu' degli schermi alti va nelle
   card, non attorno. Il min() con i vh le ferma dov'erano fino a ~900px
   di altezza: da li' in giu' titolo + card stanno appena nello schermo. */
.storia--pin .tlx{
  padding-top:clamp(30px,min(3vw,5.2vh),60px);
  padding-bottom:clamp(34px,min(3.4vw,5.8vh),64px);
}
.storia--pin .tlx b{font-size:clamp(40px,min(4.4vw,7.8vh),88px);margin-bottom:clamp(26px,3vh,36px)}

/* ---------------------------------------------------------
   CLIENTI
   --------------------------------------------------------- */
.ribbon{overflow-x:auto;overflow-y:hidden;cursor:grab;scrollbar-width:none;padding:0 0 4px}
.ribbon::-webkit-scrollbar{display:none}
.ribbon.is-drag{cursor:grabbing}
.ribbon:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
.ribbon__in{display:flex;gap:1px;background:var(--line-d);width:max-content;border-bottom:1px solid var(--line-d)}
.rcard{background:var(--coal-2);width:290px;flex:0 0 auto;padding:28px var(--pad);transition:background .4s var(--ease)}
.rcard:hover{background:var(--steel)}
.rcard__id{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--orange);margin-bottom:22px}
.rcard b{display:block;font-size:22px;line-height:1.04;letter-spacing:-.035em;text-transform:uppercase;font-variation-settings:'wdth' 106,'wght' 700;margin-bottom:24px}
.rcard dl > div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line-d)}
.rcard dt{font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase;opacity:.55}
.rcard dd{font-family:var(--mono);font-size:11px;margin:0}

.cli__note{padding:28px var(--pad) clamp(60px,6.5vw,96px);font-size:13.5px;line-height:1.62;color:var(--on-dark-2);max-width:88ch}
.cli__note b{color:var(--on-dark);font-variation-settings:'wdth' 100,'wght' 600}

/* ---------------------------------------------------------
   CASI
   --------------------------------------------------------- */
.case{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.55fr);gap:1px;background:var(--line-l)}
.case + .case{margin-top:1px}
.case__l{padding:clamp(36px,4vw,64px) var(--pad)}
.case__hd{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:26px}
.case__id{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--orange)}
.case__st{font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase;opacity:.6;display:inline-flex;align-items:center;gap:9px}
.case__st::before{content:'';width:6px;height:6px;background:var(--orange);animation:blink 2.2s steps(1,end) infinite}
.case__sector{font-family:var(--mono);font-size:11px;letter-spacing:.01em;opacity:.6;margin-bottom:20px}
.case__t{
  font-size:clamp(26px,3.6vw,50px);line-height:.96;letter-spacing:-.045em;
  text-transform:uppercase;font-variation-settings:'wdth' 110,'wght' 700;margin-bottom:20px;max-width:20ch;
}
.case__d{font-size:14.5px;line-height:1.64;color:var(--on-dark-2);max-width:60ch;margin-bottom:34px}
.case__more{display:flex;border-top:1px solid var(--line-d);margin-bottom:32px}
.case__more li{flex:1;padding:20px 18px 0 0}
.case__more li + li{padding-left:20px;border-left:1px solid var(--line-d)}
.case__more b{display:block;font-size:26px;line-height:1;letter-spacing:-.04em;font-variation-settings:'wdth' 106,'wght' 700;margin-bottom:8px}
.case__more span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.02em;line-height:1.5;opacity:.6}

.case__r{display:flex;flex-direction:column;justify-content:center;padding:clamp(36px,4vw,64px) var(--pad)}
.kpi__k{font-family:var(--mono);font-size:11px;letter-spacing:.03em;opacity:.7;margin-bottom:22px;text-transform:uppercase}
.kpi{
  display:block;font-size:clamp(50px,5.4vw,92px);line-height:.82;letter-spacing:-.06em;
  font-variation-settings:'wdth' 112,'wght' 800;font-variant-numeric:tabular-nums;margin-bottom:26px;
}
.kpi small{font-size:.24em;letter-spacing:-.01em;padding-left:.1em;font-variation-settings:'wdth' 100,'wght' 700}
.kpi__d{font-size:16px;line-height:1.3;letter-spacing:-.02em;font-variation-settings:'wdth' 104,'wght' 600;margin-bottom:10px}
.kpi__was{font-family:var(--mono);font-size:11px;line-height:1.6;opacity:.72}
.case--rev{grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr)}

/* ---------------------------------------------------------
   GARANZIE
   --------------------------------------------------------- */
.stack{padding:0}
.pan{
  position:sticky;display:grid;grid-template-columns:120px minmax(0,1fr);gap:36px;
  padding:clamp(38px,4.4vw,72px) var(--pad);
  border-top:1px solid var(--line-d);
  min-height:clamp(350px,46vh,460px);align-items:start;
}
.pan:nth-child(1){top:calc(var(--hdr) + 0px)}
.pan:nth-child(2){top:calc(var(--hdr) + 24px)}
.pan:nth-child(3){top:calc(var(--hdr) + 48px)}
.pan__n{font-family:var(--mono);font-size:11px;letter-spacing:.02em;opacity:.65;padding-top:10px}
.pan h3{
  font-size:clamp(28px,4vw,58px);line-height:.96;letter-spacing:-.045em;
  text-transform:uppercase;font-variation-settings:'wdth' 112,'wght' 700;margin-bottom:20px;
}
.pan p{font-size:15px;line-height:1.62;max-width:62ch;opacity:.82;margin-bottom:32px}
.pan__d{display:flex;border-top:1px solid currentColor;max-width:680px}
.pan__d li{flex:1;padding:18px 16px 0 0;opacity:.95}
.pan__d li + li{padding-left:18px;border-left:1px solid currentColor}
.pan__d b{display:block;font-size:28px;line-height:1;letter-spacing:-.045em;font-variation-settings:'wdth' 108,'wght' 700;margin-bottom:8px}
.pan__d span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.02em;line-height:1.5;opacity:.7}

/* chi risponde */
.risp{
  position:relative;z-index:2;background:var(--coal-2);
  border-top:1px solid var(--line-d);padding:clamp(44px,5vw,80px) var(--pad) clamp(56px,6vw,96px);
}
.risp__t{
  font-size:clamp(20px,2.2vw,30px);line-height:1.05;letter-spacing:-.035em;
  text-transform:uppercase;font-variation-settings:'wdth' 108,'wght' 700;margin-bottom:36px;
}
.risp__l{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line-d)}
.risp__l li{padding:24px 26px 0 0}
.risp__l li + li{padding-left:28px;border-left:1px solid var(--line-d)}
.risp__k{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase;color:var(--orange);margin-bottom:14px}
.risp__l b{display:block;font-size:clamp(17px,1.7vw,22px);line-height:1.15;letter-spacing:-.03em;font-variation-settings:'wdth' 104,'wght' 700;margin-bottom:10px}
.risp__d{display:block;font-size:13.5px;line-height:1.6;color:var(--on-dark-2)}

/* ---------------------------------------------------------
   CERTIFICAZIONI
   --------------------------------------------------------- */
.certs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-l)}
.certc{padding:clamp(36px,4vw,60px) var(--pad)}
.certc__hd{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:28px}
.certc__k{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--orange);padding-top:6px}
.certc__seal{width:48px;height:48px;color:var(--on-dark);opacity:.4;flex:0 0 auto}
.certc__seal circle:nth-of-type(1){animation:sealSpin 50s linear infinite;transform-origin:center}
@keyframes sealSpin{to{transform:rotate(360deg)}}
.certc__t{font-size:clamp(23px,2.7vw,36px);line-height:1;letter-spacing:-.04em;text-transform:uppercase;font-variation-settings:'wdth' 108,'wght' 700;margin-bottom:18px;max-width:18ch}
.certc__d{font-size:14px;line-height:1.62;color:var(--on-dark-2);margin-bottom:30px;max-width:50ch}
.certc__meta{border-top:1px solid var(--line-d)}
.certc__meta li{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line-d)}
.certc__meta li:last-child{border-bottom:none}
.certc__meta span{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--on-dark-2)}
.certc__meta b{font-family:var(--mono);font-size:11px;font-weight:500}
.cert__note{padding:28px var(--pad) clamp(60px,6.5vw,96px);font-size:13.5px;line-height:1.62;color:var(--on-light-2);max-width:88ch}

/* ---------------------------------------------------------
   INCONTRO
   --------------------------------------------------------- */
.cta{background:var(--orange);color:var(--on-orange);padding:clamp(80px,11vw,170px) var(--pad)}
.cta__in{max-width:960px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.cta__k{font-family:var(--mono);font-size:11px;letter-spacing:.04em;margin-bottom:32px;opacity:.8;text-transform:uppercase}
.cta__t{
  font-size:clamp(48px,10vw,152px);line-height:.84;letter-spacing:-.06em;
  text-transform:uppercase;font-variation-settings:'wdth' 118,'wght' 800;margin-bottom:32px;
}
.cta__d{font-size:clamp(15px,1.35vw,18px);line-height:1.6;max-width:58ch;margin-bottom:46px;opacity:.88}
.cta__alt{margin-top:34px;font-family:var(--mono);font-size:11px;line-height:1.9;letter-spacing:.01em;opacity:.85}
.cta__alt a{border-bottom:2px solid var(--on-orange);font-weight:700}

/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */
.ftr{background:var(--coal);color:var(--on-dark);border-top:1px solid var(--line-d)}
.ftr__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;padding:clamp(48px,5.4vw,80px) var(--pad) clamp(34px,3.6vw,52px)}
/* in colonna, non affiancati: un lockup largo 4:1 accanto a un
   paragrafo di 46ch leggerebbe come due blocchi in competizione */
.ftr__brand{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.ftr__brand .brand__logo{height:38px;width:auto;display:block}
.ftr__brand p{font-size:14px;line-height:1.6;color:var(--on-dark-2);max-width:46ch}
.ftr__brand b{color:var(--on-dark);font-size:16px;letter-spacing:.01em;font-variation-settings:'wdth' 106,'wght' 700}
.ftr__data{display:grid;grid-template-columns:1fr 1fr;gap:0;align-content:start;border-top:1px solid var(--line-d)}
.ftr__data li{padding:12px 18px 12px 0;border-bottom:1px solid var(--line-d)}
.ftr__data li:nth-child(even){padding-left:20px;border-left:1px solid var(--line-d)}
.ftr__data span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--on-dark-2);margin-bottom:5px}
.ftr__data b{font-family:var(--mono);font-size:11px;font-weight:500}
.ftr__bot{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:16px var(--pad) 26px;border-top:1px solid var(--line-d);font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--on-dark-2)}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

/* testata: sotto i 1180 le voci perdono il dato; sotto i 980 le
   voci passano nel menu e la CTA resta solo etichetta; sotto i 600
   la CTA sta nel menu (e nella hero, subito sotto). La soglia dei
   980 e' anche in main.js ("menu mobile"): se cambi l'una, cambia
   l'altra. */
@media (max-width:1180px){
  .nav__k{display:none}
}
@media (max-width:980px){
  .nav{display:none}
  .burger{display:flex}
  .hdr__go{grid-template-areas:"t a";align-items:center}
  .hdr__go-k{display:none}
  .hdr__go-a{align-self:center}
}
@media (max-width:600px){
  .hdr__go{display:none}
}
@media (min-width:981px){
  .mmenu{display:none}
}

@media (max-width:1180px){
  /* il pannello certificazioni rientra nel flusso, sotto la CTA */
  .hstat{position:static;width:100%;max-width:420px;margin-top:clamp(22px,3vh,40px)}
  .stats{grid-template-columns:1fr 1fr}
  .case,.case--rev{grid-template-columns:1fr}
  .case--rev .case__l{order:1}
  .case--rev .case__r{order:2}
  .risp__l{grid-template-columns:1fr}
  .risp__l li + li{padding-left:0;border-left:none;border-top:1px solid var(--line-d);margin-top:20px}
}
@media (max-width:900px){
  .shd{grid-template-columns:1fr;gap:16px}
  .shd__m{text-align:left}
  .areas,.certs{grid-template-columns:1fr}
  /* etichetta sopra al nastro, non piu' di fianco */
  .marks{grid-template-columns:1fr}
  .marks__k{width:auto;padding:clamp(14px,2vh,20px) var(--pad)}
  .marks__t{margin-bottom:6px}
  .pan{grid-template-columns:1fr;gap:16px;position:static;min-height:0}
  .ftr__top{grid-template-columns:1fr;gap:32px}
  .mani__in{min-height:0}
}
@media (max-width:620px){
  .stats{grid-template-columns:1fr}
  .hstat{max-width:none}
  .hero__ph{align-items:flex-start}
  .hero__ph-d{margin-top:6px}
  .case__more,.pan__d,.mani__f{flex-direction:column}
  .case__more li + li,.pan__d li + li{padding-left:0;border-left:none;border-top:1px solid currentColor}
  .mani__f span + span{padding-left:0;border-left:none;border-top:1px solid var(--line-d)}
  .rcard{width:250px}
  .tlx{width:250px}
  .ftr__data{grid-template-columns:1fr}
  .ftr__data li:nth-child(even){padding-left:0;border-left:none}
  .ftr__bot{flex-direction:column;gap:6px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .marks__vp{overflow-x:auto !important}
  .pan{position:static}
  .mani__t .w{opacity:1}
  .mani__in{min-height:0}
}

/* =========================================================
   HERO — PROPOSTE 02 · 03 · 04 · 05
   ---------------------------------------------------------
   La 01 e' quella gia' in pagina e usa le regole della sezione
   HERO piu' sopra. Queste quattro riusano lo stesso impianto
   (.hero__stage, .hero__media, .hero__veil, .hstat, .marks) e
   cambiano solo la disposizione: cosi' il confronto e' onesto,
   e la hero scelta si porta via con la sua sola <section>.

   Nessun gradiente di sfondo, nessuna foto: i fondi animati
   sono SVG (02) o canvas (04, 05). Niente proprieta' di layout
   animate: solo transform, opacity e stroke-dashoffset.
   ========================================================= */

.hdeck{position:relative}
.hdeck .hero[hidden]{display:none}

/* quanto pesa il segnaposto dietro: dove il fondo e' disegnato
   (punti, filamenti) l'asset resta una tessitura */
.hm--faint{opacity:.28}

/* pannello certificazioni orizzontale: lo usa la 03, in fondo
   alla colonna di sinistra (vedi .dgn__cert) */
.hstat--row{
  position:static;width:auto;max-width:none;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:clamp(16px,2.4vw,40px);
  margin-top:clamp(16px,2.4vh,34px);
  background:rgba(15,15,17,.58);
  border:1px solid var(--line-d);border-top-color:var(--orange);
  padding:clamp(11px,1.5vh,18px) clamp(16px,1.8vw,26px);
}
.hstat--row .hstat__k{margin-bottom:0;white-space:nowrap}
.hstat--row .hstat__l{display:flex;flex-wrap:wrap;gap:0 clamp(16px,2vw,34px);border-top:none}
.hstat--row .hstat__l li{border-bottom:none;padding:0}
.hstat--row .hstat__l span{margin-left:0}
.hstat--row .hstat__f{padding-top:0;justify-content:flex-end;gap:10px;white-space:nowrap}

/* ---------------------------------------------------------
   HERO 03 — "DIAGONALE"       rif. idea/hero-idea-2.png
   Testo a sinistra su coal, asset a destra dentro il taglio
   obliquo. Il filetto arancio sta FUORI dal ritaglio: dentro,
   meta' del tratto verrebbe tagliata via.
   --------------------------------------------------------- */
.hero--03{--dgn-cut:14%}

.dgn{
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);
  /* due righe: le colonne, e sotto la fascia dei marchi. La riga dei
     dati tecnici non c'e' piu': le certificazioni sono passate nel
     pannello .dgn__cert, in fondo alla colonna di sinistra. */
  grid-template-rows:minmax(0,1fr) auto;
}
.dgn__l{
  grid-column:1;grid-row:1;
  display:flex;flex-direction:column;
  padding:clamp(16px,2.2vh,36px) clamp(20px,3vw,56px) clamp(12px,1.6vh,26px) var(--pad);
}
.dgn__copy{margin:auto 0}
/* il tetto in vh serve sui monitor bassi: qui sotto al titolo c'e'
   ancora tutta la colonna, pannello certificazioni compreso */
.h1--dgn{font-size:clamp(38px,min(5.6vw,8.8vh),92px);max-width:none;margin-bottom:0}
.dgn__rule{
  display:block;width:64px;height:2px;background:var(--orange);
  margin:clamp(12px,1.8vh,26px) 0 clamp(10px,1.5vh,22px);
}
.dgn__l .hero__lead{max-width:44ch}

/* il pannello certificazioni chiude la colonna di sinistra. Due
   colonne e non tre: l'ora locale non sta qui, sta nella didascalia
   sopra l'asset, quindi .hstat__f non c'e'. */
.dgn__cert{
  grid-template-columns:auto minmax(0,1fr);
  /* al contenuto, non a tutta la colonna: a piena larghezza le due
     righe ISO andavano a capo e restava mezzo pannello vuoto */
  width:max-content;max-width:100%;
}

.dgn__r{grid-column:2;grid-row:1;position:relative}
.dgn__r .hero__media{clip-path:polygon(var(--dgn-cut) 0, 100% 0, 100% 100%, 0 100%)}
.dgn__edge{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.dgn__edge line{stroke:var(--orange);stroke-width:1.5}
.dgn__edge .dgn__edge-m{display:none}
.dgn__cap{
  position:absolute;right:clamp(14px,1.6vw,26px);bottom:clamp(12px,1.6vh,22px);
  display:flex;align-items:center;gap:9px;margin:0;
  font-family:var(--mono);font-size:11px;letter-spacing:.01em;color:var(--on-dark-2);
}
.dgn__cap b{color:var(--orange);font-weight:500;font-variant-numeric:tabular-nums}

.marks--dgn{grid-column:1/-1;grid-row:2}

/* ---------------------------------------------------------
   HERO 04 — "BLUEPRINT"       rif. idea/hero-idea-3.png
   Disegno tecnico: campo di punti su canvas, marchio ITALA a
   retino dentro un telaio di quote, guide di posizione sopra,
   barra di stato sotto. L'asset resta dietro, molto spento.
   --------------------------------------------------------- */
.hero--04{--hero-veil:.66}

.bpr{display:grid;grid-template-rows:auto minmax(0,1fr) auto auto}
.bpr__sky{position:absolute;inset:0;width:100%;height:100%}
.bpr__ret{
  position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(to right,rgba(255,255,255,.035) 0 1px,transparent 1px 11.111%),
    repeating-linear-gradient(to bottom,rgba(255,255,255,.028) 0 1px,transparent 1px 96px);
}

.bpr__rail{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,2.4vw,42px);
  padding:12px var(--pad);border-bottom:1px dotted rgba(255,255,255,.24);
  font-family:var(--mono);font-size:11px;letter-spacing:.02em;
  text-transform:uppercase;color:var(--on-dark-2);
}
.bpr__rail b{color:var(--orange);font-weight:500;margin-right:6px}
.bpr__rail i{font-style:normal;font-variant-numeric:tabular-nums}
.bpr__rail-c{margin-left:auto}

.bpr__body{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  gap:clamp(24px,4vw,80px);align-items:center;
  padding:clamp(16px,2.6vh,44px) var(--pad);
}

.bpr__fig{
  position:relative;justify-self:center;margin:0;
  width:min(100%,clamp(220px,26vw,420px));aspect-ratio:1;
}
.bpr__ht{width:100%;height:100%;display:block}
.bpr__cor{position:absolute;width:16px;height:16px;border:1px solid var(--orange)}
.bpr__cor--a{top:-10px;left:-10px;border-right:none;border-bottom:none}
.bpr__cor--b{top:-10px;right:-10px;border-left:none;border-bottom:none}
.bpr__cor--c{bottom:-10px;left:-10px;border-right:none;border-top:none}
.bpr__cor--d{bottom:-10px;right:-10px;border-left:none;border-top:none}
.bpr__q{
  position:absolute;font-family:var(--mono);font-size:11px;letter-spacing:.02em;
  text-transform:uppercase;color:var(--on-dark-2);white-space:nowrap;
}
.bpr__q--h{bottom:-30px;left:0}
/* writing-mode invece di una rotazione: il testo scende lungo il
   bordo destro del telaio senza dipendere dall'origine del transform */
.bpr__q--v{top:0;right:-24px;writing-mode:vertical-rl}

.bpr__c{max-width:44em}
.kick--bpr{margin-bottom:clamp(12px,1.8vh,22px)}
.bpr__dot{display:block;border-top:1px dotted rgba(255,255,255,.26);margin:clamp(12px,1.8vh,22px) 0}
.h1--bpr{
  font-size:clamp(34px,4.7vw,76px);line-height:.94;letter-spacing:-.01em;
  font-variation-settings:'wdth' 108,'wght' 700;max-width:none;margin-bottom:0;
}
.h1__sub--bpr{
  font-family:var(--mono);font-size:clamp(12px,1.05vw,14px);line-height:1.6;
  letter-spacing:.01em;color:var(--on-dark);font-variation-settings:normal;
  margin-bottom:clamp(10px,1.4vh,18px);max-width:none;
}
.hero__lead--bpr{
  font-family:var(--mono);font-size:clamp(11px,.92vw,12.5px);line-height:1.78;
  letter-spacing:.01em;max-width:62ch;
}
.bpr__cta{gap:12px;margin-top:clamp(4px,1vh,12px)}
.btn--ghost{
  background:transparent;border:1px solid rgba(244,242,238,.42);color:var(--on-dark);
  padding:13px 20px;font-size:11px;font-weight:500;letter-spacing:.02em;
}
.btn--ghost:hover{background:var(--orange);border-color:var(--orange);color:var(--on-orange)}
.bpr__sig{
  margin-top:clamp(14px,2vh,26px);
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:rgba(244,242,238,.3);
}

.marks--bpr{border-top:1px dotted rgba(255,255,255,.24)}

.bpr__st{
  display:flex;align-items:center;gap:12px;
  padding:9px var(--pad);border-top:1px solid var(--line-d);
  background:rgba(15,15,17,.72);
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--on-dark-2);
}
.bpr__st-d{width:6px;height:6px;background:var(--orange);flex:0 0 auto;animation:blink 2.2s steps(1,end) infinite}
.bpr__st-r{margin-left:auto;text-align:right}
.bpr__st-r b{color:var(--on-dark);font-weight:500;font-variant-numeric:tabular-nums}
.bpr__bars{display:flex;align-items:flex-end;gap:3px;height:11px}
.bpr__bars i{
  width:3px;height:100%;background:var(--orange);opacity:.75;
  transform-origin:50% 100%;animation:bprb 1.4s steps(4,end) infinite;
}
.bpr__bars i:nth-child(2){animation-delay:.18s}
.bpr__bars i:nth-child(3){animation-delay:.42s}
.bpr__bars i:nth-child(4){animation-delay:.09s}
.bpr__bars i:nth-child(5){animation-delay:.63s}
.bpr__bars i:nth-child(6){animation-delay:.31s}
@keyframes bprb{
  0%{transform:scaleY(.28)} 25%{transform:scaleY(1)}
  50%{transform:scaleY(.5)} 75%{transform:scaleY(.78)}
  100%{transform:scaleY(.28)}
}

/* ---------------------------------------------------------
   HERO 05 — "CONTORNO"    rif. idea/hero-idea-4.png + cta-idea-1.png
   Titolo enorme al centro, terza riga di solo contorno, fascio
   di filamenti su canvas dietro.
   --------------------------------------------------------- */
.hero--05{--hero-veil:.6}

.ctr__cv{position:absolute;inset:0;width:100%;height:100%}

/* il testo sta al centro e non arriva mai agli angoli: pannello
   certificazioni e riga di segnaposto ci si infilano dentro invece
   di prendersi una riga loro. Cosi' il titolo puo' restare grande
   e la fascia dei marchi resta sopra la piega anche a 1366x768. */
.ctr__in{
  position:relative;flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:clamp(16px,2.4vh,38px) var(--pad);
}
.ctr__brand{
  display:flex;align-items:center;gap:11px;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--on-dark-2);
  margin-bottom:clamp(14px,2.4vh,36px);
}
.ctr__brand-d{width:8px;height:8px;background:var(--orange);flex:0 0 auto}

/* il tetto in vh, non solo in vw: su un monitor basso il titolo
   e' quello che fa uscire la hero dal primo schermo */
.h1--ctr{
  font-size:clamp(40px,min(8.2vw,11.9vh),132px);line-height:.84;letter-spacing:-.05em;
  max-width:none;margin-bottom:clamp(12px,2vh,28px);
}
/* la terza riga e' di solo contorno. Il ripiego e' il testo PIENO,
   non il testo invisibile: dove -webkit-text-stroke non c'e', la
   riga resta leggibile in arancio. */
/* qui SplitText lavora senza maschera (data-mask="off" sull'h1):
   il contorno della terza riga sborda dal riquadro della riga e una
   maschera lo taglierebbe. Le righe salgono senza essere ritagliate. */
.h1--ctr .sp-line{overflow:visible}

.h1--ctr em{color:var(--orange)}
/* la prova e' sulla longhand, che e' anche quella che si applica:
   scritta con la shorthand il colore nel prelude verrebbe letto come
   un colore di testo (nero su coal) dal detector di design. */
@supports (-webkit-text-stroke-width: 1px){
  .h1--ctr em{
    /* non `transparent`: un velo d'arancio dentro le lettere le stacca
       dal fondo e dai filamenti che ci passano dietro. Il disegno lo
       fa comunque il contorno. */
    color:rgba(222,123,35,.14);
    -webkit-text-stroke-width:clamp(1px,.17vw,2.6px);
    -webkit-text-stroke-color:var(--orange);
  }
}

.ctr__sub{
  font-size:clamp(16px,1.7vw,24px);line-height:1.3;letter-spacing:-.02em;
  font-variation-settings:'wdth' 98,'wght' 500;color:var(--on-dark);
  margin-bottom:clamp(8px,1.3vh,18px);
}
.ctr__lead{
  font-family:var(--mono);font-size:clamp(11px,.92vw,12.5px);line-height:1.76;
  letter-spacing:.03em;text-transform:uppercase;color:var(--on-dark-2);
  max-width:74ch;margin-bottom:clamp(16px,2.6vh,38px);
}
.ctr__cta{display:flex;align-items:center;gap:clamp(20px,2.6vw,40px);flex-wrap:wrap;justify-content:center}
.ctr__go{
  display:inline-flex;align-items:center;gap:16px;will-change:transform;
  font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.02em;text-transform:uppercase;color:var(--on-dark);
}
.ctr__go-c{
  width:clamp(54px,4.4vw,72px);height:clamp(54px,4.4vw,72px);flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  border:1px solid rgba(244,242,238,.45);
  transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease);
}
.ctr__go-c svg{width:40%;height:40%}
.ctr__go:hover .ctr__go-c{background:var(--orange);border-color:var(--orange);color:var(--on-orange)}

.hstat--corner{
  position:absolute;top:auto;right:var(--pad);bottom:clamp(6px,1.2vh,16px);
  width:clamp(240px,21vw,300px);
  padding-top:9px;
}
.hstat--corner .hstat__k{margin-bottom:8px}
.hstat--corner .hstat__l li{padding:5px 0}
.hstat--corner .hstat__f{padding-top:7px}
.hero__ph--ctr{
  position:absolute;left:var(--pad);bottom:clamp(6px,1.2vh,16px);
  margin:0;text-align:left;white-space:nowrap;
}


/* ---------------------------------------------------------
   HERO 06 — "CIRCUITO"        derivata dalla 05
   Stesso impianto di testo della 05, fondo rifatto: un piano di
   circuito disegnato su due tele. Il titolo sta dentro il die —
   il riquadro smussato al centro — e le piste escono a pettine
   dai suoi lati, perpendicolari: e' quello che tiene l'aria in
   mezzo e riempie il resto senza fare stella.

   Le classi sono tutte sue (.cir__*): la proposta si porta via
   con la sola <section>, senza trascinarsi dietro la 05.
   --------------------------------------------------------- */
.hero--06{
  /* TERZA FAMIGLIA, solo qui. La regola di marca fissa Archivo +
     Martian Mono per tutta la V3: questa e' una deroga chiesta dal
     cliente per la sola proposta 06, e vive dentro la sua sezione
     invece che nel :root proprio per non sconfinare. Se vince
     un'altra hero, sparisce con questa (e con la riga nel <head>). */
  --serif:'Newsreader', ui-serif, Georgia, 'Times New Roman', serif;

  --hero-veil:.5;
  /* quanto pesa il terreno lontano dietro al circuito: e' un
     numero solo. 0 = solo circuito, niente immagine. */
  --cir-terra:.32;
}

/* l'immagine di prova (domani il video) sta nello slot delle
   altre proposte, ma qui e' un piano di fondo lontano: grigia,
   scura e bassa, il circuito le sta sopra */
.hero__el--cir{
  opacity:var(--cir-terra);
  /* contrasto alto e luci basse: cosi' del panorama restano le
     creste e le strutture, che leggono come un rilievo lontano
     sotto la scheda. Con poco contrasto diventava una macchia. */
  filter:grayscale(1) contrast(1.55) brightness(.42);
}

/* le due tele coprono il piano dell'immagine, non solo la
   colonna di testo: le piste arrivano fino ai bordi */
.cir__cv{position:absolute;inset:0;width:100%;height:100%}

.cir__in{
  position:relative;flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:clamp(16px,2.4vh,38px) var(--pad);
}
/* il blocco che il canvas misura. Niente stile proprio: e' solo
   il riferimento geometrico del die, e deve restare stretto sul
   testo. width:100% perche' le righe restino centrate. */
.cir__die{
  width:100%;max-width:1180px;
  display:flex;flex-direction:column;align-items:center;
}

.cir__brand{
  display:flex;align-items:center;gap:11px;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--on-dark-2);
  margin-bottom:clamp(14px,2.4vh,36px);
}
.cir__brand-d{width:8px;height:8px;background:var(--orange);flex:0 0 auto}

/* il tetto in vh, non solo in vw: su un monitor basso il titolo
   e' quello che fa uscire la hero dal primo schermo */
.h1--cir{
  font-size:clamp(40px,min(8.2vw,11.9vh),132px);line-height:.84;letter-spacing:-.05em;
  max-width:none;margin-bottom:clamp(12px,2vh,28px);
}
/* SplitText lavora senza maschera (data-mask="off" sull'h1): il
   contorno della terza riga sborda dal riquadro della riga e una
   maschera lo taglierebbe */
.h1--cir .sp-line{overflow:visible}

.h1--cir em{color:var(--orange)}
/* la prova e' sulla longhand, che e' anche quella che si applica:
   con la shorthand il colore nel prelude verrebbe letto come un
   colore di testo (nero su coal) dal detector di design. */
@supports (-webkit-text-stroke-width: 1px){
  .h1--cir em{
    /* non `transparent`: un velo d'arancio dentro le lettere le
       stacca dal circuito che passa dietro. Il disegno lo fa
       comunque il contorno. Dove -webkit-text-stroke non c'e', la
       riga resta PIENA e leggibile, mai invisibile. */
    color:rgba(222,123,35,.16);
    -webkit-text-stroke-width:clamp(1px,.17vw,2.6px);
    -webkit-text-stroke-color:var(--orange);
  }
}

/* SOMMARIO — e' la frase che deve atterrare, non una didascalia.
   Tutto il resto della hero e' macchina: il fondo e' un circuito,
   l'occhiello e la CTA sono monospaziati, il titolo e' un grottesco
   industriale in maiuscolo. Queste due righe sono l'unica voce
   umana del blocco, ed e' l'unica cosa che il grottesco non sapeva
   dire. Il grazie non e' decorazione: e' il contrasto fra la
   macchina intorno e la promessa al centro.
   opsz 44: alla misura del display il carattere puo' permettersi
   il contrasto fra pieni e sottili, ed e' li' che ha voce. */
.cir__sub{
  font-family:var(--sans);
  font-size:clamp(20px,1.95vw,31px);line-height:1.18;letter-spacing:-.008em;
  font-variation-settings:'opsz' 44,'wght' 440;color:var(--on-dark);
  max-width:44ch;margin-bottom:clamp(12px,1.8vh,24px);
  text-wrap:balance;
}

/* LEAD — corpo del testo, nella stessa voce del sommario.
   Era Martian Mono MAIUSCOLO a 12,5px: la stessa voce del pannello
   ISO, della riga di segnaposto, dell'occhiello e della CTA. Cioe'
   la voce dei DATI TECNICI, prestata al paragrafo piu' lungo della
   hero. Con cinque ruoli su sei in mono, il mono non distingueva
   piu' niente — e monospaziato + maiuscolo + centrato e' il caso
   peggiore per leggere: il primo appiattisce la forma delle parole,
   il secondo toglie le aste, il terzo toglie il bordo sinistro.
   Il mono adesso resta dov'e' un'annotazione tecnica davvero.

   opsz 15 e non 44 come il sommario: e' la ragione per cui serve un
   variabile con l'asse ottico. A 17px su fondo scuro i tratti
   sottili di un grazie tarato per il display si assottigliano fino
   a sparire; alla dimensione ottica da testo il carattere li
   ingrossa da solo e le grazie reggono. Stesso font, due tarature,
   un ruolo ciascuna. */
.cir__lead{
  font-family:var(--serif);
  font-size:clamp(16px,1.22vw,18.5px);line-height:1.62;color:var(--on-dark-2);
  font-variation-settings:'opsz' 15,'wght' 400;
  max-width:58ch;margin-bottom:clamp(16px,2.4vh,34px);
  text-wrap:balance;
}
.cir__cta{display:flex;align-items:center;gap:clamp(20px,2.6vw,40px);flex-wrap:wrap;justify-content:center}
.cir__go{
  display:inline-flex;align-items:center;gap:16px;will-change:transform;
  font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.02em;text-transform:uppercase;color:var(--on-dark);
}
.cir__go-c{
  width:clamp(54px,4.4vw,72px);height:clamp(54px,4.4vw,72px);flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  border:1px solid rgba(244,242,238,.45);
  transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease);
}
.cir__go-c svg{width:40%;height:40%}
.cir__go:hover .cir__go-c{background:var(--orange);border-color:var(--orange);color:var(--on-orange)}

/* i due angoli bassi, come nella 05 */
.hstat--cir{
  position:absolute;top:auto;right:var(--pad);bottom:clamp(6px,1.2vh,16px);
  width:clamp(240px,21vw,300px);
  padding-top:9px;
}
.hstat--cir .hstat__k{margin-bottom:8px}
.hstat--cir .hstat__l li{padding:5px 0}
.hstat--cir .hstat__f{padding-top:7px}
.hero__ph--cir{
  position:absolute;left:var(--pad);bottom:clamp(6px,1.2vh,16px);
  margin:0;text-align:left;white-space:nowrap;
}

/* ---------------------------------------------------------
   HERO 07 — "LOCANDINA"   rif. idea/hero-v7.jpg + hero-v7-mobile.jpg
   Asset a piena pagina, lockup dei marchi in testa, titolo
   enorme nella colonna di sinistra e, in fondo, il plinto di
   celle contigue con i dati. In pagina c'e' l'immagine di prova
   assets/img/hero-test-3.webp, A COLORI: il filtro grayscale di
   .hero__el e' spento, le tracce arancio della scena sono gia'
   in palette. Il video di _asset/video/ e' commentato, pronto.

   GLI STRATI SOPRA L'ASSET, dal basso in alto:

   1. #locTono, il filtro anti-bagliore (SVG nell'HTML): comprime
      le sole alte luci sulla LUMINANZA, quindi la tinta resta.
      Misurato sull'immagine di prova: mediana 37/255, p90 103,
      p99 234, e sull'anello cromato il 14% dei pixel oltre 166.
      Il ginocchio e' a .50: sotto resta identico il ~94% dei
      pixel, sopra il bianco pieno scende a .72. E' un filtro, non
      un piano in piu': un velo piatto per spegnere i riflessi
      avrebbe spento con loro anche le ombre;
   2. .loc__tint: arancio in mix-blend-mode:color al 10%, il
      trattamento delle immagini della V3C. Il blend tiene la
      luminosita', quindi non sposta il contrasto;
   3. .hero__veil: velo coal PIATTO a --hero-veil, su tutta la
      scena. Leggero di proposito: deve restare un'immagine;
   4. .loc__scrim: lo scrim della colonna di testo, coal a
      --loc-piano, che si scioglie verso destra partendo da dove
      finisce l'inchiostro. E' l'unico piano in dissolvenza, per
      scelta esplicita: il perche' sta sulla sua regola.

   ATTENZIONE: i numeri di contrasto (sulla regola dello scrim)
   sono di QUESTO asset. Se l'asset cambia si rimisura, e i
   valori da muovere sono --hero-veil e --loc-piano, in
   quest'ordine; il ginocchio del filtro solo se l'asset nuovo ha
   una distribuzione di luci molto diversa.
   --------------------------------------------------------- */
.hero--07{
  /* corpo del titolo: il tetto in vh, non solo in vw, e' quello che
     tiene la hero nel primo schermo su un monitor basso. Sta qui
     perche' lo usano anche le CTA. */
  --loc-h1:clamp(38px,min(6.6vw,9.4vh),110px);
  --hero-veil:.2;
  /* opacita' del piano sotto la colonna di testo. .62 e non .5: il
     filtro porta il bianco pieno a .72, velo e scrim lo portano a
     ~66/255 sotto il testo, e li' la riga ARANCIO del titolo sta a
     3,3:1 (display, soglia 3:1). A .5 il tetto era 82/255 e
     l'arancio scendeva a 2,6:1. */
  --loc-piano:.62;
  /* lunghezza della dissolvenza, e il bordo che non deve passare:
     il soggetto dell'immagine di prova (l'anello) comincia al
     60,7% del fotogramma, e il cover lo sposta solo a destra */
  --loc-fade:clamp(150px,15vw,300px);
  --loc-soggetto:60%;
}

/* .loc eredita da .hero__stage la colonna flex: rail dei marchi,
   colonna di testo che si prende l'altezza che avanza, plinto. */
.loc__vid{background:var(--coal)}
/* l'immagine sta a sinistra in alto (il soggetto resta il piu'
   possibile a destra, lontano dal testo). Sotto i 900px si sposta
   sul soggetto: vedi il responsive.
   Alta quanto la hero e non il 112% di .hero__el: con `cover` quel
   12% in piu' ingrandiva anche la larghezza, e a 1440 l'anello
   usciva dal bordo destro. Il margine sopra non serve: la
   parallasse spinge solo verso il basso, e la striscia che scopre
   in alto e' sempre gia' sotto la testata. */
.loc__img{
  top:0;height:100%;
  background-color:var(--coal);background-repeat:no-repeat;
  background-size:cover;background-position:left top;
  background-image: var(--hero-img);
}
/* il filtro vale per qualunque asset stia nello slot, video compreso */
.hero--07 .hero__el{filter:url(#locTono)}
.loc__fx{position:absolute;width:0;height:0;overflow:hidden}
.loc__tint{
  position:absolute;inset:0;
  background:var(--orange);mix-blend-mode:color;opacity:.1;
}

/* --- il lockup dei marchi: una lastra di vetro bassa ---
   Prima erano due celle coal al 62% con l'etichetta su tre righe:
   110px a 1440, 151 sotto i 900. Adesso e' UNA lastra — il vetro
   sta sul contenitore, le celle sono trasparenti — e l'etichetta
   va su due righe: "Clienti" e il titolo sulla stessa linea di
   base, la nota sotto. ~58px a 1440.
   Il vetro e' coal a tinta unita + backdrop-filter: nessun
   gradiente. saturate() tiene vive le luci arancio che passano
   sotto sfocate, ed e' quello che fa leggere il vetro. Il filetto
   verticale fra etichetta e nastro e' un bordo, non piu' il gap
   della griglia: col fondo trasparente il gap non si vedrebbe. */
.marks--loc{
  gap:0;border-top:0;border-bottom:1px solid rgba(255,255,255,.1);
  background:rgba(15,15,17,.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.45);backdrop-filter:blur(18px) saturate(1.45);
}
.marks--loc .marks__k,
.marks--loc .marks__vp{background:transparent}
.marks--loc .marks__k{
  width:auto;
  /* auto 1fr e non auto auto: la nota sotto e' piu' larga delle due
     parole sopra, e con due auto l'avanzo si divideva a meta' e
     staccava "Chi ci ha scelto" da "Clienti" */
  display:grid;grid-template-columns:auto minmax(0,1fr);
  align-content:center;align-items:baseline;column-gap:11px;row-gap:3px;
  padding:clamp(9px,1.25vh,14px) clamp(18px,1.7vw,30px) clamp(9px,1.25vh,14px) var(--pad);
  border-right:1px solid rgba(255,255,255,.1);
}
.marks--loc .marks__kk{margin:0}
.marks--loc .marks__t{font-size:13px;line-height:1.1;letter-spacing:-.01em;margin:0}
.marks--loc .marks__m{grid-column:1/-1;line-height:1.35;white-space:nowrap}

/* i marchi in altezza fissa e non in larghezza: i file sono tutti
   260x72 con il logo gia' centrato, quindi la stessa altezza da'
   la stessa cella a tutti e il ritmo delle × resta regolare.
   Opacita' .6 e non .56: sul vetro passano le luci sfocate. */
.marks--loc .mark{
  position:relative;width:auto;border-right:0;
  padding:0 clamp(18px,1.6vw,28px);
}
.marks--loc .mark img{width:auto;max-width:none;height:clamp(22px,2.9vh,29px);opacity:.6}
.marks--loc .mark:hover img{opacity:1}
/* niente filetto fra un marchio e l'altro: al suo posto la ×, che
   e' il segno del riferimento. Cade sul confine fra due celle, e
   quindi anche fra l'ultimo marchio e il primo clone del nastro. */
.marks--loc .mark::after{
  content:'\00D7';position:absolute;right:0;top:50%;
  transform:translate(50%,-50%);
  font-family:var(--mono);font-size:10px;line-height:1;
  color:rgba(244,242,238,.3);pointer-events:none;
}

/* --- lo scrim della colonna di testo: segue l'inchiostro ---
   E' il piano che porta il contrasto dove ci sono le parole. Sta
   nel piano dell'ASSET e non come fondo di .loc__l: legato alla
   colonna finirebbe con lei, e una dissolvenza chiusa dentro la
   colonna avrebbe si' e no 150px per succedere.
   L'elemento e' <div class="loc__scrim"> dentro .hero__media, dopo
   .hero__veil. Senza, il testo finisce sull'immagine nuda.

   I due capi della rampa non sono piu' percentuali scritte a mano
   e rifatte a ogni cambio di titolo o di formato:
   - DOVE COMINCIA (--a): dove finisce l'inchiostro, piu' 12px.
     main.js misura i riquadri delle RIGHE di testo della colonna
     (occhiello, titolo, lead) e il bordo delle due CTA, e scrive
     il piu' a destra in --loc-ink. Si rimisura al ridimensionamento
     e a document.fonts.ready. Senza JS vale il 48%, che copre il
     titolo a ogni formato.
   - DOVE FINISCE (--b): --loc-fade piu' in la', ma mai oltre
     --loc-soggetto, cioe' prima del soggetto dell'immagine. Se il
     testo arriva cosi' a destra che fra i due resterebbero meno di
     110px, vince la morbidezza: la rampa sfiora il bordo del
     soggetto invece di diventare un gradino.
   Fra i due capi, sette fermate campionate da uno SMOOTHERSTEP
   (6t^5 - 15t^4 + 10t^3): derivata prima e seconda nulle ai due
   capi, quindi non si vede dove la rampa parte ne' dove muore.

   CONTRASTO — misurato sul composito vero: testo nascosto,
   cattura in Chrome a 1920x1080, 1440x900, 1366x768 e 1180x860,
   colore del testo composto con la sua opacita', pixel peggiore
   di ogni riga. I numeri stanno in CLAUDE.md, capitolo della 07.

   NOTA DI MARCA: le regole del progetto vietano i gradienti di
   sfondo, e per questo tutti i veli della V3 sono a tinta unita.
   Questa e' una deroga chiesta esplicitamente, e vale per questo
   scrim soltanto: e' uno strumento di leggibilita' sopra una
   ripresa, non un fondo decorativo. Il velo e la lastra dei
   marchi restano piatti. --- */
.loc__scrim{
  --a:calc(var(--loc-ink,48%) + 12px);
  --b:max(calc(var(--a) + 110px), min(calc(var(--a) + var(--loc-fade)), var(--loc-soggetto)));
  --s:calc((var(--b) - var(--a)) / 6);
  position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(15,15,17,var(--loc-piano))                  0,
    rgba(15,15,17,var(--loc-piano))                  var(--a),
    rgba(15,15,17,calc(var(--loc-piano) * .964))     calc(var(--a) + var(--s)),
    rgba(15,15,17,calc(var(--loc-piano) * .79))      calc(var(--a) + var(--s) * 2),
    rgba(15,15,17,calc(var(--loc-piano) * .5))       calc(var(--a) + var(--s) * 3),
    rgba(15,15,17,calc(var(--loc-piano) * .21))      calc(var(--a) + var(--s) * 4),
    rgba(15,15,17,calc(var(--loc-piano) * .036))     calc(var(--a) + var(--s) * 5),
    rgba(15,15,17,0)                                 var(--b));
}

/* --- la colonna di testo: solo impianto, nessun fondo suo --- */
.loc__l{
  flex:1;width:min(58%,1060px);
  display:flex;flex-direction:column;
  padding:clamp(16px,2.6vh,40px) clamp(24px,3vw,64px) clamp(16px,2.6vh,40px) var(--pad);
}
/* il gruppo e' largo quanto la cosa piu' larga che contiene, cioe'
   il titolo: le CTA prendono quella misura e finiscono a filo
   della riga piu' lunga. Centrato in altezza, occhiello compreso. */
.loc__copy{margin:auto 0;width:fit-content;max-width:100%}
.loc__copy .kick{margin-bottom:clamp(14px,2.4vh,30px)}

.h1--loc{
  font-size:var(--loc-h1);
  max-width:none;margin-bottom:clamp(14px,2.2vh,30px);
}

/* Il lead sta su --on-dark e non su --on-dark-2 come nelle altre
   proposte: li' il fondo e' coal pieno o una tela disegnata, qui
   e' un'immagine, e sul pixel piu' chiaro --on-dark-2 non regge.
   Senza il sommario (tolto nella sola 07) e' la prima voce dopo il
   titolo: sale di un gradino di corpo e resta su tre righe. */
.loc__lead{
  font-size:clamp(15px,min(1.2vw,2.2vh),19px);line-height:1.58;
  color:var(--on-dark);max-width:50ch;
  margin-bottom:clamp(18px,2.8vh,38px);
}

/* --- le due CTA: celle piene e contigue ---
   Stessa grammatica del plinto: dato in mono sopra, valore in
   Archivo sotto, filetto da 1px fra le due. Larghe insieme quanto
   il titolo — `width:0; min-width:100%` le toglie dal calcolo
   della larghezza del gruppo, cosi' la misura la detta il titolo
   e non il testo delle celle.
   La principale e' arancio pieno; la seconda e' vetro coal, che
   sull'immagine regge il contrasto da sola (il link di testo che
   c'era prima, al 75% di opacita', sul video scendeva a 3,8:1).
   Niente .magnet: una cella che si sposta sotto al mouse
   romperebbe la contiguita'. Il movimento lo fa la freccia, in
   transform. */
/* Colonne `auto`, non due 1fr: le due etichette sono lunghe 20 e
   26 caratteri, e a meta' esatta la seconda andava a capo mentre
   la prima stava su una riga. Con `auto` ognuna cresce fino a
   stare su una riga; l'avanzo, se c'e', si divide a meta'.
   Il corpo delle etichette e' una frazione di quello del titolo
   (--loc-h1): la larghezza delle CTA e' la riga piu' lunga del
   titolo, quindi cresce e cala con lui, e se le etichette entrano
   in una riga a un formato entrano a tutti. Misurato: una riga
   sola da 1920 fino a ~1000px di larghezza. */
.loc__cta{
  display:grid;grid-template-columns:auto auto;gap:1px;
  width:0;min-width:100%;
}
/* la freccia sta sulla riga del dato, in alto a destra, e non in
   una colonna sua: cosi' l'etichetta ha tutta la larghezza */
.loc__go{
  position:relative;
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"k a" "t t";
  align-items:center;column-gap:12px;row-gap:8px;
  padding:clamp(13px,1.8vh,20px) clamp(16px,1.4vw,24px);
  transition:background-color .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease);
}
.loc__go-k{
  grid-area:k;
  font-family:var(--mono);font-size:11px;line-height:1.3;letter-spacing:.01em;text-transform:uppercase;
}
.loc__go-t{
  grid-area:t;
  font-size:clamp(13px,calc(var(--loc-h1) * .19),18px);line-height:1.1;letter-spacing:-.015em;
  font-variation-settings:'wdth' 106,'wght' 700;text-transform:uppercase;
}
.loc__go-a{
  grid-area:a;font-family:var(--mono);font-size:15px;line-height:1;
  transition:transform .45s var(--ease-2);
}
.loc__go:hover .loc__go-a,.loc__go:focus-visible .loc__go-a{transform:translateX(5px)}
.loc__go:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* il dato sull'arancio a colore pieno e non attenuato: --on-orange
   al 78% scende a 4,3:1, sotto AA per un 11px */
.loc__go--p{background:var(--orange);color:var(--on-orange)}
.loc__go--p:hover{background:var(--bone);color:var(--on-light)}

.loc__go--s{
  background:rgba(15,15,17,.72);color:var(--on-dark);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
}
.loc__go--s .loc__go-k{color:var(--on-dark-2)}
.loc__go--s .loc__go-a{color:var(--orange)}
.loc__go--s:hover{background:var(--orange);color:var(--on-orange);box-shadow:inset 0 0 0 1px var(--orange)}
.loc__go--s:hover .loc__go-k,.loc__go--s:hover .loc__go-a{color:inherit}

/* --- annotazione di revisione: una targhetta, non testo nudo ---
   Sta sopra al plinto, sulla meta' destra, cioe' sull'asset PIENO:
   li' fuori dal piano della colonna il velo da solo non basta
   (misurato sul video: 4,3:1). La targhetta e' quasi opaca e non al 62% come
   le celle del rail, perche' qui dentro c'e' anche il percorso del
   file in --orange, che a 11px vuole 4,5:1 come tutto il resto:
   con .82 vengono 4,7:1 sull'arancio e 12,6:1 sul testo bianco.
   STRUMENTO DI REVISIONE, va via con i segnaposto. */
.hero__ph--loc{
  align-self:flex-end;margin:0 var(--pad) clamp(8px,1.2vh,16px);
  padding:6px clamp(10px,1vw,14px);
  background:rgba(15,15,17,.82);color:var(--on-dark);
}

/* --- il plinto: celle contigue, come nel riferimento ---
   Su bone, non sul video: e' l'unico punto della hero dove il
   contrasto non dipende dalla ripresa, ed e' anche il terzo
   colore della V3 prima dell'arancio della .band.
   Flex e non grid: quando lo spazio finisce le celle vanno a capo
   da sole, e i filetti restano i gap da 1px. */
.loc__pl{
  display:flex;flex-wrap:wrap;gap:1px;
  background:var(--line-l);border-top:1px solid var(--line-d);
  color:var(--on-light);
}
.loc__cs{display:flex;flex:1 1 auto;gap:1px;background:var(--line-l)}

.loc__c{
  background:var(--bone);margin:0;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;column-gap:clamp(10px,1vw,15px);row-gap:2px;
  padding:clamp(11px,1.6vh,20px) clamp(14px,1.5vw,26px);
}
.loc__cs .loc__c{flex:1 1 clamp(210px,20vw,340px)}
.loc__c--t{flex:1 1 clamp(180px,15vw,260px)}

/* In gabbia con la pagina: i fondi delle celle vanno a filo del
   bordo, ma il contenuto delle celle sul bordo rientra di --pad,
   come titolo, lastra dei marchi e testata. Le celle interne
   tengono il loro passo stretto.
   Perche' "la cella sul bordo" sia sempre la stessa, le righe non
   sono lasciate al caso del flex-wrap: sopra i 1180 una riga sola
   (nowrap, le celle stringono), sotto l'ora locale va su una riga
   sua, sotto i 900 anche la cella arancio, sotto i 620 tutte. Ogni
   soglia dichiara i suoi bordi. */
.loc__pl{flex-wrap:nowrap}
.loc__c--k{padding-left:var(--pad)}
.loc__c--t{padding-right:var(--pad)}
@media (max-width:1180px){
  .loc__pl{flex-wrap:wrap}
  /* base 0: le certificazioni stringono accanto alla cella arancio
     invece di andare a capo sotto di lei (a ~950px succedeva) */
  .loc__cs{flex:1 1 0;min-width:0}
  .loc__c--t{flex-basis:100%;padding-left:var(--pad)}
  .loc__cs .loc__c:last-child{padding-right:var(--pad)}
}
@media (max-width:900px){
  .loc__c--k{padding-right:var(--pad)}
  .loc__cs .loc__c:first-child{padding-left:var(--pad)}
}
@media (max-width:620px){
  .loc__cs .loc__c{padding-left:var(--pad);padding-right:var(--pad)}
}

/* il sigillo e' lo stesso della sezione CERTIFICAZIONI, ridotto */
.loc__c-s{
  grid-row:1/3;width:clamp(26px,2.3vw,34px);height:auto;aspect-ratio:1;
  color:var(--orange-ink);
}
.loc__c-k{
  grid-column:2;grid-row:1;
  font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase;
  color:var(--orange-ink);
}
.loc__c-t{
  grid-column:3;grid-row:1;display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11px;letter-spacing:.01em;color:var(--on-light-2);
}
.loc__c-v{
  grid-column:2/-1;grid-row:2;
  font-size:clamp(15px,1.35vw,20px);line-height:1.14;letter-spacing:-.02em;
  font-variation-settings:'wdth' 106,'wght' 700;text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}

/* la cella d'apertura e' arancio pieno: e' il quadrato scuro del
   riferimento, ed e' anche l'unico modo di mettere l'arancio qui
   senza scriverci sopra (su bone il testo arancio non passa AA:
   per quello esiste --orange-ink). */
.loc__c--k{
  flex:0 0 auto;grid-template-columns:minmax(0,1fr);
  background:var(--orange);color:var(--on-orange);
  align-content:center;row-gap:6px;
}
.loc__c-kk{
  grid-column:1;
  font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase;
  opacity:.78;
}
.loc__c-kv{
  grid-column:1;
  font-size:clamp(15px,1.35vw,20px);line-height:1.14;letter-spacing:-.02em;
  font-variation-settings:'wdth' 106,'wght' 700;text-transform:uppercase;
}


/* =========================================================
   NAVIGATORE DELLE PROPOSTE DI HERO
   ---------------------------------------------------------
   STRUMENTO DI REVISIONE — non fa parte del sito.
   Va via insieme al blocco .hnav dell'HTML e alla sezione 12
   di main.js. Sta in basso a sinistra: la barra di anteprima
   condivisa e' centrata, quindi sotto i 1440px questo si alza
   per non finirci sopra.
   ========================================================= */
/* Una barra bassa e stretta, non un pannello: sta sopra alla barra
   di anteprima condivisa (centrata in basso) e copre solo una
   striscia dell'angolo, qualunque sia la proposta in scena. */
.hnav,.hnav__o{
  position:fixed;left:18px;bottom:86px;z-index:900;
  font-family:var(--mono);
  background:rgba(16,16,18,.94);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 8px 28px rgba(0,0,0,.5);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
/* `display:flex` qui sotto batterebbe l'[hidden]{display:none} del
   browser: senza questa riga il guscio vuoto e il tab di riapertura
   resterebbero in pagina tutti e due. */
.hnav[hidden],.hnav__o[hidden]{display:none}

.hnav{display:flex;align-items:center;padding:5px 5px 5px 13px}
.hnav__k{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-dark-2);padding-right:11px;margin-right:6px;
  border-right:1px solid rgba(255,255,255,.16);white-space:nowrap;
}

.hnav__l{display:flex;gap:2px}
.hnav__l button{
  width:32px;height:28px;display:flex;align-items:center;justify-content:center;
  background:#131315;border:0;cursor:pointer;
  font-family:inherit;font-size:11px;letter-spacing:.02em;color:#8A898D;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.hnav__l button:hover{background:#26262B;color:var(--on-dark)}
.hnav__l button:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
.hnav__l button[aria-current="true"]{background:var(--orange);color:var(--on-orange)}

.hnav__now{
  padding:0 12px;min-width:112px;white-space:nowrap;
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--on-dark);
}
.hnav__h{margin-right:8px;white-space:nowrap}
.hnav__h kbd{
  font-family:inherit;font-size:10px;padding:1px 5px;margin-right:3px;
  border:1px solid rgba(255,255,255,.22);color:var(--on-dark-2);
}
.hnav__x{
  width:26px;height:26px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;cursor:pointer;
  color:#8A898D;font-size:13px;line-height:1;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.hnav__x:hover{background:rgba(255,255,255,.1);color:var(--on-dark)}
.hnav__x:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}

.hnav__o{
  display:flex;align-items:center;gap:9px;cursor:pointer;
  padding:9px 14px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--on-dark-2);transition:color .25s var(--ease),border-color .25s var(--ease);
}
.hnav__o:hover{color:var(--on-dark);border-color:rgba(255,255,255,.32)}
.hnav__o:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.hnav__o-d{width:6px;height:6px;background:var(--orange);flex:0 0 auto}

@media print{.hnav,.hnav__o{display:none}}

/* ---------------------------------------------------------
   RESPONSIVE DELLE PROPOSTE
   --------------------------------------------------------- */
@media (max-width:1180px){
  .hstat--row{grid-template-columns:1fr;gap:10px}
  .hstat--row .hstat__f{justify-content:flex-start}
  .hstat--row .hstat__l{gap:0 22px}

  .bpr__body{grid-template-columns:1fr;gap:clamp(26px,4vh,46px);justify-items:start}
  .bpr__fig{width:min(100%,280px);justify-self:start}
  .bpr__q--h{bottom:-26px}

  /* stretto: gli angoli non sono piu' liberi, i due blocchi
     rientrano nel flusso in coda alla CTA */
  .hstat--corner,.hero__ph--ctr,
  .hstat--cir,.hero__ph--cir{position:static;text-align:left}
  .hstat--corner,.hstat--cir{width:100%;max-width:420px;margin-top:clamp(18px,2.6vh,32px)}
  .hero__ph--ctr,.hero__ph--cir{white-space:normal;margin-top:clamp(10px,1.4vh,18px)}

  .loc__l{width:min(68%,860px)}
}
@media (max-width:900px){
  .dgn{grid-template-columns:1fr;grid-template-rows:auto auto auto}
  .dgn__l{grid-column:1;grid-row:1;padding:clamp(18px,2.4vh,38px) var(--pad) clamp(20px,3vh,34px)}
  .dgn__r{grid-column:1;grid-row:2;min-height:clamp(230px,40vh,360px)}
  .dgn__r .hero__media{clip-path:polygon(0 16%, 100% 0, 100% 100%, 0 100%)}
  .dgn__edge .dgn__edge-d{display:none}
  .dgn__edge .dgn__edge-m{display:inline}
  .marks--dgn{grid-row:3}

  .bpr__rail-c{margin-left:0}
  .bpr__st{flex-wrap:wrap}
  .bpr__st-r{margin-left:0;width:100%;text-align:left}

  /* come nel riferimento mobile: il blocco di testo si prende la
     parte alta e il video resta scoperto sotto, fino al plinto.
     .loc__l smette di crescere e l'annotazione, con margin-top:auto,
     spinge se stessa e il plinto in fondo. */
  /* stretto: la colonna e' larga quanto la pagina, quindi il bordo
     da dissolvere non e' piu' quello destro ma quello BASSO. Lo
     scrim orizzontale si spegne e la dissolvenza torna sulla
     colonna, verticale, con un fondo di respiro in piu' perche'
     abbia dove succedere. */
  .loc__scrim{display:none}
  .loc__l{
    width:100%;flex:0 0 auto;
    padding-bottom:clamp(64px,11vh,130px);
    background:linear-gradient(180deg,
      rgba(15,15,17,var(--loc-piano))                 0,
      rgba(15,15,17,var(--loc-piano))                 62%,
      rgba(15,15,17,calc(var(--loc-piano) * .94))   67.7%,
      rgba(15,15,17,calc(var(--loc-piano) * .78))   73.4%,
      rgba(15,15,17,calc(var(--loc-piano) * .50))     81%,
      rgba(15,15,17,calc(var(--loc-piano) * .22))   88.6%,
      rgba(15,15,17,calc(var(--loc-piano) * .06))   94.3%,
      rgba(15,15,17,0)                               100%);
  }
  /* qui la colonna e' larga quanto la pagina: il gruppo la prende
     tutta, e le CTA con lui, invece di fermarsi al titolo */
  .loc__copy{margin:clamp(18px,3vh,34px) 0 0;width:auto}
  .hero__ph--loc{align-self:flex-start;margin-top:auto}
  /* la cella arancio passa sopra alle altre tre invece di restare
     spaiata in fondo alla riga */
  .loc__c--k{flex:1 1 100%}

  /* l'immagine si sposta sul soggetto: a sinistra in alto, in una
     pagina stretta e alta, restava solo il buio della scena */
  .loc__img{background-position:74% top; background-image: var(--hero-img-mobile);}
  /* ...e cosi' l'anello cromato passa dietro l'occhiello: in
     --on-dark-2 scendeva a 3,2:1. In --on-dark sta al tetto della
     catena filtro + velo + scrim, 6,9:1. La gerarchia la tengono
     corpo e filetto arancio, non il grigio. */
  .loc__copy .kick{color:var(--on-dark)}

  /* la lastra dei marchi resta su due righe — etichetta, nastro —
     ma sottili: ~100px contro i 151 di prima */
  .marks--loc .marks__k{
    padding:9px var(--pad);
    border-right:0;border-bottom:1px solid rgba(255,255,255,.08);
  }
  .marks--loc .mark{padding:12px clamp(16px,4vw,24px)}
  .marks--loc .mark img{height:22px}
}
@media (max-width:560px){
  /* le due CTA una sopra l'altra, a piena larghezza: niente celle
     da 190px con il testo spezzato su tre righe */
  .loc__cta{grid-template-columns:1fr}
}
@media (max-width:760px){
  .hnav__now,.hnav__h{display:none}
  .ctr__go,.cir__go{gap:12px}
}
@media (max-width:620px){
  /* il plinto si srotola: prima le due certificazioni una sotto
     l'altra, poi lo stato passa sotto al nome */
  .loc__cs,.loc__c--t{flex:1 1 100%}
  .loc__cs{flex-direction:column}
  /* in colonna la flex-basis diventa un'altezza: con i 210px di
     base ogni certificazione era alta 210px, quasi tutta vuota */
  .loc__cs .loc__c{flex:0 0 auto}
  .loc__c{grid-template-columns:auto minmax(0,1fr)}
  .loc__c-t{grid-column:2;grid-row:3;margin-top:4px}
}

/* =========================================================
   ANIMAZIONI 3D  —  assets/animation/
   ---------------------------------------------------------
   Solo le regole che servivano davvero dai fogli delle tre
   dist, riscritte e chiuse dentro il contenitore .anim.
   I loro .css NON sono inclusi: sono fatti per una pagina a
   se' e mettono overflow:hidden sul body, Inter sul :root e
   un gradiente di sfondo. Il perche', per esteso, sta in
   assets/animation/LEGGIMI.md.

   Il contenitore parte nascosto perche' e' un contenitore
   VUOTO: non nasconde contenuto in attesa del JS. Finche'
   l'animazione non e' partita davvero si vede il segnaposto
   in CSS, che e' quello che deve succedere sotto file:// e
   con prefers-reduced-motion.
   ========================================================= */
.anim{position:absolute;inset:0;z-index:0;overflow:hidden;display:none}
.anim[data-stato="attiva"]{display:block}
.anim canvas{display:block;width:100%;height:100%;outline:none;cursor:auto}

/* partita l'animazione, il segnaposto si toglie di mezzo */
.hero.is-anim .hm{display:none}
.hero--04.is-anim .bpr__ht{display:none}

/* nel riquadro della 04 sta dentro il telaio di quote */
.anim--fig{z-index:1}


/* =========================================================
   PAGINE INTERNE — azienda · competenze · metodo ·
                    casi di studio · contatti
   ---------------------------------------------------------
   Stessa grammatica della home: fullwidth, celle contigue
   separate da 1px, micro-etichette mono da 11px, titoli
   Archivo maiuscoli. Cambia una cosa sola: la testata di
   pagina (.phero) NON prende tutto il primo schermo come la
   hero 07 — le pagine interne sono piu' corte, e chi ci
   arriva ha gia' visto la locandina.

   Niente classi nuove dove ne esiste gia' una che fa la
   stessa cosa: .blk--coal/steel/bone/orange per i fondi,
   .shd per le intestazioni di sezione, .lnk per i link di
   coda, .cta per l'invito finale, .stat per i numeri,
   .certc per i sigilli. Qui sotto c'e' solo cio' che nella
   home non esisteva.
   ========================================================= */

/* fondi di sezione, gli stessi quattro colori */
.sec--coal{background:var(--coal);color:var(--on-dark)}
.sec--bone{background:var(--bone-2);color:var(--on-light)}
.sec--steel{background:var(--steel);color:var(--on-dark)}

/* L'arancio come TESTO su fondo chiaro va sempre in
   --orange-ink: #DE7B23 su bone sta a 2,5:1, sotto AA (§2). */
.blk--bone .cell__k,.blk--bone .svc__k,.blk--bone .fase__n,
.blk--bone .cond__k,.blk--bone .f__k,.blk--bone .rec__k,
.blk--bone .csx__q dt,.blk--bone .fase__f dt,
.blk--bone .svc__l2 li::before,
.sec--bone .pintro__k,.sec--bone .shd__k{color:var(--orange-ink)}
.blk--bone .svc__l2 li::before{background:var(--orange-ink)}

/* ---------------------------------------------------------
   TESTATA DI PAGINA
   Titolo a sinistra, colonna di dati a destra: gli stessi due
   pesi della locandina, ma alta la meta'. Il filetto arancio
   sotto il titolo cresce da sinistra all'ingresso — movimento
   in transform, non in width (regola 2 dell'impianto).
   --------------------------------------------------------- */
.phero{position:relative;background:var(--coal);color:var(--on-dark);padding-top:var(--hdr);border-bottom:1px solid var(--line-d)}
.phero__in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);
  gap:clamp(28px,3.6vw,64px);align-items:end;
  padding:clamp(52px,7vh,104px) var(--pad) clamp(34px,4.4vh,62px);
}
.phero .kick{margin-bottom:clamp(22px,3vh,38px)}
.phero__t{
  font-size:clamp(38px,6.4vw,96px);line-height:.86;letter-spacing:-.045em;
  text-transform:uppercase;font-variation-settings:'wdth' 116,'wght' 800;
  max-width:min(100%,15ch);
}
.phero__t em{font-style:normal;color:var(--orange)}
.phero__rule{display:block;height:4px;background:var(--orange);width:clamp(120px,18vw,260px);margin-top:clamp(22px,3vh,36px);transform-origin:left}
.phero__lead{
  font-size:clamp(15px,1.3vw,19px);line-height:1.58;max-width:56ch;
  margin-top:clamp(20px,2.6vh,32px);color:var(--on-dark);
}
/* la colonna dei dati: righe con filetto, come .ftr__data */
.phero__d{border-top:1px solid var(--line-d);align-self:end}
.phero__d li{display:flex;justify-content:space-between;gap:18px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--line-d)}
.phero__d span{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--on-dark-2)}
.phero__d b{font-family:var(--mono);font-size:11px;font-weight:500;text-align:right;font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------
   BLOCCO DI APERTURA — etichetta mono a sinistra, testo a
   destra. Stessa gabbia di .shd, cambia il peso: qui il testo
   e' da leggere, non da guardare.
   --------------------------------------------------------- */
.pintro{
  display:grid;grid-template-columns:120px minmax(0,1fr) minmax(0,270px);
  gap:36px;align-items:start;
  padding:clamp(48px,6vw,92px) var(--pad) clamp(40px,5vw,76px);
}
.pintro__k{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--orange);padding-top:7px}
.pintro__b{max-width:74ch}
.pintro__b p{font-size:clamp(15px,1.3vw,18px);line-height:1.62;margin-bottom:20px}
.pintro__b p:last-child{margin-bottom:0}
.pintro__b b{font-variation-settings:'wdth' 100,'wght' 700}
.pintro__m{font-family:var(--mono);font-size:11px;line-height:1.7;letter-spacing:.01em;text-transform:uppercase;opacity:.5;text-align:right;padding-top:7px}

/* ---------------------------------------------------------
   GRIGLIE DI CELLE CONTIGUE
   I fondi li mettono le classi .blk--*; qui c'e' solo la
   griglia e il filetto da 1px che passa nel gap.
   --------------------------------------------------------- */
.grid2,.grid3,.grid4{display:grid;gap:1px;background:var(--line-d)}
.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--l{background:var(--line-l)}

.cell{display:flex;flex-direction:column;padding:clamp(28px,3.2vw,48px) var(--pad)}
.cell__k{font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase;color:var(--orange);margin-bottom:22px}
.blk--orange .cell__k{color:inherit;opacity:.85}
.cell__v{
  display:block;font-size:clamp(20px,2.1vw,28px);line-height:1.08;letter-spacing:-.035em;
  text-transform:uppercase;font-variation-settings:'wdth' 106,'wght' 700;margin-bottom:14px;
}
.cell__d{font-size:14px;line-height:1.62;opacity:.78;max-width:44ch}
.cell__d--2{margin-top:16px}
.cell__n{margin-top:auto;padding-top:20px;font-family:var(--mono);font-size:11px;line-height:1.6;letter-spacing:.01em;opacity:.6}

/* ---------------------------------------------------------
   AREE DI COMPETENZA, versione lunga
   Sigla e titolo in testa, due risposte guidate da
   un'etichetta, elenco delle cose che facciamo, caso in coda.
   --------------------------------------------------------- */
.svc{border-top:1px solid var(--line-d)}
.sec--bone .svc{border-top-color:var(--line-l)}
.svc__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:1px;background:var(--line-d)}
.sec--bone .svc__in{background:var(--line-l)}
.svc__l{padding:clamp(38px,4.2vw,68px) var(--pad)}
.svc__k{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--orange);margin-bottom:26px}
.svc__t{
  font-size:clamp(26px,3.4vw,48px);line-height:.96;letter-spacing:-.045em;
  text-transform:uppercase;font-variation-settings:'wdth' 110,'wght' 700;margin-bottom:26px;max-width:19ch;
}
.svc__q{display:grid;grid-template-columns:170px minmax(0,1fr);gap:20px;padding:18px 0;border-top:1px solid var(--line-d)}
.blk--bone .svc__q{border-top-color:var(--line-l)}
.svc__q dt{font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase;opacity:.62;padding-top:2px}
.svc__q dd{margin:0;font-size:14.5px;line-height:1.62;max-width:58ch}
.svc__r{padding:clamp(38px,4.2vw,68px) var(--pad)}
.svc__rk{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase;opacity:.65;margin-bottom:20px}
.svc__l2 li{
  display:flex;gap:12px;align-items:baseline;padding:11px 0;
  border-bottom:1px solid var(--line-d);font-size:14px;line-height:1.5;
}
.blk--bone .svc__l2 li{border-bottom-color:var(--line-l)}
.svc__l2 li::before{content:'';width:7px;height:7px;background:var(--orange);flex:0 0 auto;transform:translateY(-2px)}
.svc__l2 li:last-child{border-bottom:none}
/* sul pannello arancio pieno il pallino arancio sparirebbe: passa a
   --on-orange, e con lui i filetti fra le voci. */
.blk--orange .svc__l2 li::before{background:var(--on-orange)}
.blk--orange .svc__l2 li{border-bottom-color:rgba(35,18,4,.22)}
.blk--orange .svc__q{border-top-color:rgba(35,18,4,.22)}
/* il rimando al caso, in coda alla colonna di sinistra */
.svc__c{margin-top:26px}

/* ---------------------------------------------------------
   FASI DEL METODO
   Celle contigue in colonna: numero grande a sinistra, il
   fatto a destra, e in coda chi c'e' e cosa resta al cliente.
   --------------------------------------------------------- */
.fasi{display:grid;gap:1px;background:var(--line-d)}
.fase{display:grid;grid-template-columns:190px minmax(0,1fr);gap:clamp(24px,3vw,52px);padding:clamp(34px,3.8vw,60px) var(--pad)}
.fase__n{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--orange)}
.fase__nn{
  display:block;font-size:clamp(46px,5.4vw,84px);line-height:.82;letter-spacing:-.06em;
  font-variation-settings:'wdth' 110,'wght' 800;font-variant-numeric:tabular-nums;
  color:var(--on-dark-2);margin-top:16px;
}
.blk--bone .fase__nn{color:var(--on-light-2)}
.fase__t{
  font-size:clamp(22px,2.8vw,38px);line-height:1;letter-spacing:-.04em;
  text-transform:uppercase;font-variation-settings:'wdth' 108,'wght' 700;margin-bottom:16px;
}
.fase__d{font-size:15px;line-height:1.62;opacity:.84;max-width:64ch;margin-bottom:26px}
.fase__l li{display:flex;gap:12px;align-items:baseline;font-size:14px;line-height:1.55;padding:9px 0;border-bottom:1px solid var(--line-d)}
.blk--bone .fase__l li{border-bottom-color:var(--line-l)}
.fase__l li::before{content:'';width:7px;height:7px;background:var(--orange);flex:0 0 auto;transform:translateY(-2px)}
.blk--bone .fase__l li::before{background:var(--orange-ink)}
.fase__f{display:flex;flex-wrap:wrap;gap:0;margin-top:24px;border-top:1px solid var(--line-d)}
.blk--bone .fase__f{border-top-color:var(--line-l)}
.fase__f div{flex:1 1 240px;padding:18px 24px 0 0}
.fase__f div + div{padding-left:26px;border-left:1px solid var(--line-d)}
.blk--bone .fase__f div + div{border-left-color:var(--line-l)}
.fase__f dt{font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase;color:var(--orange);margin-bottom:9px}
.fase__f dd{margin:0;font-size:14.5px;line-height:1.5;font-variation-settings:'wdth' 104,'wght' 600}

/* CONTRASTO DELLE CELLE FASE — misurato, non a occhio.
   L'arancio come testo vale su coal e basta: su steel #DE7B23 sta a
   3,1:1 e su arancio pieno sparisce del tutto. Stessa storia per il
   grigio --on-dark-2, 3,8:1 su steel e 1,2:1 su arancio. Su questi
   due fondi le micro-etichette passano al colore del testo del
   blocco, calato quel tanto che basta a restare sopra 4,5:1
   (--on-orange a .85 su arancio: 4,8:1; --on-dark a .8 su steel:
   6,0:1). Il numerone e' display type, gli basta 3:1. */
.blk--steel .fase__n,.blk--steel .fase__f dt{color:var(--on-dark);opacity:.8}
.blk--steel .fase__nn{color:var(--on-dark);opacity:.55}
.blk--orange .fase__n,.blk--orange .fase__f dt{color:var(--on-orange);opacity:.85}
.blk--orange .fase__nn{color:var(--on-orange);opacity:.7}
.blk--orange .fase__d{opacity:.92}
.blk--orange .fase__l li::before{background:var(--on-orange)}
.blk--orange .fase__l li,.blk--orange .fase__f{border-color:rgba(35,18,4,.22)}
.blk--orange .fase__f div + div{border-left-color:rgba(35,18,4,.22)}
.blk--orange .svc__rk{opacity:.85}

/* LE FASI IMPILATE — la stessa animazione dei pannelli di GARANZIE
   nella home (.stack/.pan): ogni fase si ferma sotto la testata,
   24px piu' in basso della precedente, e la successiva le sale
   sopra. E' solo position:sticky. Per questo le .fase non hanno
   data-anim="fade": un pannello ancora mezzo trasparente che sale
   sopra quello fermo farebbe leggere un testo sotto l'altro.
   Il filetto da 1px passa dal gap al border-top: il gap sta fuori
   dal pannello, e il pannello fermo di sopra lo coprirebbe.
   Pannello piu' alto dello spazio che resta: fermo sotto la
   testata, il suo fondo finirebbe sotto il successivo senza essere
   mai passato sullo schermo. Allora si ferma quando il FONDO tocca
   il fondo dello schermo — si perde la testa, non il contenuto
   (la stessa regola della Storia, main.js sezione 7). --fase-h la
   scrive main.js («FASI IMPILATE»); senza JS vale 520px, poco sopra
   la fase piu' alta misurata (510px a 1920). Oggi scatta solo
   sugli schermi bassi: a 960x600 le fasi 04 e 05.
   Sotto i 900px e con prefers-reduced-motion restano in colonna,
   ferme, come le .pan. */
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
  .fasi{gap:0}
  .fase{position:sticky;top:min(calc(var(--hdr) + var(--fase-o,0px)),calc(100svh - var(--fase-h,520px)))}
  .fase + .fase{border-top:1px solid var(--line-d)}
  .fase:nth-child(2){--fase-o:24px}
  .fase:nth-child(3){--fase-o:48px}
  .fase:nth-child(4){--fase-o:72px}
  .fase:nth-child(5){--fase-o:96px}
}

/* ---------------------------------------------------------
   TAVOLA DEL PREVENTIVO — cosa e' a corpo, cosa a consumo,
   cosa non c'e' dentro. Una voce per riga, lo stato a destra.
   --------------------------------------------------------- */
.tav{border-top:1px solid var(--line-l)}
.tav li{display:flex;justify-content:space-between;gap:24px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line-l)}
.tav span{font-size:15px;line-height:1.5;max-width:62ch}
.tav b{
  flex:0 0 auto;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.02em;
  text-transform:uppercase;padding:5px 11px;border:1px solid currentColor;
}
.tav .is-corpo{color:var(--orange-ink)}
.tav .is-consumo{color:var(--on-light-2)}
.tav .is-fuori{color:var(--on-light-2);border-style:dashed}

/* ---------------------------------------------------------
   CONDIZIONI — quattro celle, e in fondo cosa succede se manca
   --------------------------------------------------------- */
.cond{display:flex;flex-direction:column;padding:clamp(28px,3.2vw,48px) var(--pad)}
.cond__k{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--orange);margin-bottom:24px}
.cond__t{
  font-size:clamp(19px,2vw,26px);line-height:1.06;letter-spacing:-.035em;
  text-transform:uppercase;font-variation-settings:'wdth' 106,'wght' 700;margin-bottom:14px;
}
.cond__d{font-size:14px;line-height:1.6;opacity:.8;margin-bottom:24px}
.cond__x{
  margin-top:auto;padding-top:18px;border-top:1px solid currentColor;
  font-family:var(--mono);font-size:11px;line-height:1.6;letter-spacing:.01em;opacity:.72;
}

/* ---------------------------------------------------------
   CASI DI STUDIO, versione lunga
   --------------------------------------------------------- */
.csx{border-top:1px solid var(--line-l)}
.csx__hd{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:clamp(26px,2.8vw,40px) var(--pad) 0}
/* la sigla del caso sta sul fondo della SEZIONE, non di una cella:
   su coal serve --orange (5,9:1), su bone --orange-ink (4,6:1).
   Al contrario si scende a 3,5:1 e 2,5:1. */
.csx__id{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--orange)}
.sec--bone .csx__id{color:var(--orange-ink)}
/* sull'arancio pieno le due etichette risalgono sopra 4,5:1 */
.blk--orange .csx__rk{opacity:.85}
.blk--orange .csx__n span{opacity:.88}
.csx__meta{font-family:var(--mono);font-size:11px;letter-spacing:.02em;opacity:.62;text-align:right}
.csx__t{
  padding:20px var(--pad) clamp(26px,3vw,40px);
  font-size:clamp(26px,3.7vw,54px);line-height:.96;letter-spacing:-.045em;
  text-transform:uppercase;font-variation-settings:'wdth' 110,'wght' 700;max-width:24ch;
}
.csx__b{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:1px;background:var(--line-l)}
.csx__l{padding:clamp(32px,3.6vw,56px) var(--pad)}
.csx__q{display:grid;grid-template-columns:170px minmax(0,1fr);gap:20px;padding:18px 0;border-top:1px solid var(--line-d)}
.csx__q:first-of-type{border-top:none;padding-top:0}
.csx__q dt{font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase;color:var(--orange);padding-top:2px}
.csx__q dd{margin:0;font-size:14.5px;line-height:1.62;max-width:60ch;opacity:.9}
.csx__r{display:flex;flex-direction:column;justify-content:center;padding:clamp(32px,3.6vw,56px) var(--pad)}
.csx__rk{font-family:var(--mono);font-size:11px;letter-spacing:.03em;text-transform:uppercase;opacity:.72;margin-bottom:22px}
.csx__n li{padding:14px 0;border-top:1px solid currentColor}
.csx__n li:first-child{border-top:none;padding-top:0}
.csx__n b{
  display:block;font-size:clamp(30px,3.4vw,48px);line-height:.9;letter-spacing:-.055em;
  font-variation-settings:'wdth' 108,'wght' 800;font-variant-numeric:tabular-nums;margin-bottom:8px;
}
.csx__n span{display:block;font-family:var(--mono);font-size:11px;line-height:1.5;letter-spacing:.01em;opacity:.78}
.csx__f{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:20px var(--pad) clamp(30px,3.4vw,48px);font-family:var(--mono);font-size:11px;letter-spacing:.01em;opacity:.64}

/* citazione del cliente: corpo grande, niente corsivo */
.quote{padding:clamp(30px,3.6vw,52px) var(--pad)}
.quote p{
  font-size:clamp(19px,2.3vw,32px);line-height:1.16;letter-spacing:-.035em;
  font-variation-settings:'wdth' 104,'wght' 600;max-width:34ch;margin-bottom:18px;
}
.quote cite{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase;opacity:.72}

/* ---------------------------------------------------------
   TAPPE — la storia in verticale (la home ce l'ha in
   orizzontale, bloccata; qui e' una lettura, non una scena)
   --------------------------------------------------------- */
.tap{display:grid;gap:1px;background:var(--line-l)}
.tapx{display:grid;grid-template-columns:190px minmax(0,1fr);gap:clamp(20px,3vw,52px);padding:clamp(28px,3.2vw,48px) var(--pad);background:var(--bone)}
.tap__y{
  display:block;font-size:clamp(34px,4vw,58px);line-height:.86;letter-spacing:-.06em;
  font-variation-settings:'wdth' 110,'wght' 800;font-variant-numeric:tabular-nums;color:var(--orange-ink);
}
.tap__t{
  font-size:clamp(19px,2.1vw,28px);line-height:1.06;letter-spacing:-.035em;
  text-transform:uppercase;font-variation-settings:'wdth' 106,'wght' 700;margin-bottom:12px;
}
.tap__d{font-size:14.5px;line-height:1.62;color:var(--on-light-2);max-width:66ch}
.tapx--now{background:var(--orange);color:var(--on-orange)}
.tapx--now .tap__y{color:var(--on-orange)}
.tapx--now .tap__d{color:var(--on-orange);opacity:.88}

/* ---------------------------------------------------------
   MARCHI FERMI — la home ha il nastro che scorre (lo accende
   il montaggio della hero); qui e' una griglia che sta ferma.
   --------------------------------------------------------- */
.loghi{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--line-d)}
.loghi .mark{width:auto;background:var(--coal-2);border-right:none;min-height:104px}
/* la cella che chiude la griglia: non un marchio, una riga di testo */
.mark--nota{
  font-family:var(--mono);font-size:11px;line-height:1.6;letter-spacing:.01em;
  color:var(--on-dark-2);text-align:center;
}

/* ---------------------------------------------------------
   CONTATTI — recapiti e modulo
   --------------------------------------------------------- */
.rec{display:flex;flex-direction:column;padding:clamp(30px,3.4vw,50px) var(--pad)}
.rec__k{font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase;color:var(--orange);margin-bottom:20px}
.rec__v{
  display:block;font-size:clamp(21px,2.2vw,30px);line-height:1.06;letter-spacing:-.04em;
  font-variation-settings:'wdth' 104,'wght' 700;margin-bottom:12px;word-break:break-word;
}
a.rec__v{border-bottom:2px solid var(--orange);width:fit-content;transition:color .3s var(--ease)}
a.rec__v:hover{color:var(--orange)}
a.rec__v:focus-visible{outline:3px solid var(--orange);outline-offset:4px}
.blk--orange a.rec__v{border-bottom-color:var(--on-orange)}
.blk--orange a.rec__v:hover{color:var(--on-orange);opacity:.82}
.blk--bone a.rec__v:hover{color:var(--orange-ink)}
.rec__d{font-size:14px;line-height:1.6;opacity:.78;margin-top:auto;padding-top:18px}
/* stessa regola delle celle fase: l'arancio come testo vive su coal.
   Su arancio pieno e su steel l'etichetta passa al colore del blocco. */
.blk--orange .rec__k{color:var(--on-orange);opacity:.85}
.blk--orange .rec__d{opacity:.9}
.blk--steel .rec__k{color:var(--on-dark);opacity:.8}
.blk--bone .rec__k{color:var(--orange-ink)}

/* ---------------------------------------------------------
   MAPPA DELLA SEDE — Google Maps JS API con il Map ID dello
   stile su misura. Riquadro contiguo come tutto il resto,
   senza filtri sopra: le scritte della mappa devono restare
   leggibili. Il ripiego con indirizzo e coordinate resta
   finche' Google non ha risposto — ed e' quello che si vede
   senza rete e senza JavaScript.
   --------------------------------------------------------- */
.contact-map{border-top:1px solid var(--line-d)}
.contact-map-frame{position:relative;height:clamp(300px,44vh,520px);background:var(--coal-2);overflow:hidden}
.contact-map-canvas{position:absolute;inset:0}
.contact-map-fb{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:14px;
  padding:var(--pad);background:var(--coal-2);
}
.contact-map-fb[hidden]{display:none}
.contact-map-fb__k{font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase;color:var(--orange)}
.contact-map-fb__v{
  font-size:clamp(19px,2vw,27px);line-height:1.12;letter-spacing:-.035em;
  font-variation-settings:'wdth' 106,'wght' 700;
}
.contact-map-note{
  display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap;
  padding:15px var(--pad) 17px;border-top:1px solid var(--line-d);
  font-family:var(--mono);font-size:11px;line-height:1.7;letter-spacing:.01em;color:var(--on-dark-2);
}
/* il segnaposto: un quadrato arancio, non la goccia rossa di
   Google. Lo monta main.js come contenuto dell'AdvancedMarker. */
.contact-map-pin{display:flex;flex-direction:column;align-items:center;transform:translateY(-9px)}
.contact-map-pin b{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;white-space:nowrap;
  background:var(--orange);color:var(--on-orange);padding:6px 10px;
}
.contact-map-pin i{display:block;width:2px;height:14px;background:var(--orange)}

/* ---------------------------------------------------------
   MODULO — deve vedersi che e' un modulo
   ---------------------------------------------------------
   Il resto della pagina e' fatto di celle da LEGGERE: etichetta
   mono arancio, testo, filetto da 1px. La prima stesura del
   modulo usava la stessa materia e si confondeva con loro: un
   campo era un'etichetta e una riga lunga quanto lo schermo.

   Le celle restano — i quattro gruppi sono pannelli contigui
   separati da 1px — ma dentro ci sono campi veri:
   - riquadri scavati (coal) con un bordo pieno a 3,1:1 sul
     pannello: la soglia WCAG 1.4.11 per i componenti. A fuoco il
     bordo passa arancio e raddoppia;
   - etichette in Archivo, non in mono: si leggono come domande;
   - "obbligatorio" / "facoltativo" scritto per esteso, niente
     asterisco da decifrare;
   - a sinistra, ferma sullo scorrimento, la colonna dei passi.

   Gli errori non sono in rosso (il marchio non ne ha): bordo a
   tratteggio arancio + frase sotto al campo che dice cosa fare.
   --------------------------------------------------------- */
.mod{
  --f-line:rgba(244,242,238,.38);   /* bordo del campo: 3,1:1 su coal-2, 3,3:1 sul fondo del campo */
  --f-line-2:rgba(244,242,238,.66); /* hover */
  --f-ph:#858482;                   /* segnaposto: 5,2:1 sul fondo del campo */
  display:grid;grid-template-columns:clamp(300px,27vw,440px) minmax(0,1fr);
  gap:1px;background:var(--line-d);
}

/* la colonna dei passi */
.mod__rail{background:var(--coal);padding:clamp(30px,3vw,48px) var(--pad)}
.mod__stk{position:sticky;top:calc(var(--hdr) + 30px)}
.mod__lead{font-size:clamp(16px,1.2vw,18px);line-height:1.55;max-width:34ch}
.mod__lead b{font-weight:inherit;font-variation-settings:'wdth' 100,'wght' 650}

.passi{margin-top:clamp(26px,3.4vh,40px);border-top:1px solid var(--line-d)}
/* numero | titolo, e lo stato sotto al titolo: di fianco lo
   schiacciava e il titolo andava a capo */
.passo{
  position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);
  gap:5px 12px;align-items:baseline;padding:13px 0 14px;border-bottom:1px solid var(--line-d);
}
.passo__s{grid-column:2}
/* il passo in cui si trova: filetto arancio che cresce da
   sinistra sul bordo basso. transform, non width. */
.passo::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--orange);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease);
}
.passo[aria-current="step"]::after{transform:scaleX(1)}
.passo__n{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--on-dark-2);font-variant-numeric:tabular-nums;transition:color .3s var(--ease)}
.passo__t{font-size:15px;line-height:1.3;font-variation-settings:'wdth' 104,'wght' 600;transition:color .3s var(--ease)}
.passo__s{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.01em;color:var(--on-dark-2);
}
.passo__s::before{content:'';width:7px;height:7px;flex:0 0 auto;border:1px solid currentColor;transition:background .25s var(--ease)}
.passo.is-ok .passo__s{color:var(--orange)}
.passo.is-ok .passo__s::before{background:currentColor}
.passo:hover .passo__t,.passo[aria-current="step"] .passo__t,
.passo[aria-current="step"] .passo__n{color:var(--orange)}
.passo:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

.mod__voce{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:clamp(26px,3.4vh,40px)}
.mod__voce span{font-family:var(--mono);font-size:11px;line-height:1.6;letter-spacing:.01em;color:var(--on-dark-2)}
.mod__voce a{
  font-size:clamp(22px,1.9vw,28px);line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  font-variation-settings:'wdth' 106,'wght' 700;
  padding-bottom:3px;border-bottom:1px solid var(--orange);transition:color .3s var(--ease);
}
.mod__voce a:hover{color:var(--orange)}
.mod__voce a:focus-visible{outline:3px solid var(--orange);outline-offset:3px}

/* il modulo. container-type: le griglie interne si regolano
   sulla larghezza del modulo, non dello schermo — che qui
   cambia di 300-440px a seconda che la colonna dei passi ci sia. */
.form{container-type:inline-size;display:grid;gap:1px;align-content:start;min-width:0;background:var(--line-d);color-scheme:dark}

/* il pannello. <fieldset> senza cornice nativa: la <legend> torna
   in flusso con il float — l'unica via che si comporta uguale
   ovunque — e quello che segue la scavalca con clear. Solo la
   <legend>: sui pannelli con un <label> o un <div> in testa il
   float farebbe sparire il margine del blocco sotto (clearance). */
.fset{
  display:block;border:0;margin:0;min-width:0;background:var(--coal-2);
  padding:clamp(26px,2.8vw,42px) var(--pad) clamp(30px,3.2vw,48px);
}
.fset__k{
  width:100%;margin:0;padding:0;
  display:flex;justify-content:space-between;align-items:flex-end;gap:8px 20px;flex-wrap:wrap;
}
legend.fset__k{float:left}
.fset__tt{display:block}
.fset__n{display:block;margin-bottom:10px;font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--on-dark-2);font-variant-numeric:tabular-nums}
.fset__t{
  display:block;font-size:clamp(20px,1.75vw,26px);line-height:1.04;letter-spacing:-.03em;
  text-transform:uppercase;font-variation-settings:'wdth' 106,'wght' 700;
}
.fset__h{clear:both;padding-top:10px;font-size:14px;line-height:1.55;color:var(--on-dark-2);max-width:62ch}
.fset__b{clear:both;margin-top:clamp(20px,2.2vw,28px)}

/* obbligatorio / facoltativo: arancio su coal-2 5,9:1, grigio 7,3:1 */
.f__q{font-family:var(--mono);font-size:11px;line-height:1.4;letter-spacing:.01em;color:var(--on-dark-2);white-space:nowrap}
.f__q--si{color:var(--orange)}

/* la scelta dell'area: un controllo solo, a celle contigue.
   L'indicatore in alto a destra e' tondo di proposito, l'unico
   tondo della pagina: tondo = una scelta sola, quadrato = casella
   (il consenso). E' la convenzione che fa leggere il controllo.
   Sulla cella scelta (arancio pieno) il codice va a --on-orange
   a .85 (4,8:1) e il testo a .9 (5,2:1): la regola di §11.2.
   Senza :has() restano quadrato pieno e cornice, e la scelta si
   vede lo stesso. */
.picks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line-d);border:1px solid var(--f-line)}
.pick{
  position:relative;display:flex;flex-direction:column;gap:8px;min-width:0;cursor:pointer;
  background:var(--coal);padding:18px 20px 20px;
  transition:background .35s var(--ease),color .35s var(--ease);
}
.pick input{position:absolute;top:0;left:0;width:1px;height:1px;margin:0;opacity:0}
.pick__box{position:absolute;inset:0;border:2px solid transparent;pointer-events:none;transition:border-color .25s var(--ease)}
.pick__i{position:absolute;top:17px;right:18px;width:20px;height:20px;border:1px solid var(--f-line);border-radius:50%;transition:border-color .25s var(--ease)}
.pick__i::after{content:'';position:absolute;inset:4px;border-radius:50%;background:currentColor;transform:scale(0);transition:transform .35s var(--ease-2)}
.pick__k{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--orange);padding-right:32px}
.pick__t{
  font-size:clamp(15px,1.15vw,17px);line-height:1.16;letter-spacing:-.02em;
  font-variation-settings:'wdth' 106,'wght' 700;
}
.pick__d{font-size:13px;line-height:1.5;color:var(--on-dark-2);margin-top:auto;padding-top:4px}
.pick:hover{background:var(--coal-3)}
.pick:hover .pick__i{border-color:var(--f-line-2)}
.pick input:checked ~ .pick__i{border-color:currentColor}
.pick input:checked ~ .pick__i::after{transform:scale(1)}
.pick:has(input:checked){background:var(--orange);color:var(--on-orange)}
.pick:has(input:checked) .pick__k{color:var(--on-orange);opacity:.85}
.pick:has(input:checked) .pick__d{color:var(--on-orange);opacity:.9}
.pick input:focus-visible ~ .pick__box{border-color:var(--orange)}
.pick:has(input:checked) input:focus-visible ~ .pick__box{border-color:var(--on-orange)}
/* "Non lo so ancora": riga bassa a tutta larghezza */
.pick--no{grid-column:1/-1;flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:4px 14px;padding:14px 56px 15px 20px}
.pick--no .pick__i{top:50%;margin-top:-10px}
.pick--no .pick__d{margin-top:0;padding-top:0}
@container (min-width:940px){.picks{grid-template-columns:repeat(4,minmax(0,1fr))}}
@container (max-width:500px){.picks{grid-template-columns:1fr}}

/* i campi */
.fgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(20px,2vw,28px) clamp(16px,1.6vw,24px)}
.f{display:flex;flex-direction:column;min-width:0;grid-column:span 6}
.f--3{grid-column:span 3}
.f--2{grid-column:span 2}
@container (max-width:760px){.f--2{grid-column:span 3}.f--2.f--x{grid-column:span 6}}
@container (max-width:500px){.f--3,.f--2{grid-column:span 6}}

.f__top{display:flex;justify-content:space-between;align-items:baseline;gap:4px 14px;flex-wrap:wrap}
.f__k{font-size:15px;line-height:1.3;font-variation-settings:'wdth' 100,'wght' 600;cursor:pointer}
.f__h{order:3;margin-top:8px;font-size:13px;line-height:1.5;color:var(--on-dark-2)}
.f input:not([type=checkbox]),.f textarea{
  display:block;width:100%;min-height:52px;margin:10px 0 0;
  background:var(--coal);color:var(--on-dark);caret-color:var(--orange);
  border:1px solid var(--f-line);border-radius:0;-webkit-appearance:none;appearance:none;
  padding:13px 15px;font-family:var(--sans);font-size:17px;line-height:1.4;
  font-variation-settings:'wdth' 100,'wght' 500;
  transition:border-color .25s var(--ease);
}
.f textarea{min-height:176px;resize:vertical;scrollbar-color:var(--f-line) transparent}
.fset__b.f textarea{margin-top:0}
.f input:not([type=checkbox]):hover,.f textarea:hover{border-color:var(--f-line-2)}
.f input:not([type=checkbox]):focus,.f textarea:focus{outline:2px solid var(--orange);outline-offset:-2px;border-color:var(--orange)}
.f input::placeholder,.f textarea::placeholder{color:var(--f-ph);opacity:1}
/* l'autocompletamento di Chrome dipinge il campo di azzurro */
.f input:-webkit-autofill{-webkit-text-fill-color:var(--on-dark);-webkit-box-shadow:0 0 0 60px var(--coal) inset;caret-color:var(--orange)}

/* l'errore. Senza JS lo accende :user-invalid (campo toccato e
   lasciato sbagliato); con JS il modulo prende .js-v e decide
   main.js, che scrive anche aria-invalid e aria-describedby. */
.f__e{display:none;order:4;align-items:baseline;gap:9px;margin-top:9px;font-size:13px;line-height:1.45;color:var(--orange)}
.f__e::before{content:'';width:7px;height:7px;flex:0 0 auto;background:currentColor;transform:translateY(-1px)}
.form:not(.js-v) .f:has(:user-invalid) .f__e,.f.is-err .f__e{display:flex}
.form:not(.js-v) .f :user-invalid,.f.is-err input,.f.is-err textarea{border-style:dashed;border-color:var(--orange)}

/* il consenso: casella disegnata, non quella bianca del sistema */
.f--ok{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:start}
.f--ok input[type=checkbox]{
  -webkit-appearance:none;appearance:none;display:grid;place-content:center;
  width:22px;height:22px;margin:1px 0 0;cursor:pointer;
  background:var(--coal);border:1px solid var(--f-line);border-radius:0;
  transition:background .25s var(--ease),border-color .25s var(--ease);
}
.f--ok input[type=checkbox]::before{
  content:'';width:12px;height:12px;background:var(--on-orange);
  clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);
  transform:scale(0);transition:transform .3s var(--ease-2);
}
.f--ok input[type=checkbox]:hover{border-color:var(--f-line-2)}
.f--ok input[type=checkbox]:checked{background:var(--orange);border-color:var(--orange);border-style:solid}
.f--ok input[type=checkbox]:checked::before{transform:scale(1)}
.f--ok input[type=checkbox]:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.f--ok label{font-size:14px;line-height:1.6;max-width:74ch;cursor:pointer}
.f--ok label .f__q{margin-left:6px}
.f--ok .f__e{grid-column:2}

/* bottone e nota, sotto un filetto */
.fend{
  display:flex;flex-wrap:wrap;align-items:center;gap:18px 32px;
  margin-top:clamp(24px,2.6vw,32px);padding-top:clamp(24px,2.6vw,32px);border-top:1px solid var(--line-d);
}
.fend__t{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:8px}
.fend__st{display:flex;align-items:baseline;gap:9px;font-size:14px;line-height:1.45;font-variation-settings:'wdth' 100,'wght' 600}
.fend__st::before{content:'';width:7px;height:7px;flex:0 0 auto;border:1px solid var(--orange);transform:translateY(-1px);transition:background .25s var(--ease)}
.fend__st.is-ok::before{background:var(--orange)}
.fend__st[hidden]{display:none}
.f__n{font-size:13px;line-height:1.55;color:var(--on-dark-2);max-width:60ch}
.f__n a{color:var(--on-dark);border-bottom:1px solid var(--orange);transition:color .3s var(--ease)}
.f__n a:hover{color:var(--orange)}

/* il bottone e' una cella, come le CTA della locandina: dato
   mono sopra, etichetta Archivo sotto, freccia in alto a
   destra. Si muove la freccia, non la cella. */
.fgo{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px 20px;align-items:start;
  text-align:left;min-width:min(100%,300px);border:none;cursor:pointer;
  background:var(--orange);color:var(--on-orange);padding:19px 24px 21px;
  transition:background .35s var(--ease),color .35s var(--ease);
}
.fgo__k{grid-column:1;font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase;opacity:.85}
.fgo__t{
  grid-column:1;font-size:clamp(16px,1.4vw,20px);line-height:1.04;letter-spacing:-.03em;
  text-transform:uppercase;font-variation-settings:'wdth' 106,'wght' 700;
}
.fgo__a{grid-column:2;grid-row:1/span 2;align-self:start;font-size:19px;line-height:1;transition:transform .4s var(--ease)}
.fgo:hover{background:var(--on-orange);color:var(--orange)}
.fgo:hover .fgo__a{transform:translate(4px,-4px)}
.fgo:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
@container (max-width:500px){.fgo{width:100%}}

/* l'esito, dopo l'invio: riquadro con cornice arancio intera */
.fesito{display:grid;gap:10px;margin-top:20px;padding:18px 20px 20px;background:var(--coal);border:1px solid var(--orange)}
.fesito[hidden]{display:none}
.fesito__k{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase;color:var(--orange)}
.fesito__k::before{content:'';width:7px;height:7px;background:currentColor}
.fesito__t{font-size:15px;line-height:1.55;max-width:68ch}
.fesito__a{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.fesito__b{
  font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase;line-height:1.4;
  color:var(--on-dark);background:transparent;border:1px solid var(--f-line);padding:11px 14px;cursor:pointer;
  transition:border-color .25s var(--ease),color .25s var(--ease);
}
.fesito__b:hover{border-color:var(--orange);color:var(--orange)}
.fesito__b:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* ---------------------------------------------------------
   CODA DI PAGINA — la riga di rimando alle altre pagine
   --------------------------------------------------------- */
.altre{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line-d);border-top:1px solid var(--line-d)}
.altra{
  display:flex;flex-direction:column;justify-content:space-between;gap:26px;
  background:var(--coal);padding:clamp(26px,3vw,42px) var(--pad);min-height:170px;
  transition:background .45s var(--ease),color .45s var(--ease);
}
.altra:hover,.altra:focus-visible{background:var(--coal-3)}
.altra:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}
.altra__k{font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase;color:var(--on-dark-2)}
.altra__t{
  font-size:clamp(18px,1.7vw,23px);line-height:1.02;letter-spacing:-.035em;
  text-transform:uppercase;font-variation-settings:'wdth' 106,'wght' 700;
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
}
.altra__t i{font-style:normal;transition:transform .45s var(--ease)}
.altra:hover .altra__t{color:var(--orange)}
.altra:hover .altra__t i{transform:translateX(7px)}

/* nota di chiusura, come .cli__note ma su qualsiasi fondo */
.pnote{padding:26px var(--pad) clamp(56px,6vw,90px);font-size:13.5px;line-height:1.62;max-width:92ch;opacity:.74}
.pnote b{opacity:1;font-variation-settings:'wdth' 100,'wght' 600}

/* ---------------------------------------------------------
   RESPONSIVE DELLE PAGINE INTERNE
   --------------------------------------------------------- */
@media (max-width:1180px){
  .phero__in{grid-template-columns:1fr;align-items:start;gap:clamp(26px,4vh,42px)}
  .phero__d{max-width:520px}
  .svc__in{grid-template-columns:1fr}
  .csx__b{grid-template-columns:1fr}
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .altre{grid-template-columns:repeat(2,minmax(0,1fr))}
  .loghi{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* la colonna dei passi va sopra al modulo e perde l'elenco:
     la numerazione resta sui pannelli, lo stato accanto al bottone */
  .mod{grid-template-columns:1fr}
  .mod__stk{position:static;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:22px 48px}
  .mod__lead{max-width:52ch}
  .passi{display:none}
  .mod__voce{margin-top:0}
}
@media (max-width:900px){
  .pintro{grid-template-columns:1fr;gap:16px}
  .pintro__m{text-align:left}
  .grid3,.grid2{grid-template-columns:1fr}
  .fase,.tapx{grid-template-columns:1fr;gap:14px}
  .fase__nn{margin-top:6px}
  .svc__q,.csx__q{grid-template-columns:1fr;gap:6px}
  .tav li{flex-direction:column;gap:10px;align-items:flex-start}
}
@media (max-width:620px){
  .grid4{grid-template-columns:1fr}
  .altre{grid-template-columns:1fr}
  .loghi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fase__f div + div{padding-left:0;border-left:none;border-top:1px solid var(--line-d);margin-top:16px}
  .csx__meta{text-align:left}
}