/* =========================================================
   HOME
   ---------------------------------------------------------
   Hero, nastro dei marchi, numeri in fascia, manifesto, aree,
   storia, clienti, casi, garanzie; la hero 07 «locandina» e la
   comunicazione di Pina. Le tavole animate delle aree stanno in
   competenze.css (le usa anche la pagina Competenze).
   ========================================================= */

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

/* la corsa e' esattamente due passi del motivo (14px): niente giunta */
@keyframes rack{to{transform:translateY(-28px)}}

.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)}

/* --- nastro marchi clienti: etichetta ferma + marchi che scorrono ---
   Il nastro esiste solo nella variante della hero 07 (.marks--loc,
   la lastra di vetro): fondi, misure, corpi e margini li da' lei.
   Qui resta solo quello che la variante non riscrive. Le celle
   .mark invece servono anche alla griglia dei loghi (.loghi). */
.marks{display:grid;grid-template-columns:auto minmax(0,1fr)}
.marks__k{justify-content:center}
.marks__kk{font-family:var(--mono);letter-spacing:.02em;text-transform:uppercase;color:var(--orange)}
.marks__t{display:block;text-transform:uppercase;font-variation-settings:'wdth' 106,'wght' 700}
.marks__m{font-family:var(--mono);letter-spacing:.01em;color:var(--on-dark-2)}

/* senza JS resta una riga che si scorre a mano; col JS diventa un nastro continuo */
.marks__vp{
    /* 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}

/* ---------------------------------------------------------
   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(56px,min(10vw,9vh),150px) var(--pad);
}
.mani__k{
    font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;
    color:var(--orange);margin-bottom:clamp(24px,min(4vw,5vh),56px);
    display:flex;align-items:center;gap:14px;
}
.mani__k::before{content:'';width:28px;height:8px;background:var(--orange)}
.mani__t{
    font-size:clamp(38px,min(5.6vw,8.6vh),86px);line-height:1.08;letter-spacing:-.04em;
    font-variation-settings:'wdth' 106,'wght' 700;max-width:19ch;
}
.mani__t .w{opacity:.16}
/* main.js pina .mani__in con GSAP al carico: l'altezza naturale della sezione
   in quel momento resta congelata per tutta la corsa dello scrub (position
   fixed). Se il contenuto supera i 100vh la coda resta sotto il bordo del
   pin e non si vede mai durante lo scroll bloccato. Per questo padding,
   margini e corpo del titolo sono in vh (come la hero) e la risposta e'
   la meta' del titolo, non un'annotazione: il corpo segue la larghezza
   ma anche l'altezza dello schermo, cosi' a 1366x768 tutto sta in 100vh.
   Larga quanto il titolo (34em ~ 19ch del titolo), tre righe. */
.mani__a{
    position:relative;
    margin-top:clamp(20px,min(2.6vw,3.6vh),40px);padding-top:clamp(16px,2.4vh,24px);
    border-top:1px solid var(--line-d);
    max-width:34em;
    font-size:clamp(18px,min(1.7vw,3.2vh),30px);line-height:1.38;letter-spacing:-.01em;
    font-variation-settings:'wdth' 100,'wght' 500;
}
.mani__a::before{content:'';position:absolute;top:-2px;left:0;width:56px;height:3px;background:var(--orange)}
.mani__a b{font-variation-settings:'wdth' 106,'wght' 800;color:var(--orange)}

/* ---------------------------------------------------------
   COMPETENZE
   --------------------------------------------------------- */
.areas{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-l)}
/* La cella e' una griglia a due colonne, e la seconda esiste solo
   quando c'e' posto per la tavola (.fig, qui sotto): chi decide e'
   la larghezza della cella, non quella della finestra, per questo
   la cella e' un contenitore. Le righe sono sei e fisse — tavola in
   striscia, codice, titolo, testo, il vuoto che tiene giu' il
   rimando (1fr), il rimando — cosi' i due impianti cambiano solo
   il posto della tavola, e il testo resta dov'e'.
   --fg-*: i colori della tavola. Seguono la carta su cui sta:
   chiari sul bone, scuri sul coal. La cella della home e' bone e
   passa al coal al passaggio del mouse, e le transizioni di fondo
   e bordo la seguono; le schede di Competenze (.svc__l) sono bone
   o coal e restano cosi'. Barre e segni sono currentColor, e
   seguono il colore del testo. */
.area{--fg-bg:var(--bone-2);--fg-card:var(--bone);--fg-line:var(--line-l);--fg-mute:rgba(20,20,22,.42)}
.area:hover{--fg-bg:var(--coal);--fg-card:var(--coal-3);--fg-line:var(--line-d);--fg-mute:rgba(244,242,238,.42)}
.area{
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:auto auto auto auto 1fr auto;
    container-type:inline-size;
    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}
/* Il codice e' testo arancio, e sul --bone del blocco --orange sta
   a 2,5:1: qui --orange-ink (4,60:1). Torna --orange solo quando la
   cella passa al coal (5,9:1). */
.area__n{
    grid-area:2/1/3/2;
    font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--orange-ink);margin-bottom:30px;
    transition:color .5s var(--ease);
}
.area:hover .area__n{color:var(--orange)}
.area__t{
    grid-area:3/1/4/2;
    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{grid-area:4/1/5/2;font-size:14.5px;line-height:1.62;opacity:.72;max-width:52ch;margin-bottom:30px}
.area__go{
    grid-area:6/1/7/2;justify-self:start;
    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;scroll-snap-type:x proximity}
.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;scroll-snap-align:start;
}
.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}

/* ---------------------------------------------------------
   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(22px,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
   Tre pannelli impilati: ognuno si ferma sotto la testata, 24px
   piu' in basso del precedente, e il successivo gli sale sopra.
   E' solo position:sticky, ed e' il gesto della sezione: niente
   comparsa sul pannello (vedi «LE FASI IMPILATE»).
   Dentro, tre colonne: l'etichetta, l'affermazione col perche'
   (.pan__b) e la prova, tre numeri in tabella (.pan__r). Le due
   colonne di testo si allungano all'altezza del pannello.
   Contrasto (su ogni fondo il suo inchiostro, CLAUDE.md par. 2):
   etichette mono a --on-dark .8 su steel (6,0:1), --on-orange
   .85 sull'arancio (4,8:1), --orange-ink sul bone (4,60:1).
   --------------------------------------------------------- */
.stack{padding:0}
.pan{
    --pan-rule:rgba(244,242,238,.28);
    position:sticky;display:grid;
    grid-template-columns:120px minmax(0,1fr) minmax(0,1fr);
    gap:36px;align-items:stretch;
    padding:clamp(40px,4.4vw,72px) var(--pad) clamp(44px,4.8vw,80px);
    border-top:1px solid var(--line-d);
    min-height:clamp(360px,46vh,470px);
}
.pan.blk--orange{--pan-rule:rgba(35,18,4,.3)}
.pan.blk--bone{--pan-rule:rgba(20,20,22,.2)}
.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;padding-top:10px;opacity:.8}
.pan.blk--orange .pan__n{opacity:.85}
.pan.blk--bone .pan__n{color:var(--orange-ink);opacity:1}

.pan__b,.pan__r{display:flex;flex-direction:column;min-width:0}
.pan__t{
    font-size:clamp(22px,3.4vw,48px);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:56ch;opacity:.82}
.pan.blk--orange .pan__p{opacity:.9}

/* i dettagli: righe mono col marcatore quadrato della fascia */
.pan__x{
    margin-top:auto;padding-top:32px;display:grid;gap:9px;
    font-family:var(--mono);font-size:11px;line-height:1.5;letter-spacing:.02em;
}
.pan__x li{display:flex;align-items:baseline;gap:12px;opacity:.8}
.pan__x li::before{content:'';flex:0 0 auto;width:6px;height:6px;background:var(--orange)}
.pan.blk--orange .pan__x li{opacity:.85}
.pan.blk--orange .pan__x li::before{background:var(--on-orange)}
.pan.blk--bone .pan__x li{opacity:.78}

/* la prova: una tabella a due colonne, ferma in fondo alla
   colonna destra. La colonna dei numeri ha la stessa larghezza
   nei tre pannelli, in em del corpo del numero: 3.2em tiene
   «99,9%», il piu' largo (3,14em misurato). Cosi' le etichette
   stanno sullo stesso filo anche quando un pannello sale sopra
   l'altro. */
.pan__d{margin-top:auto;font-size:clamp(30px,3.6vw,56px);border-top:1px solid var(--pan-rule)}
.pan__d li{
    display:grid;grid-template-columns:3.2em minmax(0,1fr);column-gap:clamp(16px,1.8vw,28px);
    align-items:baseline;padding:clamp(12px,1.2vw,18px) 0;border-bottom:1px solid var(--pan-rule);
}
.pan__d b{
    font-size:1em;line-height:.9;letter-spacing:-.05em;
    font-variation-settings:'wdth' 108,'wght' 800;font-variant-numeric:tabular-nums;
}
.pan__d span{font-family:var(--mono);font-size:11px;line-height:1.5;letter-spacing:.02em;opacity:.8}
.pan.blk--orange .pan__d span{opacity:.85}
.pan.blk--bone .pan__d span{opacity:.78}

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

@media (max-width:1180px){
    .case,.case--rev{grid-template-columns:1fr}
    .case--rev .case__l{order:1}
    .case--rev .case__r{order:2}
}
@media (max-width:900px){
    .areas{grid-template-columns:1fr}
    /* etichetta sopra al nastro, non piu' di fianco */
    .marks{grid-template-columns:1fr}
    /* Sotto i 900px i pannelli restano impilati (position:sticky),
       stessa tecnica delle .fase di Metodo: numero sopra al testo,
       un pannello alla volta fermo sotto la testata, il successivo
       lo scopre salendo da sotto. --pan-h (scritto da main.js,
       sezione «PANNELLI IMPILATI») e' l'altezza vera del pannello:
       serve perche' in colonna singola, su schermo stretto, un
       pannello puo' essere piu' alto dello spazio sotto la testata,
       e allora si ferma quando il FONDO tocca il fondo dello
       schermo, non quando lo tocca la testa (si perde la testa, non
       il contenuto). Senza JS vale 560px, il fallback del CSS.
       prefers-reduced-motion vince comunque piu' sotto in questo file. */
    .pan{
        display:flex;flex-direction:column;gap:0;min-height:0;
        position:sticky;
        top:min(var(--hdr),calc(100svh - var(--pan-h,560px)));
    }
    .pan__b,.pan__r{display:contents}
    .pan__n{padding-top:0;margin-bottom:16px}
    .pan__t{order:1}
    .pan__p{order:2}
    .pan__d{order:3;margin-top:28px}
    .pan__x{order:4;margin-top:0;padding-top:24px}
    .pan:nth-child(2){top:min(calc(var(--hdr) + 24px),calc(100svh - var(--pan-h,560px)))}
    .pan:nth-child(3){top:min(calc(var(--hdr) + 48px),calc(100svh - var(--pan-h,560px)))}
    /* Il manifesto non tiene piu' lo schermo intero.
       Prima lo teneva — occhiello e titolo in alto, i tre punti in
       fondo con margin-top:auto, come un plinto corto — ma su una
       colonna sola la domanda sta in sette righe e sotto restavano
       248px di niente (misurato il 2026-09-14 a 390x844): non si
       legge come respiro, si legge come un pezzo che manca. Qui la
       sezione si misura sul contenuto e i tre punti seguono il testo
       col loro margine. Lo schermo intero resta sopra i 900px, dove
       il titolo e' grande abbastanza da riempirlo.
       La corsa dello scrub che accende le parole non ne soffre:
       va da "top 85%" a "bottom 55%", cioe' altezza della sezione
       piu' un terzo di schermo. */
    .mani__in{min-height:0;justify-content:flex-start;padding-block:clamp(72px,11vh,120px)}
    /* Le celle di COMPETENZE: in colonna sola il min-height di 320px
       non tiene piu' insieme due carte affiancate, tiene solo aperto
       un vuoto fra il testo e "Cosa comprende" (102px, misurato).
       Il margin-top:auto del rimando resta: senza altezza da
       riempire non fa niente. */
    .area{min-height:0}
}
@media (max-width:620px){
    .case__more{flex-direction:column}
    .case__more li + li{padding-left:0;border-left:none;border-top:1px solid currentColor}

    .tlx{width:250px}
}

@media (prefers-reduced-motion:reduce){
    .marks__vp{overflow-x:auto !important}
    .pan{position:static}
    .mani__t .w{opacity:1}
    .mani__in{min-height:0}
}

/* =========================================================
   HERO 07 — contenitore
   ========================================================= */

.hdeck{position:relative}

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

/* ---------------------------------------------------------
   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
   img/hero/hero-home.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%;

    /* SCALA TIPOGRAFICA DELLA HERO — un posto solo, per breakpoint.
       mono: occhiello, etichette, dati, stati. label: "Chi ci ha scelto".
       val: valori delle certificazioni. go: titolo delle CTA, che sopra
       i 900px segue il titolo (le CTA sono larghe quanto lui). */
    --loc-fs-mono:11px;
    --loc-fs-label:13px;
    --loc-fs-x:10px;
    --loc-fs-val:clamp(15px,1.35vw,20px);
    --loc-fs-go:clamp(13px,calc(var(--loc-h1) * .19),18px);
    --loc-fs-arrow:15px;
}
/* schermi larghi: il mono a 11px su 1920 e' minuto */
@media (min-width:1600px){
    .hero--07{--loc-fs-mono:12px;--loc-fs-label:14px;--loc-fs-x:11px;--loc-fs-arrow:16px}
}
/* sotto i 900px la colonna e' larga quanto la pagina: "PER PROGETTI"
   (la riga piu' lunga, ~8,4 volte il corpo) deve starci in
   100vw - 2*pad. 9,4vw: a 320 sono 30px (253 su 280), a 375 35px,
   a 600 56px. */
@media (max-width:900px){
    .hero--07{
        --loc-h1:clamp(30px,9.4vw,80px);
        --loc-fs-val:16px;
        --loc-fs-go:15px;
    }
}
@media (max-width:560px){
    .hero--07{--loc-fs-go:16px}
}

/* .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;font-size:var(--loc-fs-mono)}
.marks--loc .marks__t{font-size:var(--loc-fs-label);line-height:1.1;letter-spacing:-.01em;margin:0}
.marks--loc .marks__m{grid-column:1/-1;font-size:var(--loc-fs-mono);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:var(--loc-fs-x);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);font-size:var(--loc-fs-mono)}

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

/* --- 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:var(--loc-fs-mono);line-height:1.3;letter-spacing:.01em;text-transform:uppercase;
}
.loc__go-t{
    grid-area:t;
    font-size:var(--loc-fs-go);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:var(--loc-fs-arrow);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}

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

/* 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 i 900 la cella arancio va su
   una riga sua, sotto i 620 le due certificazioni si impilano. Ogni
   soglia dichiara i suoi bordi. */
.loc__c--k{padding-left:var(--pad)}
.loc__cs .loc__c:last-child{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}
}
@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:var(--loc-fs-mono);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:var(--loc-fs-mono);letter-spacing:.01em;color:var(--on-light-2);
}
.loc__c-v{
    grid-column:2/-1;grid-row:2;
    font-size:var(--loc-fs-val);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:var(--loc-fs-mono);letter-spacing:.02em;text-transform:uppercase;
    opacity:.78;
}
.loc__c-kv{
    grid-column:1;
    font-size:var(--loc-fs-val);line-height:1.14;letter-spacing:-.02em;
    font-variation-settings:'wdth' 106,'wght' 700;text-transform:uppercase;
}

/* --- hero 07: responsive --- */
@media (max-width:1180px){

    .loc__l{width:min(68%,860px)}
}
@media (max-width:900px){

    /* LOCANDINA SUL TELEFONO — rif. idea/hero-v7-mobile.jpg.
       In alto marchi e titolo, al centro il soggetto dell'asset scoperto,
       in fondo la CTA principale; le certificazioni stanno SOTTO la piega.
       Testata + nastro dei marchi + colonna valgono esattamente lo
       schermo: la colonna è alta 100svh meno la testata (--hdr) meno il
       nastro (--mk: 22px di logo + 2×12 di padding + 1px di filetto = 47px;
       se cambiano, si cambia anche qui). svh e non vh: sul telefono la
       barra del browser mangia la parte bassa di 100vh e le certificazioni
       comparivano sotto la CTA. Il pavimento di 520px tiene titolo,
       soggetto e CTA anche sugli schermi bassi (lì la piega si sposta). */
    .hero--07{--mk:47px}
    /* stretto: la colonna e' larga quanto la pagina, quindi lo scrim
       orizzontale si spegne e la stessa dissolvenza, girata di 90°, va
       sullo sfondo di .loc__l. Il piano pieno copre solo il blocco del
       titolo (tre righe di --loc-h1 + occhiello + respiro: --a), poi
       sette fermate di uno smootherstep lungo 6·--s; sotto, il soggetto
       è scoperto. In lunghezze e non in percentuali: .loc__l ora è alta
       quanto lo schermo, non quanto il testo. */
    .loc__scrim{display:none}
    .loc__l{
        --a:calc(var(--loc-h1) * 3 + 58px);
        --s:13px;
        width:100%;flex:1 1 auto;
        min-height:max(calc(100vh - var(--hdr) - var(--mk)),520px);
        min-height:max(calc(100svh - var(--hdr) - var(--mk)),520px);
        padding-bottom:12px;
        background:linear-gradient(180deg,
            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)                                calc(var(--a) + var(--s) * 6));
    }
    /* il gruppo prende tutta la colonna e si allunga fino in fondo:
       titolo, poi l'occhiello come sottotitolo (nel riferimento è la
       riga sotto il titolo), poi — a filo del fondo — la CTA */
    .loc__copy{margin:clamp(18px,3vh,34px) 0 0;width:auto;flex:1 1 auto;display:flex;flex-direction:column}
    .h1--loc{order:1}
    .loc__copy .kick{order:2;margin:0 0 clamp(18px,3vh,30px)}
    .loc__cta{order:3;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)}

    /* su mobile la lastra e' solo nastro di loghi (~46px): l'etichetta
       sparisce, il nome resta nell'h2.sr */
    .marks--loc .marks__k{display:none}
    .marks--loc .mark{padding:12px clamp(16px,4vw,24px)}
    .marks--loc .mark img{height:22px}
    /* LA CTA sul telefono — resta solo la principale, a piena larghezza e
       struttura di sempre (dato mono sopra, titolo, freccia), a filo
       del fondo della hero, sopra le certificazioni. La secondaria (i casi)
       è nascosta: i casi restano nella pagina, più sotto. */
    .loc__cta{grid-template-columns:1fr}
    .loc__go--s{display:none}
    /* ...e con il colore di quella tolta: vetro coal, filetto chiaro, dato
       in --on-dark-2, freccia arancio; all'hover (e al tocco) si accende
       d'arancio, come faceva la secondaria. */
    .loc__go--p{
        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--p .loc__go-k{color:var(--on-dark-2)}
    .loc__go--p .loc__go-a{color:var(--orange)}
    .loc__go--p:hover{background:var(--orange);color:var(--on-orange);box-shadow:inset 0 0 0 1px var(--orange)}
    .loc__go--p:hover .loc__go-k,.loc__go--p:hover .loc__go-a{color:inherit}
}

@media (max-width:620px){
    /* il plinto si srotola: le due certificazioni una sotto l'altra,
       poi lo stato passa sotto al nome */
    .loc__cs{flex:1 1 100%;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}
}

/* =========================================================
   ITALA — HOMEPAGE CON LA COMUNICAZIONE DI PINA (pina/)
   ---------------------------------------------------------
   Sta in fondo a home.css. Qui c'e' soltanto
   quello che la nuova comunicazione aggiunge o ritara: il resto
   della pagina usa le classi della home e delle pagine interne
   cosi' come sono (.shd, .areas, .loghi, .pnote, .stats, .mani,
   .tl, .grid2 + .case__*, .pan, .certc, .cta).
   Stesse regole di marca: niente gradienti, niente Inter, i
   quattro colori, l'arancio come testo solo dove il conto torna.
   ========================================================= */

/* ---------------------------------------------------------
   HERO 07 — il titolo di Pina e' piu' lungo
   "Software / gestionale / su misura." aveva la riga piu' larga
   di 10 caratteri; "Un solo contratto." ne ha 18. Con il corpo
   della home la riga andava a capo (rompendo i tre <br>) e
   l'inchiostro finiva sopra il soggetto dell'immagine, dove lo
   scrim non porta piu' il contrasto. Si cala il corpo, non la
   larghezza: --loc-h1 e' anche la base delle etichette delle CTA,
   che restano larghe quanto il titolo.
   --------------------------------------------------------- */
/* Il conto: "UN SOLO CONTRATTO." e' largo ~12,6 volte il corpo; la
   colonna (.loc__l, min(58%,1060px) meno i margini) lascia 938px a
   1920 e ~705 a 1366. 3,75vw sta sotto a ogni larghezza con un
   margine del 3-8%; il tetto in vh tiene la hero nel primo schermo
   sui monitor bassi, come nella home. Sotto i 900px la colonna e'
   larga quanto la pagina e il corpo puo' risalire. */
/* (sotto i 900px il corpo e' in testa al blocco .hero--07, scala tipografica) */

/* ---------------------------------------------------------
   TESI — la tavola
   La frase che tiene insieme le quattro aree, subito dopo la
   fascia arancio. Prima era centrata e piccola (46px al massimo,
   meno delle intestazioni di sezione): l'unico blocco "da landing"
   della pagina. Adesso e' una tavola tecnica:

   - il RIQUADRO da 1px, con le quattro SQUADRETTE arancio agli
     angoli: qualcosa di inquadrato, cioe' di guardato;
   - su ogni lato la LINGUETTA di un'area, con la freccia verso il
     centro: lo stesso sistema, visto da quattro parti. E' la
     linguetta della cornice di Competenze (.sis__a--it): mono 11px
     su coal, che copre il filetto e sembra tagliarlo;
   - il TITOLO a piena forza, come la locandina (wdth 116 / wght
     800), sulla stessa gabbia di .shd: numero di sezione nei primi
     120px, titolo dopo 36px di gap, a filo dei titoli /01-/07;
   - il CARTIGLIO attaccato sotto il riquadro, a destra: celle
     contigue come il plinto, il testo da leggere dentro.

   L'arancio come testo sta solo su coal: titolo (em), codici delle
   linguette e numero di sezione, 5,9:1. I movimenti — inquadratura,
   linguette che si aprono dal filetto, luce che gira sul riquadro —
   sono in pina.js; qui tutto e' gia' nel suo stato finale.
   --------------------------------------------------------- */
.tesi{background:var(--coal);color:var(--on-dark);border-bottom:1px solid var(--line-d)}
/* le spaziature verticali hanno un tetto in vh, come la hero: cosi'
   riquadro e cartiglio entrano interi sotto la testata anche a
   1366x768 e 1920x1080 */
.tesi__in{padding:clamp(64px,min(8.4vw,11vh),136px) var(--pad) clamp(68px,min(8.8vw,11.5vh),140px)}

/* il riquadro. Il filetto e' un'ombra interna, come .sis__fr: non
   occupa spazio, e linguette, squadrette e luce si misurano sul
   bordo del box. --fr-pl e' l'aria a sinistra: la prima colonna
   la sconta, cosi' il titolo cade a --pad + 156px, come .shd__t. */
.tesi__fr{
    --fr-pl:clamp(24px,2.6vw,40px);
    position:relative;
    display:grid;grid-template-columns:calc(120px - var(--fr-pl)) minmax(0,1fr);gap:0 36px;
    padding:clamp(52px,min(6.8vw,9vh),118px) clamp(44px,4.4vw,88px) clamp(56px,min(7.2vw,9.5vh),124px) var(--fr-pl);
    box-shadow:inset 0 0 0 1px var(--line-d);
}
.tesi__n{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--orange);padding-top:9px}

/* Il titolo si misura sulla sua colonna, non sulla finestra: la
   riga piu' lunga, "VISTO DA QUATTRO PARTI.", e' larga 15,2 volte
   il corpo (misurato in Chrome), quindi 6,2cqi la tiene al 94%
   della colonna a ogni larghezza e i quattro <br> reggono sempre.
   Interlinea .9 e non .86 come la locandina: qui c'e' una "È"
   maiuscola, e l'accento toccava la riga sopra. */
.tesi__tw{container-type:inline-size;min-width:0}
.tesi__t{
    font-size:clamp(30px,6.2cqi,72px);line-height:.9;letter-spacing:-.04em;
    text-transform:uppercase;font-variation-settings:'wdth' 116,'wght' 800;
}
.tesi__t em{font-style:normal;color:var(--orange)}
/* mentre le righe salgono (pina.js) la maschera di SplitText e la
   riga tagliano a filo della riga, e l'accento della "È" spariva:
   tutte e due si allungano in alto di quanto serve e lo restituiscono
   col margine, quindi l'impaginato non si muove. A fine salita la
   spezzatura si toglie comunque. */
.tesi__t .sp-line-mask,.tesi__t .sp-line{padding-top:.26em;margin-top:-.26em}

/* le squadrette: due bracci da 2px sull'angolo, dentro il box */
.tesi__q{
    position:absolute;z-index:1;width:clamp(18px,1.9vw,30px);height:clamp(18px,1.9vw,30px);
    border:0 solid var(--orange);pointer-events:none;
}
.tesi__q--nw{top:0;left:0;border-width:2px 0 0 2px}
.tesi__q--ne{top:0;right:0;border-width:2px 2px 0 0}
.tesi__q--se{bottom:0;right:0;border-width:0 2px 2px 0}
.tesi__q--sw{bottom:0;left:0;border-width:0 0 2px 2px}

/* le linguette. Centrate sul filetto del loro lato, come i punti
   cardinali sul bordo di una carta. Sui lati sono ruotate: -90° a
   sinistra (si legge dal basso), +90° a destra (dall'alto). Nel
   verso della linguetta la freccia punta sempre "in giu'", e la
   rotazione la porta verso il centro; sotto e' una freccia in su. */
.tesi__vs{position:absolute;inset:0;z-index:3;pointer-events:none}
.tesi__v{
    position:absolute;display:flex;align-items:center;gap:10px;
    height:26px;padding:0 12px;background:var(--coal);white-space:nowrap;
    font-family:var(--mono);font-size:11px;line-height:1;letter-spacing:.02em;text-transform:uppercase;
    color:var(--on-dark);
    transition:box-shadow .35s var(--ease);
}
.tesi__v b{font-weight:500;color:var(--orange)}
.tesi__va{display:inline-block;color:var(--on-dark-2);transition:transform .5s var(--ease),color .35s var(--ease)}
.tesi__v--n{top:0;left:50%;transform:translate(-50%,-50%)}
.tesi__v--e{top:50%;left:100%;transform:translate(-50%,-50%) rotate(90deg)}
.tesi__v--s{top:100%;left:50%;transform:translate(-50%,-50%)}
.tesi__v--o{top:50%;left:0;transform:translate(-50%,-50%) rotate(-90deg)}
/* la linguetta che la luce sta attraversando: il bordo si accende
   come un nodo dello schema (.sis__a.is-rilievo) e la freccia fa
   un passo verso il centro. La classe la mette pina.js. */
.tesi__v.is-su{box-shadow:inset 0 0 0 1px var(--orange)}
.tesi__v.is-su .tesi__va{color:var(--orange);transform:translateY(3px)}
.tesi__v--s.is-su .tesi__va{transform:translateY(-3px)}

/* la luce: un binario da 5px per lato, centrato sul filetto e
   chiuso ai due capi (overflow), cosi' all'angolo il tratto esce
   da un lato ed entra nel successivo senza dover girare. Dentro,
   un tratto da 1px lungo --luce con la testina da 5px in punta.
   Passa SOTTO le linguette: entra nel nodo ed esce dall'altra
   parte. C'e' solo con .tesi--viva, che la mette pina.js. */
.tesi__luce{position:absolute;inset:0;z-index:2;pointer-events:none;display:none}
.tesi--viva .tesi__luce{display:block}
.tesi__luce > i{position:absolute;overflow:hidden}
.tesi__luce > i:nth-child(1){left:0;right:0;top:-2px;height:5px}
.tesi__luce > i:nth-child(2){top:0;bottom:0;right:-2px;width:5px}
.tesi__luce > i:nth-child(3){left:0;right:0;bottom:-2px;height:5px}
.tesi__luce > i:nth-child(4){top:0;bottom:0;left:-2px;width:5px}
.tesi__luce b{position:absolute;top:0;left:0;background:var(--orange);will-change:transform}
.tesi__luce > i:nth-child(odd) b{top:2px;height:1px;width:var(--luce,96px)}
.tesi__luce > i:nth-child(even) b{left:2px;width:1px;height:var(--luce,96px)}
.tesi__luce b::after{content:'';position:absolute;width:5px;height:5px;background:var(--orange)}
.tesi__luce > i:nth-child(1) b::after{right:-2px;top:-2px}
.tesi__luce > i:nth-child(2) b::after{bottom:-2px;left:-2px}
.tesi__luce > i:nth-child(3) b::after{left:-2px;top:-2px}
.tesi__luce > i:nth-child(4) b::after{top:-2px;left:-2px}

/* il cartiglio. Il filetto alto e' il fondo del riquadro: il
   cartiglio non ne ha uno suo, e il bordo destro cade sul filetto
   destro. Fondo --coal-2 come i blocchi .blk--coal; etichette
   --on-dark-2 (7,3:1), testo in grassetto --on-dark.
   I filetti interni sono BORDI e non il fondo che passa nel gap,
   come in .svc__l2: quando le etichette si stampano (pina.js) ogni
   cella si porta dietro il suo filetto, e dove non e' ancora
   arrivata si vede il coal del cartiglio, non una lastra grigia. */
.tesi__cart{
    width:clamp(320px,31vw,500px);margin-left:auto;
    background:var(--coal-2);border:1px solid var(--line-d);border-top:0;
}
.tesi__ck{display:grid;grid-template-columns:auto minmax(0,1fr);border-bottom:1px solid var(--line-d)}
.tesi__ck span{
    padding:12px clamp(16px,1.4vw,22px);
    font-family:var(--mono);font-size:11px;line-height:1.4;letter-spacing:.02em;text-transform:uppercase;
    color:var(--on-dark-2);
}
.tesi__ck span + span{text-align:right;color:var(--on-dark);border-left:1px solid var(--line-d)}
.tesi__d{
    padding:clamp(18px,1.7vw,26px) clamp(16px,1.4vw,22px) clamp(20px,1.9vw,28px);
    font-size:clamp(15px,1.12vw,17px);line-height:1.56;color:var(--on-dark-2);
}
.tesi__d b{font-variation-settings:'wdth' 100,'wght' 700;color:var(--on-dark)}

/* sotto i 900px la gabbia di .shd diventa una colonna, come le
   intestazioni: numero sopra, titolo sotto. I <br> non reggono piu'
   la riga: il titolo va a capo da solo, bilanciato, con la seconda
   frase sempre su una riga nuova. Il cartiglio si stacca dal
   riquadro quanto basta a lasciare posto alla linguetta di sotto. */
@media (max-width:900px){
    .tesi__fr{grid-template-columns:minmax(0,1fr);gap:18px;padding:clamp(48px,11vw,72px) clamp(30px,7vw,52px) clamp(52px,12vw,76px)}
    .tesi__n{padding-top:0}
    .tesi__t{font-size:clamp(28px,8.8cqi,56px);line-height:.9;text-wrap:balance}
    .tesi__t br{display:none}
    .tesi__t em{display:block}
    .tesi__cart{width:auto;margin-top:36px;border-top:1px solid var(--line-d)}
}
@media (max-width:420px){
    .tesi__ck{grid-template-columns:minmax(0,1fr)}
    .tesi__ck span + span{text-align:left}
}

/* clienti e numeri sono due sezioni coal di seguito: il filetto
   dice dove comincia la seconda, e l'aria sopra il titolo cala di
   quanto gia' ne lascia la nota dei clienti */
.numeri{border-top:1px solid var(--line-d)}
.numeri .shd{padding-top:clamp(48px,6vw,100px)}

/* ---------------------------------------------------------
   LA DOMANDA VERA — versione chiara
   Con la tesi spostata prima di competenze (vedi §11 del
   CLAUDE.md), il manifesto si e' trovato fra CLIENTI e STORIA,
   due sezioni coal: tre lastre scure di fila. Qui, solo su
   pina/, passa al bone-2 della "carta di sezione" — lo stesso
   fondo di .comp/.casi/.cert — cosi' l'alternanza torna: coal
   (clienti) - bone (manifesto) - coal (storia).
   L'arancio resta un problema solo per il TESTO (CLAUDE.md §2):
   .mani__k passa a --orange-ink-2, come .shd__k su .sec--bone
   (4,96:1). La barretta prima dell'etichetta e' un riempimento,
   non testo, e resta --orange. Filetti e testo secondario passano
   dalle varianti "chiare" (--line-l, --on-light-2) invece delle
   scure. */
.mani--bone{
    background:var(--bone-2);color:var(--on-light);
    border-top-color:var(--line-l);border-bottom-color:var(--line-l);
}
.mani--bone .mani__k{color:var(--orange-ink-2)}
.mani--bone .mani__a{border-top-color:var(--line-l)}
.mani--bone .mani__a b{color:var(--orange-ink-2)}