/* =============================================================
   Home — correzioni dell'utente sulla home, sezione per sezione
   (21/9/2026). Solo index.html: la home inglese verra' rifatta con le
   pagine EN.

   1 · L'APERTURA
   - il titolo e' un gancio, scelto dall'utente fra quattro proposte:
     "Tu dici cosa deve fare. / Noi la facciamo partire." (una frase per
     riga). La parola chiave resta nel <title> della pagina;
   - il titolo parla con la stessa voce delle pagine nuove (progetti,
     settori, servizi): 790, spaziatura -0.05em, righe strette. Prima era
     780 con spaziatura normale e righe larghe: sembrava un altro font;
   - il blocco sta al centro della hero in altezza (prima il contenitore
     era display:block e il testo partiva in cima);
   - largo: due righe piene invece di tre corte ("sembra schiacciato");
   - il velo: prima troppo leggero (non si leggeva), poi troppo forte
     ("troppo bianca e troppo vuota"). Ora e' leggero e la leggibilita'
     la da' un alone chiaro dietro le lettere, non lo sbiancamento del
     video;
   - l'occhiello "Automazione industriale dal 1996" c'e' (l'utente lo
     vuole): col titolo-gancio non ripete piu' le sue parole;
   - il bottone blu e' "Parla con un tecnico" (vedi index.html).
   ============================================================= */

/* al centro in altezza, su tutte le misure */
.page-home .corp-hero__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-block: clamp(56px, 7vw, 84px);
}

.page-home .corp-hero__copy { max-width: none; }

.page-home .corp-hero h1 {
  max-width: none;
  font-size: clamp(3rem, 5.4vw, 5.1rem);
  font-weight: 790;
  letter-spacing: -0.05em;
  line-height: 1;
  /* l'alone chiaro dietro le lettere: si legge anche sopra le parti
     scure del video senza sbiancarlo tutto */
  text-shadow:
    0 0 28px rgba(248, 250, 252, 0.85),
    0 0 10px rgba(248, 250, 252, 0.7);
}
.page-home .corp-hero .corp-eyebrow {
  text-shadow: 0 0 14px rgba(248, 250, 252, 0.95);
}
/* una frase per riga */
.page-home .corp-hero h1 span {
  display: block;
  text-wrap: balance;
}
@media (min-width: 900px) {
  .page-home .corp-hero h1 span { white-space: nowrap; }
}

/* desktop: il velo copre bene la colonna del testo e lascia libero il
   video sulla destra */
.page-home .corp-hero__overlay {
  background: linear-gradient(90deg,
    rgba(248, 250, 252, 0.82) 0%,
    rgba(248, 250, 252, 0.7) 30%,
    rgba(248, 250, 252, 0.42) 50%,
    rgba(248, 250, 252, 0.1) 66%,
    rgba(248, 250, 252, 0) 78%);
}

/* telefono: il testo sta al centro; un solo gradiente verticale, piu'
   pieno in mezzo (due sovrapposti sommano l'opacita' e il video sparisce) */
@media (max-width: 760px) {
  .page-home .corp-hero__inner { padding-block: 40px; }
  .page-home .corp-hero__overlay {
    background: linear-gradient(180deg,
      rgba(248, 250, 252, 0.3) 0%,
      rgba(248, 250, 252, 0.72) 26%,
      rgba(248, 250, 252, 0.72) 72%,
      rgba(248, 250, 252, 0.28) 100%);
  }
  .page-home .corp-hero h1 { font-size: clamp(2.4rem, 11vw, 3.2rem); }
}

/* la barra clienti subito sotto il video: "troppo vicina alla hero" (22/9).
   Sulle pagine servizio la hero finisce con aria bianca sua; qui il video
   finisce netto, quindi lo spazio lo aggiunge la home. La barra resta il
   componente unico (barra-clienti.css): cambia solo l'aria sopra. */
.page-home .corp-hero + .cl-ticker {
  padding-top: clamp(40px, 4.4vw, 64px);
}

/* =============================================================
   2 · CREDIBILITA' — la macroscheda che contiene i numeri.
   Storia (21/9): tre schede con frasi e una fila di "garanzie" -> tolti i
   sottotitoli -> "troppo sottile" -> fascia senza scheda: "non ci sta,
   mi piaceva la macroscheda contenitiva". Quindi: un riquadro bianco con
   tre celle larghe (etichetta + cifra), la voce delle pagine nuove
   (la quarta, "Nel mondo", tolta su richiesta).
   Su telefono le celle scorrono in orizzontale dentro la scheda (prima
   si impilavano e "occupava un botto di schermo"): solo CSS, scroll-snap.
   22/9: "sotto i numeri mettici dei sottotitoli descrittivi, come era
   prima". Le frasi stavano in una barretta grigia in fondo alla scheda;
   ora sono il sottotitolo di ogni cifra (.hm-cred__desc) e la barretta
   non c'e' piu' (avrebbe detto due volte la stessa cosa).
   ============================================================= */
.hm-cred {
  padding-block: clamp(80px, 10vw, 132px);
}
.hm-cred__head { max-width: none; }
.hm-cred h2 {
  margin: 0.4em 0 0;
  color: #0b1220;
  font-size: clamp(2.3rem, 4.6vw, 4.2rem);
  font-weight: 790;
  letter-spacing: -0.047em;
  line-height: 1.02;
  text-wrap: balance;
}
.hm-cred h2 span {
  display: block;
  color: #7b889c;
}
/* la prima frase su una riga sola (richiesta dell'utente), da tablet in su */
.hm-cred h2 .hm-cred__l1 { color: inherit; }
@media (min-width: 761px) {
  .hm-cred h2 .hm-cred__l1 { white-space: nowrap; }
}

.hm-cred__panel {
  margin-top: clamp(40px, 5vw, 64px);
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 28px;
  background: #ffffff;
  box-shadow:
    0 30px 70px -42px rgba(15, 23, 42, 0.3),
    0 2px 6px rgba(15, 23, 42, 0.03);
}
.hm-cred__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.hm-cred__cell {
  position: relative;
  min-width: 0;
  border-left: 1px solid rgba(15, 23, 42, 0.09);
}
.hm-cred__body {
  padding: clamp(36px, 4.4vw, 60px) clamp(28px, 3.4vw, 44px) clamp(40px, 4.8vw, 60px);
}
/* il sottotitolo della cifra: dice cosa si sta contando */
.hm-cred__desc {
  max-width: 30ch;
  margin: clamp(20px, 2.2vw, 28px) 0 0;
  color: #56627a;
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.45;
  text-wrap: pretty;
}
.hm-cred__cell:first-child { border-left: 0; }
.hm-cred__cell::before {
  content: "";
  position: absolute;
  left: clamp(28px, 3.4vw, 44px);
  top: clamp(36px, 4.4vw, 60px);
  width: 44px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #1e3a8a, #2563eb);
}
.hm-cred__label {
  display: block;
  margin-top: 24px;
  color: #1e3a8a;
  font-size: var(--fs-eyebrow);
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
}
.hm-cred__num {
  display: flex;
  align-items: baseline;
  margin-top: 26px;
  color: #1e3a8a;
  font-size: clamp(3.4rem, 6.8vw, 7.4rem);
  font-weight: 790;
  letter-spacing: -0.05em;
  line-height: 0.9;
  white-space: nowrap;
}
.hm-cred__num small {
  margin-left: 0.5em;
  color: #7b889c;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}
/* il "+" alto quanto "anni" e "settori": a parita' di corpo il segno
   "+" e' piu' piccolo delle lettere, quindi un corpo un po' piu' grande */
.hm-cred__num small.hm-cred__plus {
  margin-left: 0.15em;
  font-size: clamp(1.4rem, 1.8vw, 1.7rem);
  line-height: 1;
}
.hm-cred__grid:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }

/* telefono: le celle scorrono in orizzontale dentro la scheda; la
   successiva si vede a meta', cosi' si capisce che si puo' scorrere */
@media (max-width: 760px) {
  .hm-cred__panel { border-radius: 22px; }
  .hm-cred__grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .hm-cred__grid::-webkit-scrollbar { display: none; }
  .hm-cred__cell {
    flex: 0 0 72%;
    scroll-snap-align: start;
  }
  .hm-cred__body { padding: 32px 24px 34px; }
  .hm-cred__desc { margin-top: 18px; }
  .hm-cred__cell::before { left: 24px; top: 32px; }
  .hm-cred__num { font-size: clamp(3.2rem, 15vw, 4.2rem); }
}

/* =============================================================
   3 · SETTORI — qui solo la testata. Il carosello e' stato riscritto
   da zero la sera del 21/9 (motore nuovo, render nelle schede): stili
   in assets/css/home-settori.css, motore in assets/js/home-settori.js.
   - il titolo era ancora nella voce vecchia (760, -0.04em, piu' piccolo
     del titolo dei numeri subito sopra): ora e' identico a .hm-cred h2;
   - tolto il sottotitolo sotto il titolo (richiesta dell'utente).
   ============================================================= */
.page-home .corp-sectors .corp-section__header--carousel > div:first-child {
  flex: 1 1 auto;
  max-width: none;
}
.page-home .corp-sectors h2 {
  margin: 0.4em 0 0;
  color: #0b1220;
  font-size: clamp(2.3rem, 4.6vw, 4.2rem);
  font-weight: 790;
  letter-spacing: -0.047em;
  line-height: 1.02;
  text-wrap: balance;
}

/* =============================================================
   4 · PROGETTI — rifatta il 21/9 (era la sezione "Esecuzione").
   Cosa non andava: titolo di categoria nella voce vecchia (760) e piu'
   piccolo del titolo della scheda Ulisse; due progetti su tre senza
   foto; una scheda "In arrivo" in home; tre bottoni per due pagine.
   Ora:
   - il titolo e' un gancio che riprende la hero ("Noi la facciamo
     partire."), stessa voce di .hm-cred h2;
   - tre schede BIANCHE con la foto scoperta (sopra ci sono gia' i
     settori con foto + velo scuro: due sezioni uguali di fila no);
     stessa pelle della macroscheda dei numeri;
   - a destra le foto sono in verticale (la torre e' una torre): su
     tablet e telefono <picture> torna alla foto orizzontale;
   - un solo link alla pagina, niente bottoni: il contatto sta nella
     hero e nella chiusura;
   - telefono: le schede scorrono in orizzontale (scroll-snap, solo CSS),
     la successiva si affaccia.
   L'entrata e' sulle <li> (una dopo l'altra), il sollevamento al
   passaggio e' sulla scheda dentro: cosi' l'animazione non blocca
   il transform dell'hover.
   ============================================================= */
.hm-prj {
  padding-block: clamp(80px, 10vw, 132px);
}
.hm-prj__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "head all"
    "grid grid";
  column-gap: 32px;
  align-items: end;
}
.hm-prj__head { grid-area: head; min-width: 0; }
.hm-prj h2 {
  margin: 0.4em 0 0;
  color: #0b1220;
  font-size: clamp(2.3rem, 4.6vw, 4.2rem);
  font-weight: 790;
  letter-spacing: -0.047em;
  line-height: 1.02;
  text-wrap: balance;
}

/* il link alla pagina: a destra del titolo, sulla sua ultima riga */
.hm-prj__all {
  grid-area: all;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-bottom: 0.1rem;
  color: #1d4ed8;
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.hm-prj__all svg,
.hm-prj__go svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.hm-prj__all:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 4px;
  border-radius: 8px;
}

.hm-prj__grid {
  grid-area: grid;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 24px);
  margin: clamp(40px, 5vw, 64px) 0 0;
  padding: 0;
  list-style: none;
}
.hm-prj__item {
  display: flex;
  min-width: 0;
}
.hm-prj__item--lead { grid-row: 1 / span 2; }

.hm-prj__card {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 24px;
  background: #ffffff;
  box-shadow:
    0 30px 70px -42px rgba(15, 23, 42, 0.3),
    0 2px 6px rgba(15, 23, 42, 0.03);
  transition:
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.hm-prj__photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: #dde2e8;
}
.hm-prj__photo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.hm-prj__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.hm-prj__title {
  margin: 0;
  color: #0b1220;
  font-size: clamp(1.25rem, 1.65vw, 1.45rem);
  font-weight: 790;
  letter-spacing: -0.036em;
  line-height: 1.08;
  text-wrap: balance;
}
.hm-prj__title a {
  color: inherit;
  text-decoration: none;
}
/* tutta la scheda porta al progetto */
.hm-prj__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.hm-prj__title a:focus-visible { outline: none; }
.hm-prj__card:has(.hm-prj__title a:focus-visible) {
  outline: 3px solid #2563eb;
  outline-offset: 3px;
}
.hm-prj__desc {
  margin: 10px 0 0;
  color: #56627a;
  font-size: var(--fs-caption);
  line-height: 1.5;
  text-wrap: pretty;
}
.hm-prj__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: auto 0 0;
  padding-top: 20px;
}
/* non e' un secondo link: e' la scheda intera che porta al progetto */
.hm-prj__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #1d4ed8;
  font-size: var(--fs-caption);
  font-weight: 650;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
/* il cliente che si puo' nominare: il logo, grigio come nella barra
   clienti, torna a colori quando si passa sulla scheda */
.hm-prj__client {
  display: block;
  width: auto;
  height: clamp(17px, 1.6vw, 21px);
  opacity: 0.55;
  filter: grayscale(1);
  transition: opacity 0.5s ease, filter 0.5s ease;
}

/* --- la scheda grande (la nave): la foto prende TUTTA la scheda e il
   testo ci sta sopra (22/9, richiesta dell'utente). La foto e' scurita
   con un velo che parte dal basso: il titolo si legge senza spegnere la
   nave. Logo del cliente in bianco. --- */
.hm-prj__item--lead .hm-prj__card {
  flex-direction: column;
  justify-content: flex-end;
  background: #0b1526;
}
.hm-prj__item--lead .hm-prj__photo {
  position: absolute;
  inset: 0;
  flex: none;
  min-height: 0;
}
.hm-prj__item--lead .hm-prj__photo img { object-position: 45% 55%; }
/* il velo: pieno sotto il testo, quasi niente in alto */
.hm-prj__item--lead .hm-prj__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      rgba(4, 12, 26, 0.88) 0%,
      rgba(4, 12, 26, 0.7) 26%,
      rgba(4, 12, 26, 0.34) 52%,
      rgba(4, 12, 26, 0.12) 74%,
      rgba(4, 12, 26, 0.06) 100%);
}
.hm-prj__item--lead .hm-prj__body {
  position: relative;
  z-index: 1;
  padding: clamp(26px, 3vw, 40px) clamp(24px, 2.8vw, 38px) clamp(24px, 2.6vw, 34px);
}
.hm-prj__item--lead .hm-prj__title {
  color: #ffffff;
  font-size: clamp(1.6rem, 2.5vw, 2.15rem);
  letter-spacing: -0.042em;
  line-height: 1.04;
}
.hm-prj__item--lead .hm-prj__desc {
  max-width: 46ch;
  margin-top: 12px;
  color: rgba(238, 244, 255, 0.86);
  font-size: var(--fs-body);
}
.hm-prj__item--lead .hm-prj__go { color: #ffffff; }
.hm-prj__item--lead .hm-prj__foot { padding-top: 22px; }
/* il logo diventa bianco (il file e' scuro su trasparente) */
.hm-prj__item--lead .hm-prj__client {
  opacity: 0.92;
  filter: brightness(0) invert(1);
}
.hm-prj__item--lead .hm-prj__card:has(.hm-prj__title a:focus-visible),
.hm-prj__item--lead .hm-prj__card:focus-within { outline-color: #93c5fd; }

/* --- le due a destra: foto verticale a sinistra, testo di fianco --- */
.hm-prj__item:not(.hm-prj__item--lead) .hm-prj__card {
  flex-direction: row;
  min-height: clamp(240px, 21vw, 272px);
}
.hm-prj__item:not(.hm-prj__item--lead) .hm-prj__photo { flex: 0 0 42%; }
.hm-prj__item:not(.hm-prj__item--lead) .hm-prj__body {
  flex: 1;
  padding: clamp(22px, 2.1vw, 28px) clamp(20px, 2vw, 28px) clamp(20px, 2vw, 26px);
}
.hm-prj__item:nth-child(2) .hm-prj__photo img { object-position: 50% 38%; }
.hm-prj__item:nth-child(3) .hm-prj__photo img { object-position: 50% 42%; }

@media (hover: hover) {
  .hm-prj__card:hover {
    transform: translateY(-4px);
    box-shadow:
      0 40px 80px -40px rgba(15, 23, 42, 0.42),
      0 2px 6px rgba(15, 23, 42, 0.04);
  }
  .hm-prj__card:hover .hm-prj__photo img { transform: scale(1.04); }
  .hm-prj__card:hover .hm-prj__go svg,
  .hm-prj__all:hover svg { transform: translateX(4px); }
  .hm-prj__card:hover .hm-prj__client { opacity: 1; filter: none; }
  .hm-prj__item--lead .hm-prj__card:hover .hm-prj__client { filter: brightness(0) invert(1); }
}

/* --- entrata: le schede una dopo l'altra. L'osservatore guarda la
   lista (una scheda che si affaccia per il 12% su telefono non
   arriverebbe mai alla soglia del 20%), l'animazione sta sulle <li> --- */
@keyframes hmPrjIn {
  from { opacity: 0; transform: translateY(32px); }
  to { opacity: 1; transform: none; }
}
html.reveal-ready .page-home-corporate .hm-prj__grid.reveal,
html.reveal-ready .page-home-corporate .hm-prj__grid.reveal.is-visible {
  opacity: 1;
  animation: none;
}
html.reveal-ready .page-home-corporate .hm-prj__grid > li { opacity: 0; }
html.reveal-ready .page-home-corporate .hm-prj__grid.is-visible > li {
  animation: hmPrjIn var(--rv-dur, 0.9s) var(--rv-ease, cubic-bezier(0.16, 1, 0.3, 1)) both;
}
html.reveal-ready .page-home-corporate .hm-prj__grid.is-visible > li:nth-child(2) { animation-delay: 110ms; }
html.reveal-ready .page-home-corporate .hm-prj__grid.is-visible > li:nth-child(3) { animation-delay: 220ms; }

/* --- tablet: la grande sopra, le due sotto affiancate, foto orizzontali --- */
@media (max-width: 1080px) {
  .hm-prj__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
  }
  .hm-prj__item--lead { grid-row: auto; grid-column: 1 / -1; }
  /* la foto e' assoluta: l'altezza gliela da' la scheda */
  .hm-prj__item--lead .hm-prj__card { min-height: clamp(320px, 38vw, 460px); }
  /* foto ad altezza fissa: e' il testo che si allunga, cosi' il piede
     ("Vai al progetto") sta in fondo in tutte le schede */
  .hm-prj__body { flex: 1; }
  /* la nave no: il testo sta sopra la foto e si stringe in fondo */
  .hm-prj__item--lead .hm-prj__body { flex: 0 0 auto; }
  .hm-prj__item:not(.hm-prj__item--lead) .hm-prj__card {
    flex-direction: column;
    min-height: 0;
  }
  .hm-prj__item:not(.hm-prj__item--lead) .hm-prj__photo {
    flex: none;
    aspect-ratio: 4 / 3;
  }
  .hm-prj__item:nth-child(2) .hm-prj__photo img { object-position: 50% 60%; }
  .hm-prj__item:nth-child(3) .hm-prj__photo img { object-position: 50% 50%; }
}

/* --- telefono: tre schede uguali che scorrono in orizzontale; il link
   alla pagina scende sotto, dove arriva chi le ha scorse --- */
@media (max-width: 760px) {
  .hm-prj__wrap {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "grid"
      "all";
  }
  .hm-prj__grid {
    display: flex;
    gap: 14px;
    /* fuori dal margine della pagina: la scheda dopo arriva al bordo
       dello schermo; lo spazio sotto tiene l'ombra, che l'overflow taglia */
    margin: 32px -16px -34px;
    padding: 6px 0 40px 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .hm-prj__grid::-webkit-scrollbar { display: none; }
  /* il margine di destra dell'ultima scheda (Safari ignora il padding
     finale di un flex che scorre) */
  .hm-prj__grid::after {
    content: "";
    flex: 0 0 2px;
  }
  .hm-prj__item,
  .hm-prj__item--lead {
    flex: 0 0 80%;
    scroll-snap-align: start;
  }
  /* ombra piu' corta: quella lunga verrebbe tagliata dal bordo della lista */
  .hm-prj__card {
    border-radius: 22px;
    box-shadow:
      0 18px 36px -26px rgba(15, 23, 42, 0.3),
      0 2px 6px rgba(15, 23, 42, 0.03);
  }
  .hm-prj__item .hm-prj__photo { aspect-ratio: 4 / 3; }
  /* la nave: la foto resta a tutta scheda, il testo ci sta sopra in fondo */
  .hm-prj__item--lead .hm-prj__photo { aspect-ratio: auto; }
  .hm-prj__item--lead .hm-prj__card { min-height: 0; }
  .hm-prj__item .hm-prj__body,
  .hm-prj__item--lead .hm-prj__body,
  .hm-prj__item:not(.hm-prj__item--lead) .hm-prj__body { padding: 22px 22px 22px; }
  .hm-prj__item .hm-prj__title,
  .hm-prj__item--lead .hm-prj__title {
    font-size: 1.4rem;
    letter-spacing: -0.038em;
    line-height: 1.08;
  }
  .hm-prj__item--lead .hm-prj__desc {
    margin-top: 10px;
    font-size: var(--fs-caption);
  }
  .hm-prj__client { height: 17px; }
  /* sopra lo spazio dell'ombra della lista, che gli passa sotto */
  .hm-prj__all {
    position: relative;
    z-index: 1;
    justify-self: start;
    margin: 22px 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.reveal-ready .page-home-corporate .hm-prj__grid > li {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .hm-prj__card,
  .hm-prj__photo img,
  .hm-prj__client,
  .hm-prj__all svg,
  .hm-prj__go svg { transition: none; }
  .hm-prj__card:hover,
  .hm-prj__card:hover .hm-prj__photo img { transform: none; }
}

/* =============================================================
   6 · IL MODULO (sezione #richiesta-personalizzata) — 22/9.
   Il titolo era l'ultimo della home nella voce vecchia (700, spaziatura
   normale): ora e' identico a .hm-cred h2. La sezione "Contatto tecnico"
   che stava prima (pannello con due bottoni) e' stata tolta su richiesta.
   Il titolo dentro la scheda del modulo e' di moduli.css.
   ============================================================= */
.page-home .corp-custom-request__copy h2 {
  max-width: none;
  color: #0b1220;
  font-size: clamp(2.3rem, 4.6vw, 4.2rem);
  font-weight: 790;
  letter-spacing: -0.047em;
  line-height: 1.02;
  text-wrap: balance;
}