/* =========================================================
   COMPONENTI CONDIVISI
   ---------------------------------------------------------
   Quello che serve a piu' pagine: blocchi, testata e menu,
   bottoni e link, intestazioni di sezione, numeri, celle dei
   marchi, certificazioni, invito finale (.cta), footer; e per le
   pagine interne fondi di sezione, testata di pagina (.phero),
   griglie di celle, recapiti (.rec), marchi fermi (.loghi) e la
   coda di rimando (.altre). L'ordine dei <link> in
   modules/meta_head.inc.php e' quello della cascata: questo file
   viene subito dopo base.css.
   ========================================================= */

/* ---------------------------------------------------------
   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:48px;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}
@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);
}
/* la freccia si sposta in transform: muovere il gap sarebbe
   animare il layout (regola 2 dell'impianto, CLAUDE.md par. 6) */
.lnk::after{content:'\2192';transition:transform .3s var(--ease)}
.lnk:hover{opacity:1;color:var(--orange)}
.lnk:hover::after{transform:translateX(5px)}
.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)}
/* striscia scura indipendente dalla sezione che la ospita (contatti/,
   sezione /01): la sezione sotto resta chiara (.sec--bone, §11.4), solo
   il blocco titolo torna su coal, come /01 di portfolio/. */
.shd--coal{background:var(--coal);color:var(--on-dark)}
.sec--bone .shd--coal .shd__k{color:var(--orange)}
/* speculare a .shd--coal: striscia chiara indipendente dalla sezione scura
   che la ospita (portfolio/, sezione /02). */
.shd--bone{background:var(--bone-2);color:var(--on-light)}
.shd--bone .shd__k{color:var(--orange-ink-2)}
.shd__k{font-family:var(--mono);font-size:11px;color:var(--orange);letter-spacing:.02em;padding-top:8px}
/* i titoli di Pina sono frasi intere ("Da dove si comincia, / non da
   dove si finisce."): a 72px l'ultima parola restava sola sulla riga
   ("FINISCE.", "NDA."). Un gradino sotto, e ogni riga fra i <br>
   bilanciata: se una va a capo, va a capo a meta'. */
.shd__t{
    font-size:clamp(28px,4.1vw,60px);line-height:.94;letter-spacing:-.04em;
    font-variation-settings:'wdth' 112,'wght' 700;text-transform:uppercase;
    text-wrap:balance;
}
.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;
}
/* sul fondo di sezione chiaro (.sec--bone, --bone-2) .5 scende a
   3,23:1, sotto soglia AA: a .62 torna a passare. */
.sec--bone .shd__m{opacity:.62}

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

/* --- celle dei marchi: nel nastro della hero 07 (home, .marks--loc)
   e nella griglia ferma dei loghi (.loghi, home e azienda) --- */
.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}

/* ---------------------------------------------------------
   NUMERI
   --------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-d)}
/* variante a 6 card (pagina azienda/team): sopra i 1180px 3 colonne,
   sotto ricade sulle stesse regole responsive di .stats (2 poi 1). */
.stats--6{grid-template-columns:repeat(3,1fr)}
/* Sopra i 1180px le 6 card stanno su 3 colonne x 2 righe: con i colori
   in ordine (coal/steel/orange/coal/steel/orange) ogni colonna ripete
   lo stesso fondo nelle due righe (tre torri piene, effetto pesante).
   Qui la seconda riga scala di una posizione nel ciclo dei colori,
   cosi' nessuna colonna si ripete. Sotto i 1180px la griglia passa a
   2 poi 1 colonna e l'ordine originale non crea mai due fondi uguali
   in verticale (o in sequenza), quindi non serve altro intervento. */
@media (min-width:1181px){
    .stats--6 .stat:nth-child(4){background:var(--steel);color:var(--on-dark)}
    .stats--6 .stat:nth-child(4) .stat__k,.stats--6 .stat:nth-child(4) .stat__n{opacity:.85}
    .stats--6 .stat:nth-child(5){background:var(--orange);color:var(--on-orange)}
    .stats--6 .stat:nth-child(5) .stat__k,.stats--6 .stat:nth-child(5) .stat__n{opacity:.85}
    .stats--6 .stat:nth-child(6){background:var(--coal-2);color:var(--on-dark)}
    .stats--6 .stat:nth-child(6) .stat__v{color:var(--orange)}
}
.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;
}
.stat__u{font-size:.55em;letter-spacing:0;margin-left:.04em}
.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}
/* CONTRASTO (§11.2): le micro-etichette su arancio, steel e bone vogliono
   opacita' .85. A .55/.58 su queste carte misurano 2,72–4,24:1, sotto AA;
   su coal vanno bene e restano cosi'. Misurato a .85: arancio 4,83:1,
   steel 6,53:1, bone ~10:1. */
.blk--orange .stat__k,.blk--orange .stat__n,
.blk--steel .stat__k,.blk--steel .stat__n,
.blk--bone .stat__k,.blk--bone .stat__n{opacity:.85}

/* ---------------------------------------------------------
   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(20px,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}

/* ---------------------------------------------------------
   INCONTRO
   --------------------------------------------------------- */
.cta{background:var(--orange);color:var(--on-orange);padding:clamp(80px,11vw,170px) var(--pad);border-top:1px solid rgba(35,18,4,.22)}
.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}
/* a .8 sull'arancio pieno e' di un soffio sotto soglia AA, a .85
   passa — stessa opacita' gia' usata per l'arancio pieno altrove. */
.cta .cta__k{opacity:.85}
/* "Richieda / un incontro." con il punto: il punto allarga la seconda
   riga oltre la colonna da 960px e il titolo andava su tre righe.
   "UN INCONTRO." a wdth 118 e' largo ~8,6 volte il corpo, quindi il
   tetto e' 960 / 8,6 = ~110px. */
.cta__t{
    font-size:clamp(44px,7.4vw,106px);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
   Due colonne: il lockup con il pulsante del numero verde, e
   le PAGINE UTILI. I dati societari (sede, P. IVA, REA, PEC)
   non stanno piu' qui.
   --------------------------------------------------------- */
.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:clamp(34px,3.6vw,56px);align-items:start;
    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}
/* il numero verde: un .btn con dentro cornetta, etichetta e numero.
   CONTRO il .btn di serie e' rovesciato: fondo trasparente e solo
   il contorno, perche' il footer viene subito dopo la fascia
   arancio con la CTA piena. All'hover si riempie. */
.ftr__tel{gap:10px;padding-inline:20px;background:transparent;border-color:var(--orange);color:var(--orange)}
.ftr__tel:hover,.ftr__tel:focus-visible{background:var(--orange);color:var(--on-orange)}
.ftr__tel svg{width:15px;height:15px;flex:0 0 auto}
.ftr__tel-k{font-weight:500;color:var(--on-dark-2);transition:color .35s var(--ease)}
.ftr__tel:hover .ftr__tel-k,.ftr__tel:focus-visible .ftr__tel-k{color:var(--on-orange)}
.ftr__tel-v{font-weight:700}
.ftr__tel:focus-visible{outline:3px solid var(--orange);outline-offset:3px}

/* la colonna dei rimandi: filetto a sinistra, righe separate da 1px */
.ftr__col{border-left:1px solid var(--line-d);padding-left:clamp(20px,2.2vw,34px)}
.ftr__ck{
    font-family:var(--mono);font-size:11px;font-weight:500;line-height:1.5;letter-spacing:.02em;
    text-transform:uppercase;color:var(--on-dark-2);
    padding-bottom:12px;border-bottom:1px solid var(--line-d);
}
.ftr__col li{border-bottom:1px solid var(--line-d)}
.ftr__l{
    display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    padding:12px 0;font-size:15px;line-height:1.4;color:var(--on-dark);text-decoration:none;
    transition:color .35s var(--ease);
}
.ftr__l i{font-style:normal;opacity:0;transform:translateX(-7px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.ftr__l:hover,.ftr__l:focus-visible{color:var(--orange)}
.ftr__l:hover i,.ftr__l:focus-visible i{opacity:1;transform:translateX(0)}
.ftr__l:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}

.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)}
.ftr__legal{display:flex;gap:18px;flex-wrap:wrap}
.ftr__legal a{color:var(--on-dark-2);text-decoration:none;border-bottom:1px solid transparent;transition:color .3s var(--ease),border-color .3s var(--ease)}
.ftr__legal a:hover,.ftr__legal a:focus-visible{color:var(--orange);border-color:var(--orange)}
.ftr__legal a:focus-visible{outline:3px solid var(--orange);outline-offset:3px}

/* ---------------------------------------------------------
   RESPONSIVE DEI COMPONENTI
   --------------------------------------------------------- */
/* 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){
    .stats{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
    .shd{grid-template-columns:1fr;gap:16px}
    .shd__m{text-align:left}
    .certs{grid-template-columns:1fr}
    /* footer in colonna sola: il filetto a sinistra dei rimandi non
       separa piu' niente, lo fa lo spazio. */
    .ftr__top{grid-template-columns:1fr;gap:32px}
    .ftr__col{border-left:none;padding-left:0}
}
@media (max-width:620px){
    .stats{grid-template-columns:1fr}
    .ftr__top{gap:28px}
    .ftr__bot{flex-direction:column;gap:6px}
}

/* =========================================================
   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)}

/* L'arancio come TESTO su fondo chiaro va sempre in
   --orange-ink: #DE7B23 su bone sta a 2,5:1, sotto AA (§2).
   E le carte sono due, non una: i BLOCCHI .blk--bone stanno su
   --bone (4,60:1, passa), il FONDO DI SEZIONE .sec--bone sta su
   --bone-2, piu' scuro, dove lo stesso inchiostro scende a
   4,12:1 e non passa. Li' si usa --orange-ink-2 (4,96:1). */
.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 .fase__f dt, .blk--bone .svc__l2 li::before {color:var(--orange-ink)}
.blk--bone .svc__l2 li::before{background:var(--orange-ink)}
.sec--bone .shd__k {color:var(--orange-ink-2)}

/* ---------------------------------------------------------
   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);overflow:hidden}

.phero::before{content:'';position:absolute;inset:0;z-index:0;background-image:url('../img/hero/hero-test-4.webp');background-size:cover;background-position:center 25%}
/* .84 spegneva la foto quasi del tutto. La colonna dati (.phero__d)
   ha adesso un vetro suo che porta lei il contrasto (sotto): qui basta
   tenere leggibili titolo e lead, non tutta l'immagine, quindi si
   riabbassa. Se cambia l'asset, va rimisurato come in §5.5/§5.7. */
.phero::after{content:'';position:absolute;inset:0;z-index:0;background:rgba(15,15,17,.6)}
@media(max-width:900px){
    .phero::before{background-image:url('../img/hero/hero-interne-mobile.webp')}
}

.phero__in{
    position:relative;z-index:1;
    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);
    /* pavimento: 3 righe di titolo + 3 di lead, come contatti/ (il piu'
       corto delle sei). Misurato lì: 575px a 1920x1080, 528px a 1440x900,
       485px a 1366x768 — da cui questo clamp. Sulle pagine con un lead piu'
       lungo (4 righe) il contenuto e' gia' oltre il pavimento e non cambia
       nulla; serve solo a non far scendere le altre sotto quella misura. */
    min-height:clamp(430px,53vh,580px);
}

.phero.no-desc .phero__in{
    min-height:unset;
}

.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}
/* la colonna dei dati: righe con filetto, come .ftr__data — ma qui
   sotto c'e' una foto, non il coal pieno, e sui suoi punti chiari
   (il riflesso dorato in basso a destra di hero-test-4.webp, sotto
   proprio questa colonna) il testo spariva. Stesso vetro della
   lastra dei marchi della hero 07 (.marks--loc, home.css): coal a
   tinta unita + backdrop-filter, NON un gradiente (l'unica deroga
   resta .loc__scrim, CLAUDE.md §2). Cosi' la colonna legge da sola,
   a prescindere da cosa succede nell'immagine sotto di lei.
   Misurato su hero-test-4.webp, punto piu' chiaro dietro il testo:
   contrasto peggiore (span a .72) 8,1:1. Se cambia l'asset, rimisura. */
.phero__d{
    border:1px solid var(--line-d);align-self:end;
    background:rgba(15,15,17,.74);
    -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
    padding:6px clamp(16px,2vw,22px);
}
.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 li:last-child{border-bottom:0}
.phero__d span{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--on-dark);opacity:.72}
.phero__d b{font-family:var(--mono);font-size:11px;font-weight:500;text-align:right;font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------
   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)}
/* cinque celle: tre sulla prima riga, due piu' larghe sulla seconda */
.grid4.grid4--5{grid-template-columns:repeat(6,minmax(0,1fr))}
.grid4--5 > .cell{grid-column:span 2}
.grid4--5 > .cell:nth-child(n+4){grid-column:span 3}

.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 .fase__l{margin:18px 0 2px}
.cell__n{margin-top:auto;padding-top:20px;font-family:var(--mono);font-size:11px;line-height:1.6;letter-spacing:.01em;opacity:.6}

/* ---------------------------------------------------------
   RECAPITI — contatti/, assistenza/, guida-email/
   --------------------------------------------------------- */
.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}

/* ---------------------------------------------------------
   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)}
[data-sec="clienti"]{padding-bottom:clamp(56px,6vw,90px)}
.loghi .mark{width:auto;background:var(--coal-2);border-right:none;min-height:104px}
/* azienda/: la sezione CLIENTI e' .sec--bone — la griglia prende lo
   stesso fondo del titolo invece del coal-2 pensato per le sezioni scure.
   I loghi, trattati per il fondo scuro, vanno a osso nero (non bianco). */
.sec--bone .loghi{background:var(--line-l)}
.sec--bone .loghi .mark{background:var(--bone)}
.sec--bone .loghi .mark:hover{background:var(--bone-2)}
.sec--bone .loghi .mark img{filter:brightness(0);opacity:.62}
.sec--bone .loghi .mark:hover img{opacity:1}

/* ---------------------------------------------------------
   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); border-bottom: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)}

/* ---------------------------------------------------------
   RESPONSIVE DELLE PAGINE INTERNE (componenti)
   --------------------------------------------------------- */
@media (max-width:1180px){
    .phero__in{grid-template-columns:1fr;align-items:start;gap:clamp(26px,4vh,42px)}
    .phero__d{max-width:520px}

    .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
    .grid4.grid4--5{grid-template-columns:repeat(2,minmax(0,1fr))}
    .grid4--5 > .cell,.grid4--5 > .cell:nth-child(n+4){grid-column:auto}
    .grid4--5 > .cell:last-child{grid-column:1 / -1}
    .altre{grid-template-columns:repeat(2,minmax(0,1fr))}
    .loghi{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:900px){
    .grid3,.grid2{grid-template-columns:1fr}
}
@media (max-width:620px){
    .grid4,.grid4.grid4--5{grid-template-columns:1fr}
    .grid4--5 > .cell:last-child{grid-column:auto}
    /* .altra teneva min-height:170px + gap:26px per allineare le celle
       di una riga di 4: in colonna singola non c'e' piu' una riga da
       pareggiare, e restava un vuoto tra l'etichetta e il titolo. */
    .altre{grid-template-columns:1fr}
    .altra{min-height:0;gap:12px}
    .loghi{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* =========================================================
   CONDIVISI CON LA HOME
   ---------------------------------------------------------
   Stavano in home.css ma li usano anche le altre pagine:
   occhiello (.kick) e fascia scorrevole (.band) in tutte le
   testate interne, «chi risponde» (.risp) e la CTA fra i loghi
   (.mgo) e la spia delle certificazioni anche in azienda/.
   home.css ora si carica solo sulla Homepage (vedi
   modules/meta_head.inc.php).
   ========================================================= */
@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}

.hstat__d{width:6px;height:6px;background:var(--orange);flex:0 0 auto;animation:blink 2.6s steps(1,end) infinite}

/* --- 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}

/* 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)}
@media (max-width:1180px){
    .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}
}

/* ---------------------------------------------------------
   CLIENTI — la dodicesima cella e' la CTA
   Chiudeva la griglia una riga di testo ("e altri, che il contratto
   non ci lascia citare"), che la .pnote sotto dice gia' per intero.
   Adesso e' una cella da premere, con la grammatica di .loc__go--p:
   arancio pieno, dato mono sopra, etichetta Archivo sotto, freccia
   in alto a destra; all'hover e al fuoco passa a bone. Niente
   .magnet: la cella non si sposta, si muove la freccia.
   L'etichetta si misura sulla CELLA (cqi), non sulla finestra: la
   cella va da ~160px (4 colonne a 640) a ~320px (6 colonne a 1920),
   e cosi' "IL PROSSIMO" sta su una riga e dato + due righe stanno
   nei 104px della fila senza allungarla (misurato: a 1920 con 20px
   di aria sopra e sotto la fila saliva a 116px). Sotto i 175px di
   cella il dato perde "Modulo ·" invece di andare a capo.
   Contrasto: --on-orange pieno su arancio, 6,0:1 — anche il dato
   mono, che al 78% scenderebbe a 4,3:1 (vedi .loc__go--p).
   L'apertura a diagonale di main.js la prende come le altre celle.
   --------------------------------------------------------- */
.loghi .mark--go{padding:0;align-items:stretch;container-type:inline-size}
.mgo{
    flex:1 1 auto;
    display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"k a" "t t";
    align-content:space-between;column-gap:12px;row-gap:8px;
    padding:clamp(14px,1.1vw,16px) clamp(16px,1.4vw,24px);
    background:var(--orange);color:var(--on-orange);
    transition:background-color .4s var(--ease),color .4s var(--ease);
}
.mgo__k{
    grid-area:k;
    font-family:var(--mono);font-size:11px;line-height:1.3;letter-spacing:.01em;text-transform:uppercase;
}
.mgo__t{
    grid-area:t;
    font-size:clamp(15px,8.6cqi,27px);line-height:.9;letter-spacing:-.015em;
    font-variation-settings:'wdth' 106,'wght' 700;text-transform:uppercase;
}
@container (max-width:175px){ .mgo__kx{display:none} }
.mgo__a{grid-area:a;font-family:var(--mono);font-size:15px;line-height:1;transition:transform .45s var(--ease-2)}
.mgo:hover,.mgo:focus-visible{background:var(--bone);color:var(--on-light)}
.mgo:hover .mgo__a,.mgo:focus-visible .mgo__a{transform:translateX(5px)}
/* l'anello sta DENTRO la cella: e' l'ultima della fila e a destra
   finirebbe fuori pagina. Arancio sul filetto e sul coal accanto. */
.mgo:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}

/* ---------------------------------------------------------
   CERTIFICAZIONI — lo stato "Attiva"
   La spia del plinto della hero (.hstat__d), accanto al valore.
   --------------------------------------------------------- */
.certc__on{display:inline-flex;align-items:center;gap:9px}