/* ============================================================
   NHP · Landing ventennale — ottobre 2026 · V3
   Più audace nella struttura, stessa identità: elementi sovrapposti (grafico edifici e
   save-date che scavalcano il confine di sezione), fondali che invadono la sezione dopo
   (cunei angolati a 23° — lo stesso angolo delle sommità edifici nel manuale, non un numero
   a caso), parallax leggero su grafico hero e foto case study, reveal-on-scroll su card e
   titoli di sezione. Tutto in transform/opacity (mai layout), sempre visibile senza JS,
   disattivato del tutto con prefers-reduced-motion. Niente librerie: vanilla CSS + un
   IntersectionObserver e uno scroll listener rAF-throttled in script.js.
   Area di comunicazione: pubblica (accessibile, chiara, coinvolgente)
   Colore-settore (mappa ratificata in regole.json) portato SOLO da due
   cose: il chip `.tag` sul kicker di sezione, e una TINTA PALLIDA di
   sfondo (mai piena — l'arancione pieno su una sezione intera abbaglia
   e stressa la lettura anche a contrasto tecnicamente corretto). Il
   testo corrente (numeri, bullet, etichette) resta sempre nero: sia
   l'arancione che il verde chiaro falliscono il contrasto AA come colore
   di testo (arancione su bianco 2.82:1, verde chiaro su bianco 1.96:1 —
   nessuno dei due passa 4.5:1), quindi non vengono mai usati per testo
   corrente, solo per chip/sfondo con testo scelto per contrasto.
   H2 non uppercase (solo H1/H3): su frasi lunghe stile editoriale il
   tutto-maiuscolo penalizzava la leggibilità.
   Griglia: 12/8/6 col · m64/64/32 · g24/24/16 · tetto 1920 · scala 8px
   ============================================================ */

@font-face{font-family:"Heading Now 85 Medium";src:url("assets/fonts/heading-now/HeadingNow-85Medium.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Heading Now 83 Book";src:url("assets/fonts/heading-now/HeadingNow-83Book.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Heading Now 82 Light";src:url("assets/fonts/heading-now/HeadingNow-82Light.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans Variable";src:url("assets/fonts/SourceSans3-VariableFont_wght.woff2") format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Source Code Variable";src:url("assets/fonts/SourceCodePro-VariableFont_wght.woff2") format("woff2");font-weight:200 900;font-style:normal;font-display:swap}

:root{
  --dark-green:#2c4f22;
  --light-green:#63d05a;
  --blue:#4169e1;
  --orange:#ff6c2f;
  --grey:#f2f2f2;
  --black:#1d1d1b;
  --white:#ffffff;
  --todo:#ff00ff;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--white);
  color:var(--black);
  font-family:"Source Sans Variable","Source Sans 3","Source Sans Pro",-apple-system,sans-serif;
  font-size:16px;line-height:24px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

/* ===== RUOLI TIPOGRAFICI (mobile <768 / desktop >=768) ===== */
.h1{font-family:"Heading Now 85 Medium","HeadingNow-85Medium","Heading Now",sans-serif;font-weight:700;font-size:32px;line-height:35.2px;letter-spacing:-.01em;text-transform:uppercase}
.h2{font-family:"Heading Now 83 Book","HeadingNow-83Book","Heading Now",sans-serif;font-weight:600;font-size:24px;line-height:27.6px}
.h3{font-family:"Heading Now 82 Light","HeadingNow-82Light","Heading Now",sans-serif;font-weight:400;font-size:20px;line-height:24px;text-transform:uppercase}
.h4{font-family:"Source Code Variable","Source Code Pro",monospace;font-weight:600;font-size:18px;line-height:23.4px}
.p{font-size:16px;line-height:24px}
.note{font-family:"Source Code Variable","Source Code Pro",monospace;font-size:14px;line-height:19.6px;letter-spacing:.01em}
@media (min-width:768px){
  .h1{font-size:50px;line-height:55px}
  .h2{font-size:32px;line-height:36.8px}
  .h3{font-size:25px;line-height:30px}
  .h4{font-size:22px;line-height:28.6px}
  .p{font-size:18px;line-height:27px}
  body{font-size:18px;line-height:27px}
}

/* ===== GRIGLIA ===== */
.container{margin:0 auto;padding-left:32px;padding-right:32px}
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
@media (min-width:768px){
  .container{padding-left:64px;padding-right:64px}
  .grid{grid-template-columns:repeat(8,1fr);gap:24px}
}
@media (min-width:1280px){.grid{grid-template-columns:repeat(12,1fr)}}

/* ===== FILETTI (sottile 1px / marcato 1.5px, inchiostro) ===== */
.filetto{border-top:1px solid var(--black)}
.filetto-marcato{border-top:1.5px solid var(--black)}

/* ===== RITMO VERTICALE ===== */
section{padding-top:48px;padding-bottom:48px}
@media (min-width:768px){section{padding-top:96px;padding-bottom:96px}}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.mt-32{margin-top:32px}.mt-48{margin-top:48px}.mt-64{margin-top:64px}
.testo-max{max-width:60ch}

/* ===== TODO / dato mancante (visibile di proposito, da sostituire) ===== */
.todo{color:var(--todo);font-weight:700}

/* Utility: testo che segue il verde di base, invece di un colore inline fisso */
.note-accent{color:var(--dark-green)}
/* NB accessibilità: l'arancione pieno su bianco è sotto soglia AA per testo corrente
   (2,82:1, vedi nota in cima al file) — usato qui su richiesta esplicita, per una riga
   sola e non per corpo di testo esteso. */
.note-orange{color:var(--orange);font-weight:700}

/* ===== MOTION: reveal-on-scroll =====
   Di default (JS non ancora girato, o niente JS) tutto è già visibile — l'animazione è un
   miglioramento, mai un cancello sulla visibilità. Si attiva solo con .js-motion (aggiunta da
   script.js dopo aver controllato prefers-reduced-motion) + .is-visible (aggiunta da
   IntersectionObserver al primo ingresso in viewport, poi resta così). */
.reveal{opacity:1;transform:none}
.js-motion .reveal{
  opacity:0;transform:translateY(28px);
  transition:opacity 700ms cubic-bezier(.16,.8,.3,1),transform 700ms cubic-bezier(.16,.8,.3,1);
}
.js-motion .reveal.is-visible{opacity:1;transform:none}
/* Stagger leggero tra fratelli (card di una griglia, step di un flow) */
.js-motion .reveal:nth-child(2){transition-delay:80ms}
.js-motion .reveal:nth-child(3){transition-delay:160ms}
.js-motion .reveal:nth-child(4){transition-delay:240ms}

/* ===== MOTION: parallax =====
   [data-parallax] riceve il proprio transform via script.js (rAF-throttled). will-change solo
   qui, non globale, per non appesantire il compositing di tutta la pagina. */
[data-parallax]{will-change:transform}

@media (prefers-reduced-motion: reduce){
  .js-motion .reveal{opacity:1;transform:none;transition:none}
  [data-parallax]{transform:none !important}
  .js-motion .hero .kicker,.js-motion .hero .h1,.js-motion .hero .tagline,
  .js-motion .hero .p,.js-motion .hero .cta{animation:none;opacity:1;transform:none}
}

/* ===== SEZIONI A BORDO DRITTO (V4) =====
   V3 usava cunei/innesti diagonali (.bleed) tra una sezione e la successiva. Rimossi su
   richiesta esplicita: le sezioni finiscono sempre dritte, il dinamismo del sistema passa
   solo dal taglio a 23° sui contenitori (sotto), non più dai confini tra sezioni. */

/* ===== TAGLIO A 23° (doppio: alto-sinistra + basso-destra) =====
   Stessa costante angolare del blocco edifici del manuale, applicata al contenitore invece
   che allo sfondo cittadino. Direzione coerente col pittogramma del sole (in alto a destra
   del logotipo): stesso verso diagonale su marchio e contenitori. Simmetria a 180°: il
   rettangolo diventa un parallelogramma irregolare, dinamico senza ombre/gradienti/colori
   fuori palette. --cut/--cut-v scalano insieme (rapporto tan 23° ≈ 0,42) — non impostarli a
   mano, solo il modificatore --sm cambia. */
.taglio-23{--cut:24px;--cut-v:10px;
  clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut-v)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut-v))}
.taglio-23--sm{--cut:14px;--cut-v:6px}
/* Versione accentuata: per una singola immagine-vetrina per sezione (qui "Come lavoriamo"),
   taglio molto più profondo dei box/pulsanti ma stessa logica/angolo — non un'eccezione,
   solo una scala diversa dello stesso segno. */
.taglio-23--lg{--cut:56px;--cut-v:23px}
@media (min-width:1280px){.taglio-23--lg{--cut:110px;--cut-v:46px}}

/* Box di testo/callout con taglio: per rompere la monotonia di una colonna di testo su fondo
   neutro (una frase-chiave, non un paragrafo lungo — il taglio non deve mai penalizzare la
   leggibilità di un blocco esteso, vedi MANUALE-NORMATIVO §6). */
.box-taglio{background:var(--dark-green);color:var(--white);padding:20px 28px;margin-top:32px}

/* PROVA v5 (quarto giro): H1 a piena fascia era eccessivo, il tentativo accanto alla foto
   a corpo ridotto era debole. Resta la fascia a piena larghezza sotto testo|foto (quello
   non era il problema), ma a scala H2 standard — lo stesso corpo/padding già normato,
   nessun box speciale nuovo. */

/* ===== HEADER ===== */
header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);padding-top:16px;padding-bottom:16px;border-bottom:1px solid rgba(29,29,27,.1)}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.logo{display:block}
.logo img{display:block;height:38px;width:auto}
@media (min-width:768px){.logo img{height:48px}}
nav.sitenav{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
nav.sitenav a{color:var(--black);text-decoration:none;white-space:nowrap}
nav.sitenav a:hover,nav.sitenav a:focus-visible{text-decoration:underline;text-underline-offset:4px}
/* Selettore lingua: link semplice tra due pagine statiche (index.html / en.html), non
   uno switch JS con dizionario — con questo volume di testo un secondo file leggibile
   e traducibile riga per riga è più robusto di un data-i18n su tutta la pagina. */
.lang-switch{border:1.5px solid var(--black);padding:4px 10px;font-family:"Source Code Variable","Source Code Pro",monospace;font-size:12px;text-transform:uppercase}
.lang-switch:hover,.lang-switch:focus-visible{background:var(--black);color:var(--white);text-decoration:none}
.nav-toggle{display:none}
@media (max-width:900px){
  nav.sitenav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--white);flex-direction:column;padding:24px 32px;border-bottom:1px solid rgba(29,29,27,.1);gap:16px}
  nav.sitenav.open{display:flex}
  .nav-toggle{display:block;background:none;border:1.5px solid var(--black);padding:8px 14px;font-family:"Source Code Variable","Source Code Pro",monospace;font-size:14px;cursor:pointer}
}

/* ===== HERO ===== */
.hero{padding-top:64px;padding-bottom:80px;position:relative}
@media (min-width:768px){.hero{padding-top:96px;padding-bottom:120px}}
.hero .kicker{color:var(--dark-green)}
.hero .h1{max-width:18ch;margin-top:24px}
.hero .p{max-width:56ch;margin-top:32px}
.hero .tagline{display:block;margin-top:32px;color:var(--dark-green)}

/* Entrata al carico pagina (non legata allo scroll: sopra la piega non si aspetta lo scroll
   per essere vista, deve animarsi da sola). Nessun cancello di visibilità: se le keyframe non
   partono per qualche motivo, l'elemento resta comunque nel suo stato finale (opacity:1). */
@keyframes hero-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.js-motion .hero .kicker,.js-motion .hero .h1,.js-motion .hero .tagline,
.js-motion .hero .p,.js-motion .hero .cta{animation:hero-in 700ms cubic-bezier(.16,.8,.3,1) both}
.js-motion .hero .h1{animation-delay:80ms}
.js-motion .hero .tagline{animation-delay:160ms}
.js-motion .hero .p{animation-delay:220ms}
.js-motion .hero .cta{animation-delay:300ms}
/* .hero-edifici NON è in questa lista: ha già il proprio transform via parallax (script.js),
   un'animazione con fill forwards su transform lo bloccherebbe permanentemente. */
.cta{display:inline-flex;align-items:center;gap:10px;background:var(--dark-green);color:var(--white);
     text-decoration:none;padding:16px 28px;margin-top:40px;transition:background 120ms linear;font-family:"Source Code Variable","Source Code Pro",monospace;font-size:14px}
.cta:hover{background:var(--light-green);color:var(--black)}
.cta:focus-visible{outline:2px solid var(--black);outline-offset:2px}
.cta.ghost{background:none;border:1.5px solid var(--black);color:var(--black)}
.cta.ghost:hover{background:var(--black);color:var(--white)}
/* Varianti colore-settore per le CTA dei modal (stessa mappa dei .tag): la CTA prende il
   colore dell'ambito in cui si apre, non il verde generico dell'hero. */
.cta.cta--tecnologie{background:var(--blue);color:var(--white)}
.cta.cta--tecnologie:hover{background:var(--black);color:var(--white)}
.cta.cta--energia{background:var(--orange);color:var(--black)}
.cta.cta--energia:hover{background:var(--black);color:var(--white)}

/* Elemento grafico edifici (dal manuale, parte 3 — "elementi grafici aggiuntivi"), non
   stirato: dimensione propria, ancorato in basso a destra dell'hero. Scavalca il
   confine con la sezione successiva (bottom negativo): l'edificio "cresce" dentro la
   fascia scura sotto, invece di fermarsi netto al bordo — richiesto esplicitamente,
   gli edifici restano a cavallo tra sezione 1 e 2 anche se il resto del sito non usa
   più cunei diagonali tra le sezioni (quelli sì, rimossi). */
.hero-edifici{position:absolute;right:0;bottom:-24px;height:100px;width:auto;pointer-events:none;z-index:5}
@media (min-width:768px){.hero-edifici{height:140px;bottom:-40px}}
@media (min-width:1280px){.hero-edifici{height:180px;bottom:-56px}}

/* Triangolo arancione dietro gli edifici: riempie l'area vuota a destra dell'hero.
   Angolo retto in basso a destra, ipotenusa a ESATTAMENTE 23° (tan 23° ≈ 0,42447,
   width:height = 1:0,42447) — non una proporzione a occhio come nel primo giro.
   Si scala impostando solo l'altezza per breakpoint: aspect-ratio deriva la
   larghezza mantenendo l'angolo identico, il punto fermo resta l'angolo in basso a
   destra (right:0;bottom:0), mai il centro o l'alto. Solo da tablet in su: sotto i
   768px il paragrafo prende tutta la larghezza e il triangolo ci finirebbe sopra. */
.hero-triangolo{display:none}
@media (min-width:768px){
  .hero-triangolo{display:block;position:absolute;right:0;bottom:0;
    height:230px;aspect-ratio:2.3559/1;
    background:var(--orange);clip-path:polygon(100% 0, 100% 100%, 0 100%);
    pointer-events:none;z-index:2}
}
@media (min-width:1280px){.hero-triangolo{height:340px}}

/* ===== KICKER + TITOLO SEZIONE ===== */
.section-head{margin-bottom:40px;padding-top:16px}
.section-head .kicker{color:var(--dark-green)}
.section-head .h2{margin-top:16px;max-width:26ch}

/* ===== TAG SETTORE (mappa colore-settore ratificata: dark-green Mission /
   light-green Servizi energetici / blue Tecnologie / orange Energia Condivisa).
   Sfondo pieno + testo scelto per contrasto AA, non testo colorato: il verde
   chiaro su bianco non passa 4.5:1, il chip sì. I filetti restano solo neri
   per regola di manuale (elemento:filetto → SOLO d'inchiostro). ===== */
.tag{display:inline-block;padding:4px 10px;font-family:"Source Code Variable","Source Code Pro",monospace;font-size:12px;font-weight:600;text-transform:uppercase}
.tag-servizi{background:var(--light-green);color:var(--black)}
.tag-tecnologie{background:var(--blue);color:var(--white)}
.tag-energia{background:var(--orange);color:var(--black)}

/* PROVA v5 (rivista): il kicker (sezioni senza settore-colore) prende una sottolineatura
   invece del chip a bordo — aderisce solo al testo, non alla larghezza del box/pagina.
   Il colore lo eredita dalle regole .hero .kicker / .section-head .kicker esistenti. */
.kicker{text-decoration:underline;text-underline-offset:4px}

/* ===== TINTE DI SEZIONE (evidenziano l'orientamento colore-settore a colpo d'occhio) =====
   Arancione pieno come sfondo di sezione "spara" troppo forte su grandi superfici e stressa
   la lettura anche con testo nero (contrasto tecnicamente ok, percezione no) — tinta pallida
   come le altre due, coerente. */
#modello,#soluzioni{background:color-mix(in srgb, var(--light-green) 7%, white)}
#tecnologia{background:color-mix(in srgb, var(--blue) 6%, white)}
#energia-condivisa{background:color-mix(in srgb, var(--orange) 8%, white)}

/* ===== ANNUNCIO VENTENNALE (banda accento) ===== */
.annuncio{background:var(--dark-green);color:var(--white);position:relative}
.annuncio .filetto-marcato{border-color:var(--white)}
.annuncio .section-head .kicker{color:var(--light-green)}
.annuncio .p{max-width:64ch}
/* Timeline sintetica (4 tappe, sostituisce il badge "save-date" di V3): box bianchi col
   taglio a 23°, impilati con respiro reale — non un elenco puntato, una sequenza di eventi
   con una forma propria per ciascuno. */
.timeline{display:flex;flex-direction:column;gap:20px}
.timeline-box{background:var(--white);color:var(--black);padding:20px 24px;
  font-family:"Source Code Variable","Source Code Pro",monospace;font-size:14px;line-height:1.5}
.timeline-box .todo{font-weight:700}

/* ===== LAYOUT TESTO/MEDIA ===== */
.col-testo{grid-column:1/-1}
.col-media{grid-column:1/-1;margin-top:32px}
.span-all{grid-column:1/-1}
@media (min-width:1280px){
  .col-testo{grid-column:1/6;margin-top:0}
  .col-media{grid-column:7/13;margin-top:0}
}

/* ===== CARD (modello, soluzioni, tecnologia) =====
   Pannello pieno con taglio a 23° invece di testo a raso sul fondo tinta di sezione: il
   bianco fa risaltare la card sulla tinta pallida, il taglio rompe la griglia rettangolare
   (vedi MANUALE-NORMATIVO §6 "Il taglio a 23°"). Sostituisce il filetto in testa, ridondante
   ora che la card ha un proprio bordo di forma. */
.card{grid-column:1/-1;background:var(--white);padding:28px 24px;transition:transform 150ms ease;
  clip-path:polygon(24px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 24px) 100%, 0 100%, 0 10px)}
@media (min-width:768px){.card{grid-column:span 4}}
.card:hover{transform:translateY(-4px)}
.card .h3{margin-top:8px}
.card .p{margin-top:16px}
.card .note{margin-top:16px;display:block;color:var(--dark-green)}
.num{display:block;margin-bottom:16px;color:var(--black);font-family:"Source Code Variable","Source Code Pro",monospace;font-size:14px}

/* "Il modello" è una sequenza reale (analisi → progettazione → gestione), non 3 card
   generiche — ma V4 sposta l'indicazione "porta al passo successivo" dentro il box
   stesso (in alto a destra, angolo non tagliato) invece che come freccia separata tra
   una card e l'altra: un segno per card invece di un connettore a parte. */
.model-flow{display:flex;flex-direction:column;gap:24px}
@media (min-width:768px){.model-flow{flex-direction:row;align-items:stretch}}
.model-flow .card{flex:1}
.card--modello{background:var(--light-green);position:relative}
/* top uguale al padding-top della card (28px, non 22px) e niente line-height:1: il .num
   sta in flusso normale, la sua riga alta quanto il body (24/27px) lo tiene un po' più in
   basso del solo font-size — la freccia deve avere la stessa riga per allinearsi davvero,
   non solo lo stesso "top", altrimenti resta sfalsata verso l'alto. */
.card-arrow{position:absolute;top:28px;right:22px;font-size:18px}

/* ===== SOLUZIONI (3 card, ora con spazio media in coda) =====
   Le 3 card standard prendono lo stesso pannello+taglio di .card. V4: si allungano in
   basso per accogliere una foto (o, finché non c'è, un segnaposto) — stesso taglio a 23°
   anche sul media interno, non solo sul contenitore. */
.soluzione{grid-column:1/-1;padding-top:24px;transition:transform 150ms ease;display:flex;flex-direction:column}
@media (min-width:768px){.soluzione{grid-column:span 4}}
.soluzione:hover{transform:translateY(-4px)}
.soluzione{background:var(--white);padding:28px 24px 32px;
  clip-path:polygon(24px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 24px) 100%, 0 100%, 0 10px)}
.soluzione .h3{margin-top:16px}
/* margin-bottom fisso qui = distacco minimo garantito prima della foto anche nella card col
   testo più lungo (dove il margin-top:auto della foto, sotto, si riduce a zero perché non
   resta spazio da distribuire). Il margin-top:auto continua a fare il lavoro di allineamento
   nelle card più corte, spingendo la foto verso il basso finché non tocca questo minimo. */
.soluzione .p{margin-top:12px;margin-bottom:24px}
/* margin-top:auto (stesso pattern di .case .body/.stats-row): con le 3 card stirate alla
   stessa altezza dal grid, spinge la foto in fondo così le tre immagini restano allineate
   anche quando i testi sopra hanno lunghezze diverse — altrimenti la foto segue il testo
   e le tre appaiono sfalsate su desktop. */
.soluzione-media{margin-left:-24px;margin-right:-24px;margin-bottom:-32px;margin-top:auto;aspect-ratio:4/3;overflow:hidden}
.soluzione-media img{width:100%;height:100%;object-fit:cover}
.soluzione-placeholder{margin:24px auto 8px;width:56px;height:56px;border-radius:50%}

/* Placeholder generico "dato/asset non ancora arrivato" — stesso magenta di .todo, in
   forma di superficie invece che di testo. */
.todo-bg{background:var(--todo)}

/* Idrogeno verde: non più la 4ª card della griglia (era .soluzione.attivo in V3) — un
   blocco a parte, stessa sezione. Testo in attesa di conferma segnalato in magenta
   (.todo), immagine larga ancora da ricevere (segnaposto pieno, stesso taglio a 23°). */
.idrogeno-verde{padding-top:40px;margin-top:48px}
.idrogeno-media{margin-top:32px;width:100%;aspect-ratio:21/9;overflow:hidden}
.idrogeno-media img{width:100%;height:100%;object-fit:cover;object-position:50% 65%}

/* ===== PROVE (stat + case) ===== */
.stat{grid-column:span 3;padding-top:16px}
@media (max-width:1279px){.stat{grid-column:span 4}}
@media (max-width:767px){.stat{grid-column:span 3}}
/* PROVA v5: qui ripristinata a com'era in v4 su richiesta esplicita — i numeri
   arancioni restano grandi (scala H1 piena), è l'unico punto della prova lasciato
   invariato rispetto alla diagnosi iniziale. */
.stat .h1{display:block;margin-bottom:8px;color:var(--orange)}
/* Carosello: 5 casi, ne bastano 2-3 in vista alla volta — a scorrimento con frecce,
   loop infinito. Scroll nativo (overflow-x + snap), non un motore JS su misura: le
   frecce chiamano scrollBy, il loop è gestito da 3 cloni "cuscinetto" per lato in
   script.js (bastano per coprire il massimo di card visibili insieme, 3 da desktop).
   Controlli SOTTO il track, non ai lati: le card hanno testo di altezza variabile,
   frecce centrate sull'altezza della card intera finivano sopra il paragrafo (specie
   mobile, una card alla volta, molto più alta della viewport visibile). */
.case-carousel{display:flex;flex-direction:column;gap:16px}
.case-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;min-width:0}
.case-track::-webkit-scrollbar{display:none}
@media (min-width:768px){.case-track{gap:24px}}
.case-controls{display:flex;gap:12px;justify-content:flex-end}
/* Con 3 casi o meno (script.js aggiunge la classe) niente frecce né scroll: il track va in
   wrap e i .case (già con flex-basis 100/50/33% ai vari breakpoint) formano righe statiche
   invece di scorrere — nessuna nuova regola di dimensionamento, solo tolto lo scroll. */
.case-carousel.is-static .case-controls{display:none}
.case-carousel.is-static .case-track{overflow-x:visible;scroll-snap-type:none;flex-wrap:wrap}
.case-carousel.is-static .case{flex:0 0 100%;scroll-snap-align:none}
@media (min-width:768px){.case-carousel.is-static .case{flex:0 0 calc(50% - 12px)}}
@media (min-width:1280px){.case-carousel.is-static .case{flex:0 0 calc(33.333% - 16px)}}
.case-arrow{flex:0 0 auto;width:44px;height:44px;border:1.5px solid var(--black);background:var(--white);
  color:var(--black);font-size:22px;line-height:1;cursor:pointer;transition:background 120ms linear,color 120ms linear}
.case-arrow:hover{background:var(--black);color:var(--white)}
.case-arrow:focus-visible{outline:2px solid var(--dark-green);outline-offset:2px}

.case{scroll-snap-align:start;flex:0 0 88%;padding-top:24px;display:flex;flex-direction:column;transition:transform 150ms ease}
@media (min-width:768px){.case{flex:0 0 calc(50% - 12px)}}
@media (min-width:1280px){.case{flex:0 0 calc(33.333% - 16px)}}
.case:hover{transform:translateY(-4px)}
/* Foto in parallax: contenitore fisso (aspect-ratio + overflow:hidden) con l'immagine più alta
   del riquadro, scorre dentro via transform (script.js) — mai il layout che si sposta. */
.case-media{aspect-ratio:5/4;overflow:hidden}
.case-media img{width:100%;height:112%;object-fit:cover;filter:grayscale(15%)}
/* .body è una colonna flex: il testo (lunghezza variabile da caso a caso) scorre in
   alto, stats-row va a margin-top:auto e finisce sempre sul fondo — dato che le card
   di una riga sono già alte uguali (stretch di default in un flex row), i numeri
   restano allineati tra loro invece di seguire la lunghezza del paragrafo sopra. */
.case .body{padding-top:16px;flex:1;display:flex;flex-direction:column}
.case .h3{margin-top:0}
.case .stats-row{display:flex;gap:20px;flex-wrap:wrap;margin-top:auto;padding-top:16px}
.case .stats-row div{display:flex;flex-direction:column}
.case .stats-row .val{font-family:"Heading Now 83 Book","Heading Now",sans-serif;font-size:22px}
.case .stats-row .lbl{font-family:"Source Code Variable","Source Code Pro",monospace;font-size:11px;line-height:1.3;color:var(--black);opacity:.7;max-width:14ch}

/* PROVA v5 (rivista): l'eyebrow della case card prende la stessa sottolineatura del
   kicker, invece di un terzo trattamento (testo nudo colorato) — un solo linguaggio
   per "etichetta sopra un titolo" in tutta la pagina. */
.case .note-accent{text-decoration:underline;text-underline-offset:4px}

/* ===== ENERGIA CONDIVISA (sfondo arancione pieno, testo nero: nero su arancione passa
   6.28:1, il bianco fallirebbe (2.82:1) — niente verde qui, il registro è solo arancione) ===== */
.visione{color:var(--black);position:relative;overflow:hidden}
.visione .p{max-width:60ch}
/* I 2 box (CER Nazionale, Mercato flessibilità): stesso taglio di .card, ma arancioni
   invece che bianchi (coerenti col registro della sezione) e ben distanziati tra loro —
   in V3 erano impilati senza respiro. */
.visione .card{background:var(--orange)}
.visione .card + .card{margin-top:24px}

/* ===== BOTTONE "APPROFONDISCI" (apre modal) ===== */
.approfondisci{display:inline-flex;align-items:center;gap:8px;background:none;border:1.5px solid var(--black);
  color:inherit;padding:14px 22px;margin-top:24px;font-family:"Source Code Variable","Source Code Pro",monospace;
  font-size:14px;cursor:pointer;transition:background 120ms linear,color 120ms linear}
.approfondisci:hover{background:var(--black);color:var(--white)}
.approfondisci:focus-visible{outline:2px solid var(--black);outline-offset:2px}
.approfondisci .plus{font-size:16px;line-height:1}

/* ===== FOOTER =====
   V4: verde scuro pieno, testo bianco (eredita da .col-testo/.col-media), accenti in
   verde chiaro dove prima era dark-green (che sparirebbe su questo fondo). */
footer{padding-top:48px;padding-bottom:48px;background:var(--dark-green);color:var(--white)}
footer a{text-decoration:none}
footer a:hover,footer a:focus-visible{text-decoration:underline;text-underline-offset:4px}
footer .h2{max-width:20ch}
footer .filetto-marcato{border-color:var(--white)}
footer .col-media .note{display:block;margin-bottom:8px;color:var(--light-green)}
footer .note-accent{color:var(--light-green)}
/* Logo in negativo (bianco, stesso file usato per fondi scuri), apre il footer come il
   filetto-marcato apre le altre sezioni: un minimo di brand presence prima del blocco testo. */
.footer-logo{display:block}
.footer-logo img{height:36px;width:auto}
@media (min-width:768px){.footer-logo img{height:48px}}
/* Barra legale in fondo: separata dal blocco contatti da un filetto proprio (non il
   filetto-marcato di apertura, quello resta unico per sezione). Impilata su mobile,
   affiancata da tablet in su. */
.footer-bottom{margin-top:64px;padding-top:24px;border-top:1px solid var(--white);
  display:flex;flex-direction:column;gap:16px}
@media (min-width:768px){.footer-bottom{flex-direction:row;align-items:center;justify-content:space-between;gap:24px}}
/* PROVA v5: dimensione allineata a quella del testo "NHP20 · Lancio del nuovo sito"
   accanto (.note, 14px) — prima ereditava il corpo body (16/18px), risultando più
   grande della riga con cui condivide la stessa fascia. */
.footer-legal{display:flex;gap:20px;flex-wrap:wrap;align-items:center;
  font-family:"Source Code Variable","Source Code Pro",monospace;
  font-size:14px;line-height:19.6px;letter-spacing:.01em}
.footer-legal a,.footer-legal button{text-decoration:none;opacity:.75;transition:opacity 120ms linear}
.footer-legal a:hover,.footer-legal a:focus-visible,
.footer-legal button:hover,.footer-legal button:focus-visible{opacity:1;text-decoration:underline;text-underline-offset:4px}
/* "Preferenze cookie" è un bottone (apre un modal, non naviga): stessa tipografia/colore
   dei link vicini, senza lo stile di default del browser. */
.footer-legal button{background:none;border:none;padding:0;font:inherit;color:inherit;cursor:pointer}

/* ===== PAGINE LEGALI (privacy, cookie policy) =====
   Nav minima (solo link, niente hamburger mobile: 2 voci non giustificano il menu a
   comparsa del resto del sito) + corpo testo a larghezza di lettura, non i 1920px del
   container — un conto è una griglia di card, un altro un lungo testo normativo. */
.legal-nav{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.legal-nav a{color:var(--black);text-decoration:none;white-space:nowrap}
.legal-nav a:hover,.legal-nav a:focus-visible{text-decoration:underline;text-underline-offset:4px}
.legal-body{max-width:800px}
.legal-body ul{margin-top:16px;padding-left:20px}
.legal-body li{margin-top:10px}
.legal-body li:first-child{margin-top:0}

/* ===== COOKIE BANNER =====
   Nessun cookie reale installato dal sito (vedi cookie-policy): informativa non
   bloccante, coerente col fatto che non c'è nulla da negare o autorizzare — un
   acknowledgement ("Ho capito") più un accesso alle preferenze, non un gate di consenso. */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:150;background:var(--dark-green);color:var(--white);
  padding:20px 24px;transform:translateY(100%);transition:transform 300ms cubic-bezier(.16,.8,.3,1)}
.cookie-banner.is-visible{transform:translateY(0)}
.cookie-banner-inner{margin:0 auto;display:flex;flex-direction:column;gap:16px}
@media (min-width:768px){.cookie-banner-inner{flex-direction:row;align-items:center;justify-content:space-between;gap:24px}}
.cookie-banner .p{max-width:70ch}
.cookie-banner a{color:var(--light-green)}
.cookie-banner-actions{display:flex;gap:12px;flex-wrap:wrap;flex:0 0 auto}
/* Su fondo verde scuro il .cta pieno (verde scuro) sparirebbe: qui va invertito. */
.cookie-banner .cta{background:var(--white);color:var(--black)}
.cookie-banner .cta:hover{background:var(--light-green);color:var(--black)}
.cookie-banner .approfondisci{border-color:var(--white);color:var(--white)}
.cookie-banner .approfondisci:hover{background:var(--white);color:var(--black)}
@media (prefers-reduced-motion: reduce){.cookie-banner{transition:none}}

/* ============================================================
   MODAL (approfondimenti: eManager, Energia Condivisa)
   ============================================================ */
.modal-overlay{position:fixed;inset:0;background:rgba(29,29,27,.6);
  align-items:flex-start;justify-content:center;z-index:100;padding:24px 0;overflow-y:auto;
  display:flex;opacity:0;visibility:hidden;transition:opacity 220ms ease,visibility 0s linear 220ms}
.modal-overlay.open{opacity:1;visibility:visible;transition:opacity 220ms ease}
.modal{background:var(--white);max-width:920px;width:calc(100% - 48px);margin:24px auto;position:relative;
  transform:translateY(16px);transition:transform 260ms cubic-bezier(.16,.8,.3,1)}
.modal-overlay.open .modal{transform:translateY(0)}
@media (prefers-reduced-motion: reduce){
  .modal-overlay,.modal-overlay .modal{transition:none}
}
@media (min-width:768px){.modal{width:calc(100% - 128px);margin:48px auto}}
.modal-inner{padding:32px}
@media (min-width:768px){.modal-inner{padding:64px}}
.modal-close{position:sticky;top:16px;float:right;background:var(--black);color:var(--white);border:none;
  width:40px;height:40px;font-size:20px;cursor:pointer;margin:16px 16px 0 0}
.modal-close:hover{background:var(--dark-green)}
.modal-close:focus-visible{outline:2px solid var(--dark-green);outline-offset:2px}
.modal .h2{margin-top:16px;max-width:30ch}
.modal-lead{margin-top:24px;max-width:70ch}
.modal-block{margin-top:48px;padding-top:24px}
.modal-block .h3{display:flex;align-items:baseline;gap:12px}
/* Titolo di apertura di un blocco messo in evidenza rispetto agli altri h3 del modal
   (es. "Mercato della flessibilità" prima del contenuto CER, energia condivisa). */
.h3-strong{font-weight:700}
/* Tag usato come separatore/etichetta di ripresa argomento dentro un modal (es. "CER
   Nazionale NHP" prima che "Come funziona" riprenda quel filone dopo un blocco diverso). */
.modal-block .tag{margin-bottom:12px}
.modal-block .h3 .num{margin:0}
.modal-block ul{list-style:none;margin-top:16px}
.modal-block li{padding-left:20px;position:relative;margin-top:10px}
.modal-block li::before{content:"—";position:absolute;left:0;color:var(--black)}
.modal-diff{margin-top:20px;padding-top:20px}
.modal-diff .h4{color:var(--black)}
.modal-diff .p{margin-top:8px}
body.modal-open{overflow:hidden}

/* ===== DIAGRAMMA FLUSSO eMANAGER (nativo — rielaborazione dell'infografica PDF del
   cliente, non riusata come immagine: stessi 4 passaggi, vocabolario NHP: blocchi
   pieni, filetti neri, nessuna icona/ombra/gradiente). ===== */
.flow{display:flex;flex-direction:column;gap:0;margin-top:32px}
@media (min-width:768px){.flow{flex-direction:row;align-items:stretch}}
.flow-step{border:1px solid var(--black);padding:20px;flex:1}
.flow-step--tecnologia{background:var(--blue);border-color:var(--blue);color:var(--white)}
.flow-step--tecnologia .flow-num{color:rgba(255,255,255,.75)}
.flow-num{display:block;font-family:"Source Code Variable","Source Code Pro",monospace;font-size:12px;color:var(--black);margin-bottom:8px}
.flow-step .note{margin-top:8px;display:block}
.flow-arrow{display:flex;align-items:center;justify-content:center;font-size:20px;padding:6px 0;transform:rotate(90deg)}
@media (min-width:768px){.flow-arrow{padding:0 8px;transform:none}}

/* ===== LIVELLI DI SERVIZIO (Monitoraggio → Monitoraggio attivo → Ottimizzazione,
   dalla stessa infografica: capacità crescenti sullo stesso flusso dati) ===== */
.tiers{margin-top:48px}
.tier{padding:20px 0;border-top:1px solid var(--black)}
.tier:first-child{border-top:1.5px solid var(--black)}
.tier-head{display:flex;align-items:baseline;gap:10px}
.tier .plus{color:var(--black);font-size:16px;line-height:1}
.tier .h4{color:var(--black)}
.tier .p{margin-top:8px}

/* ===== ACCESSIBILITÀ ===== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--dark-green);outline-offset:2px}