/* =============================================================
   Home · SERVIZI (.hm-svc) — v2 del 22/9/2026, "tessere".

   Storia. La griglia di sei schede (svc-card: tre misure, cinque colori,
   un blocco scuro col render generico, testi da catalogo) e' stata
   analizzata il 21/9. La v1 rifatta la sera stessa (macroscheda con
   l'elenco a sinistra e l'oggetto a destra) non e' piaciuta: "non mi fa
   impazzire", era una UI a schede e solo tre oggetti su cinque si
   muovevano. Richieste: "le animazioni o le metti in tutte o non le
   metti proprio" e "molto piu' stile Apple".

   Ora: le tessere della home di Apple. Ogni servizio e' una tessera
   bianca con il testo GRANDE e CENTRATO in alto (nome, una riga, un
   link) e l'oggetto vero della sua pagina sotto, grande come una foto
   di prodotto. Macchine su misura, l'ammiraglia, apre a tutta
   larghezza con la frase da cui parte ogni commessa; poi quattro
   tessere a meta' e Revamping a tutta larghezza in chiusura (il suo
   oggetto e' largo). Niente occhielli, badge, paragrafi, bottoni,
   colori d'accento: un solo blu per i link.

   Animazione (v4, 22/9 — l'utente: "per lo schema ci sia il foglio che
   si costruisce come nella pagina progettazione elettrica e cosi' per
   tutte le altre con la loro animazione"; a tempo, non legata allo
   scorrimento, un po' piu' rapida delle pagine). Quando la tessera entra
   in vista: il testo sale in dissolvenza (nome, riga, link), poi
   l'oggetto fa il gesto della SUA pagina, una volta sola:
   msm  le tre sottolineature si tracciano e sotto arrivano le letture;
   el   il foglio 32 si disegna (lo stesso svg dell'apertura della pagina,
        inserito inline da home-servizi.js, motore a finestre a tempo);
   qd   il quadro 3D apre le ante (fotogrammi su canvas);
   sw   la schermata HMI si disegna a inchiostro, si accende, si colora
        (stesso svg della sua pagina, inserito inline);
   cl   la lista punti aperti si svuota riga per riga;
   rv   il quadro del 1994 diventa quello del 2026.
   Con "riduci movimento": stati finali subito. Senza script: la classe
   .is-live manca e gli stati iniziali non si applicano (tutto visibile,
   fermo, nello stato finale: schermata accesa, lista vuota, quadro meta'
   1994 e meta' 2026). Gli stati nascosti NON stanno dietro
   html.reveal-ready (la rete di sicurezza la toglie se un qualsiasi
   script fallisce).

   Telefono: l'ammiraglia sta sopra a tutta larghezza; le cinque tessere
   scorrono in orizzontale (scroll-snap, solo CSS) come numeri e
   progetti. Tablet: due colonne.
   ============================================================= */
.hm-svc {
  --hm-svc-ink: #0b1220;
  --hm-svc-gray: #7b889c;
  --hm-svc-copy: #56627a;
  --hm-svc-blue: #1d4ed8;
  --hm-svc-hair: rgba(15, 23, 42, 0.09);
  --hm-svc-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --hm-svc-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  /* l'area dell'oggetto: altezza fissa, cosi' le tessere di una fila
     sono alte uguali e gli oggetti si adattano a lei */
  --hm-svc-objh: clamp(280px, 25vw, 350px);
  --hm-svc-objp: clamp(26px, 2.8vw, 40px);
  --hm-svc-objw: calc(var(--hm-svc-objh) - 2 * var(--hm-svc-objp));
  padding-block: clamp(80px, 10vw, 132px);
}
.hm-svc__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "head all"
    "grid grid";
  column-gap: 32px;
  align-items: end;
}
.hm-svc__head { grid-area: head; min-width: 0; }

/* la voce dei titoli della home (uguale a .hm-cred h2) */
.hm-svc h2 {
  margin: 0.4em 0 0;
  color: var(--hm-svc-ink);
  font-size: clamp(2.3rem, 4.6vw, 4.2rem);
  font-weight: 790;
  letter-spacing: -0.047em;
  line-height: 1.02;
  text-wrap: balance;
}
.hm-svc h2 span {
  display: block;
  color: var(--hm-svc-gray);
}

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

/* =============================================================
   LE TESSERE
   ============================================================= */
.hm-svc__grid {
  grid-area: grid;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.7vw, 22px);
  margin: clamp(40px, 5vw, 64px) 0 0;
  padding: 0;
  list-style: none;
}
.hm-svc__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--hm-svc-hair);
  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-svc__tile--wide { grid-column: 1 / -1; }

/* il testo: in alto, centrato, tre righe al massimo */
.hm-svc__copy {
  padding: clamp(36px, 3.8vw, 56px) clamp(24px, 3vw, 40px) 0;
  text-align: center;
}
.hm-svc__name {
  margin: 0;
  color: var(--hm-svc-ink);
  font-size: clamp(1.7rem, 2.5vw, 2.3rem);
  font-weight: 790;
  letter-spacing: -0.042em;
  line-height: 1.06;
  text-wrap: balance;
}
.hm-svc__tile--wide .hm-svc__name { font-size: clamp(2rem, 3.4vw, 3.1rem); }
.hm-svc__name a {
  color: inherit;
  text-decoration: none;
}
/* tutta la tessera porta al servizio */
.hm-svc__name a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.hm-svc__name a:focus-visible { outline: none; }
.hm-svc__tile:has(.hm-svc__name a:focus-visible) {
  outline: 3px solid #2563eb;
  outline-offset: 3px;
}
.hm-svc__sub {
  margin: 10px auto 0;
  max-width: 30ch;
  color: var(--hm-svc-copy);
  font-size: clamp(1.05rem, 1.35vw, 1.28rem);
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.38;
  text-wrap: balance;
}
.hm-svc__tile--wide .hm-svc__sub { font-size: clamp(1.1rem, 1.5vw, 1.4rem); }
/* non e' un secondo link: e' la tessera intera che porta al servizio */
.hm-svc__go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  color: var(--hm-svc-blue);
  font-size: var(--fs-body);
  font-weight: 650;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* l'oggetto: sotto il testo, in un'area di altezza fissa */
.hm-svc__obj {
  position: relative;
  display: grid;
  flex: 1 1 auto;
  place-items: center;
  height: var(--hm-svc-objh);
  margin-top: auto;
  padding: var(--hm-svc-objp) clamp(28px, 3.4vw, 52px) calc(var(--hm-svc-objp) + 6px);
}
.hm-svc__obj > * {
  grid-area: 1 / 1;
  min-width: 0;
  min-height: 0;
}

/* ---- msm: la frase e' l'oggetto (altezza sua) ---- */
.hm-svc__obj--msm {
  height: auto;
  padding-top: clamp(28px, 3.4vw, 48px);
}
.hm-svc__ask {
  margin: 0;
  max-width: 22em;
  color: var(--hm-svc-ink);
  font-size: clamp(1.55rem, 3vw, 2.75rem);
  font-weight: 640;
  letter-spacing: -0.034em;
  line-height: 1.17;
  text-align: center;
  text-wrap: balance;
}
.hm-svc__bit {
  position: relative;
  white-space: nowrap;
}
.hm-svc__bit::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.07em;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #1e3a8a, #2563eb);
  transform-origin: left center;
}
/* le letture tecniche, una riga sola sotto la frase */
.hm-svc__read {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 0;
  margin: clamp(22px, 2.6vw, 34px) 0 0;
  padding: 0;
  list-style: none;
  color: var(--hm-svc-gray);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.4;
}
.hm-svc__read li { white-space: nowrap; }
.hm-svc__read li + li::before {
  content: "\00b7";
  margin: 0 0.7em;
  color: #b6bfcc;
}
.hm-svc__read b {
  color: var(--hm-svc-copy);
  font-weight: 700;
}

/* ---- el: il foglio 32, carta (largo quanto l'altezza permette).
   Fermo: l'immagine. Col disegno inline (.is-inline): la carta bianca con
   il margine e dentro lo stesso svg della pagina, che si disegna. ---- */
.hm-svc__sheet {
  position: relative;
  display: block;
  width: min(100%, calc(var(--hm-svc-objw) * 1.437));
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 0 26px 50px -30px rgba(15, 23, 42, 0.45);
}
.hm-svc__sheet img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
}
.hm-svc__sheet.is-inline { padding: 1.9%; }
.hm-svc__sheet .hm-svc__svg text {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* ---- qd: il render 3D; il canvas (ante che si aprono) sta sopra la foto ---- */
.hm-svc__qd {
  position: relative;
  height: var(--hm-svc-objw);
  aspect-ratio: 1166 / 1218;
}
.hm-svc__qd img,
.hm-svc__qd canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hm-svc__qd canvas {
  opacity: 0;
  transition: opacity 0.25s ease;
}
.hm-svc__qd.is-film canvas { opacity: 1; }

/* ---- sw: la pagina HMI nella cornice del pannello. Fermo: l'immagine
   in una cornice scura. Col disegno inline (.is-inline) la cornice la
   disegna l'svg stesso (si accende a meta' corsa) e sotto arriva
   l'ombra a terra, come nella sua pagina. ---- */
.hm-svc__hmi {
  position: relative;
  display: block;
  width: min(100%, calc(var(--hm-svc-objw) * 1.66));
  padding: 2%;
  border-radius: 14px;
  background: #1a1e24;
  box-shadow: 0 26px 50px -28px rgba(15, 23, 42, 0.6);
}
.hm-svc__hmi img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.hm-svc__hmi.is-inline {
  width: min(100%, calc(var(--hm-svc-objw) * 1.648));
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.hm-svc__hmi.is-inline::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 1.5%;
  height: 40%;
  border-radius: 40px;
  box-shadow: 0 46px 80px -30px rgba(15, 23, 42, 0.45);
  opacity: var(--hm-sw-shadow, 1);
  pointer-events: none;
}
.hm-svc__hmi .hm-svc__svg { position: relative; z-index: 1; overflow: visible; }
.hm-svc__hmi .hm-svc__svg text { font-family: Arial, Helvetica, "Liberation Sans", sans-serif; }
/* pannello acceso: la linea del gas si accende (nella pagina scorre
   all'infinito; qui no, ridisegnerebbe la schermata per sempre) */
.hm-svc__svg .sw-flow { opacity: 0; transition: opacity 0.8s ease; }
.hm-svc__hmi.is-done .sw-flow { opacity: 0.85; }

/* i due disegni inline: stessa base delle loro pagine; su un livello
   proprio (will-change), cosi' il ridisegno resta dentro il foglio e non
   coinvolge la tessera con l'ombra */
.hm-svc__svg {
  display: block;
  width: 100%;
  height: auto;
  will-change: transform;
}
.hm-svc__qd canvas { will-change: transform; }
.hm-svc__svg [data-draw] { fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* senza script si vede la schermata accesa: l'inchiostro resta nascosto */
.hm-svc__svg .sw-ink { display: none; }

/* ---- cl: la lista punti aperti, lo stesso foglio della sua pagina ---- */
.hm-svc__sat {
  width: min(100%, 500px);
  padding: 4.5% 5% 4%;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 26px 50px -32px rgba(15, 23, 42, 0.5);
  color: var(--hm-svc-ink);
  font-family: var(--hm-svc-mono);
  font-size: clamp(0.62rem, 0.86vw, 0.78rem);
  line-height: 1.2;
}
.hm-svc__sat-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 0.9em;
  border-bottom: 1px solid var(--hm-svc-ink);
}
.hm-svc__sat-id { min-width: 0; }
.hm-svc__sat-id b {
  display: block;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.5em;
  font-weight: 760;
  letter-spacing: -0.02em;
}
.hm-svc__sat-id span {
  display: block;
  margin-top: 0.35em;
  overflow: hidden;
  color: var(--hm-svc-gray);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hm-svc__sat-count {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  margin: 0;
  color: #b45309;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hm-svc__sat-count b {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 3em;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 0.9;
}
.hm-svc__sat.is-clear .hm-svc__sat-count { color: #15803d; }
.hm-svc__sat-rows {
  display: block;
  margin: 0;
  padding: 0;
}
.hm-svc__sat-row {
  display: grid;
  grid-template-columns: 2em minmax(0, 1fr) 5.2em;
  align-items: center;
  gap: 0 0.9em;
  height: 2.5em;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.hm-svc__sat-row > i {
  color: #b6bfcc;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}
.hm-svc__sat-what {
  position: relative;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* la riga chiusa e' barrata */
.hm-svc__sat-what::after {
  content: "";
  position: absolute;
  left: 0;
  top: 52%;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.hm-svc__sat-state {
  color: #b45309;
  letter-spacing: 0.1em;
  text-align: right;
  text-transform: uppercase;
}
.hm-svc__sat-state::before { content: "aperto"; }
.hm-svc__sat-row.is-closed .hm-svc__sat-what { color: var(--hm-svc-gray); }
.hm-svc__sat-row.is-closed .hm-svc__sat-what::after { transform: scaleX(1); }
.hm-svc__sat-row.is-closed .hm-svc__sat-state { color: #15803d; }
.hm-svc__sat-row.is-closed .hm-svc__sat-state::before { content: "chiuso"; }
:lang(en) .hm-svc__sat-state::before { content: "open"; }
:lang(en) .hm-svc__sat-row.is-closed .hm-svc__sat-state::before { content: "closed"; }
.hm-svc__sat-foot {
  display: block;
  margin: 1em 0 0;
  color: var(--hm-svc-gray);
  letter-spacing: 0.04em;
}
.hm-svc__sat-foot b {
  display: none;
  color: #15803d;
  font-weight: 500;
}
.hm-svc__sat.is-clear .hm-svc__sat-foot span { display: none; }
.hm-svc__sat.is-clear .hm-svc__sat-foot b { display: inline; }

/* ---- rv: lo stesso quadro, 1994 e 2026. Il "dopo" sta in una FINESTRA
   che scorre (.hm-svc__rv-win, overflow nascosto) con dentro l'immagine
   che scorre al contrario: cosi' l'immagine resta ferma e si vede solo
   la parte scoperta dalla finestra. Tutto transform: niente ridisegno a
   ogni fotogramma (il clip-path animato ri-rasterizzava un svg da
   1600 px 60 volte al secondo: "lagga"). Fermo: meta' e meta'. ---- */
.hm-svc__rv {
  position: relative;
  width: min(100%, calc((var(--hm-svc-objh) + 60px - 2 * var(--hm-svc-objp)) * 1.6));
  aspect-ratio: 1600 / 1000;
}
.hm-svc__rv-box {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hm-svc__rv img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hm-svc__rv-win {
  position: absolute;
  inset: -2% 0;
  overflow: hidden;
  transform: translateX(-50%);
}
.hm-svc__rv-win img {
  top: 2%;
  height: auto;
  aspect-ratio: 1600 / 1000;
  transform: translateX(50%);
}
.hm-svc__rv-edge {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 2px;
  background: #2563eb;
  pointer-events: none;
}
.hm-svc__rv-years {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2.2em;
  display: flex;
  justify-content: space-between;
  color: var(--hm-svc-gray);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.hm-svc__rv-years b { font-weight: 600; }
.hm-svc__rv-years b:last-child { color: var(--hm-svc-ink); }
.hm-svc__obj--rv {
  height: calc(var(--hm-svc-objh) + 60px);
  padding-bottom: clamp(52px, 5.6vw, 76px);
}
/* col gesto: si parte dal 1994 (finestra tutta a sinistra), il 2026 entra
   da sinistra con la riga blu davanti, come nell'apertura della pagina */
.hm-svc__grid.is-live .hm-svc__rv-win { transform: translateX(-100%); }
.hm-svc__grid.is-live .hm-svc__rv-win img { transform: translateX(100%); }
.hm-svc__grid.is-live .hm-svc__rv-edge { opacity: 0; }
.hm-svc__grid.is-live .hm-svc__tile.is-on .hm-svc__rv-win {
  transform: none;
  transition: transform 1.05s cubic-bezier(0.65, 0, 0.35, 1) 0.3s;
}
.hm-svc__grid.is-live .hm-svc__tile.is-on .hm-svc__rv-win img {
  transform: none;
  transition: transform 1.05s cubic-bezier(0.65, 0, 0.35, 1) 0.3s;
}
.hm-svc__grid.is-live .hm-svc__tile.is-on .hm-svc__rv-edge { animation: hmSvcEdge 1.35s linear both; }
@keyframes hmSvcEdge {
  0%, 22% { opacity: 0; }
  27%, 93% { opacity: 1; }
  100% { opacity: 0; }
}
.hm-svc__grid.is-live .hm-svc__rv-years b:last-child { color: var(--hm-svc-gray); transition: color 0.4s ease 1.15s; }
.hm-svc__grid.is-live .hm-svc__tile.is-on .hm-svc__rv-years b:last-child { color: var(--hm-svc-ink); }

/* =============================================================
   I GESTI — stati iniziali solo con lo script vivo (.is-live sulla
   griglia); partono con .is-on sulla tessera, una volta sola. Prima il
   testo (tre pezzi, uno dopo l'altro), poi l'oggetto fa il suo.
   ============================================================= */
.hm-svc__grid.is-live .hm-svc__copy > * {
  opacity: 0;
  transform: translateY(14px);
}
.hm-svc__grid.is-live .hm-svc__tile.is-on .hm-svc__copy > * {
  opacity: 1;
  transform: none;
  transition: opacity 0.45s var(--hm-svc-ease), transform 0.45s var(--hm-svc-ease);
}
.hm-svc__grid.is-live .hm-svc__tile.is-on .hm-svc__copy > :nth-child(2) { transition-delay: 0.05s; }
.hm-svc__grid.is-live .hm-svc__tile.is-on .hm-svc__copy > :nth-child(3) { transition-delay: 0.1s; }

/* msm: le sottolineature si tracciano, sotto arrivano le letture */
.hm-svc__grid.is-live .hm-svc__bit::after { transform: scaleX(0); }
.hm-svc__grid.is-live .hm-svc__read li {
  opacity: 0;
  transform: translateY(8px);
}
.hm-svc__grid.is-live .hm-svc__tile.is-on .hm-svc__bit::after {
  transform: scaleX(1);
  transition: transform 0.5s var(--hm-svc-ease);
}
.hm-svc__grid.is-live .hm-svc__tile.is-on .hm-svc__read li {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--hm-svc-ease), transform 0.6s var(--hm-svc-ease);
}
.hm-svc__grid.is-live .hm-svc__tile.is-on .hm-svc__bit:nth-of-type(1)::after,
.hm-svc__grid.is-live .hm-svc__tile.is-on .hm-svc__read li:nth-child(1) { transition-delay: 0.3s; }
.hm-svc__grid.is-live .hm-svc__tile.is-on .hm-svc__bit:nth-of-type(2)::after,
.hm-svc__grid.is-live .hm-svc__tile.is-on .hm-svc__read li:nth-child(2) { transition-delay: 0.58s; }
.hm-svc__grid.is-live .hm-svc__tile.is-on .hm-svc__bit:nth-of-type(3)::after,
.hm-svc__grid.is-live .hm-svc__tile.is-on .hm-svc__read li:nth-child(3) { transition-delay: 0.86s; }

/* el + sw: gli svg inline partono tutti da comporre (come nelle pagine);
   e' lo script a portarli a p=1 */
.hm-svc__grid.is-live .hm-svc__svg .sw-ink { display: inline; }
.hm-svc__grid.is-live .hm-svc__svg [data-draw],
.hm-svc__grid.is-live .hm-svc__svg [data-route]:not([data-static-dash]) {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.hm-svc__grid.is-live .hm-svc__svg [data-dir="-1"] { stroke-dashoffset: -1; }
.hm-svc__grid.is-live .hm-svc__svg [data-fade],
.hm-svc__grid.is-live .hm-svc__svg [data-node],
.hm-svc__grid.is-live .hm-svc__svg [data-route][data-static-dash] { opacity: 0; }
/* testa del segnale: un tratto breve che percorre la connessione */
.hm-svc__grid.is-live .hm-svc__svg [data-head] {
  stroke-dasharray: 0.055 1;
  stroke-dashoffset: 0.055;
  opacity: 0;
}

/* cl: la lista (lo script toglie is-closed all'avvio e le rimette una per una) */
.hm-svc__sat-what::after { transition: transform 0.35s var(--hm-svc-ease); }
.hm-svc__sat-what,
.hm-svc__sat-state,
.hm-svc__sat-count { transition: color 0.4s ease; }

/* le tessere non hanno un'entrata propria (si anima il contenuto):
   il .reveal della griglia resta visibile */
html.reveal-ready .page-home-corporate .hm-svc__grid.reveal,
html.reveal-ready .page-home-corporate .hm-svc__grid.reveal.is-visible {
  opacity: 1;
  animation: none;
}

@media (hover: hover) {
  .hm-svc__all:hover svg,
  .hm-svc__tile:hover .hm-svc__go svg { transform: translateX(4px); }
}

/* --- tablet: due colonne restano; oggetti un po' piu' bassi --- */
@media (max-width: 1080px) {
  .hm-svc { --hm-svc-objh: clamp(250px, 31vw, 330px); }
}

/* --- telefono: l'ammiraglia sopra; le cinque tessere scorrono di lato;
   "Tutti i servizi" scende sotto --- */
@media (max-width: 760px) {
  .hm-svc__wrap {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "grid"
      "all";
  }
  .hm-svc__grid {
    display: flex;
    gap: 14px;
    /* fuori dal margine della pagina: la tessera 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-svc__grid::-webkit-scrollbar { display: none; }
  /* il margine di destra dell'ultima tessera (Safari ignora il padding
     finale di un flex che scorre) */
  .hm-svc__grid::after {
    content: "";
    flex: 0 0 2px;
  }
  .hm-svc__tile {
    flex: 0 0 80%;
    scroll-snap-align: start;
    border-radius: 22px;
    /* ombra piu' corta: quella lunga verrebbe tagliata dal bordo della lista */
    box-shadow:
      0 18px 36px -26px rgba(15, 23, 42, 0.3),
      0 2px 6px rgba(15, 23, 42, 0.03);
  }
  /* l'ammiraglia: larga come la pagina (schermo meno i margini) e con
     snap-stop, cosi' il primo gesto della fila non la salta */
  .hm-svc__tile--msm {
    flex-basis: calc(100% - 32px);
    scroll-snap-stop: always;
  }
  .hm-svc__copy { padding: 26px 20px 0; }
  .hm-svc__name { font-size: 1.5rem; letter-spacing: -0.038em; }
  .hm-svc__tile--wide .hm-svc__name { font-size: 1.6rem; }
  .hm-svc__sub,
  .hm-svc__tile--wide .hm-svc__sub { font-size: var(--fs-body); }
  .hm-svc__go { margin-top: 10px; font-size: var(--fs-caption); }
  .hm-svc {
    --hm-svc-objh: 230px;
    --hm-svc-objp: 22px;
  }
  .hm-svc__obj { padding: 22px 20px 26px; }
  .hm-svc__obj--msm { height: auto; padding-top: 22px; }
  .hm-svc__ask { font-size: 1.32rem; letter-spacing: -0.03em; }
  .hm-svc__bit { white-space: normal; }
  .hm-svc__read {
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: 18px;
    font-size: var(--fs-micro);
  }
  .hm-svc__read li + li::before { content: none; }
  .hm-svc__sat { font-size: 0.58rem; }
  .hm-svc__obj--rv { height: 250px; padding-bottom: 40px; }
  .hm-svc__rv { width: min(100%, calc(206px * 1.6)); }
  .hm-svc__rv-years { font-size: var(--fs-micro); }
  /* sopra lo spazio dell'ombra della lista, che gli passa sotto */
  .hm-svc__all {
    position: relative;
    z-index: 1;
    justify-self: start;
    margin: 22px 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hm-svc__grid.is-live .hm-svc__copy > *,
  .hm-svc__grid.is-live .hm-svc__tile.is-on .hm-svc__copy > *,
  .hm-svc__grid.is-live .hm-svc__read li,
  .hm-svc__grid.is-live .hm-svc__tile.is-on .hm-svc__read li {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hm-svc__grid.is-live .hm-svc__bit::after,
  .hm-svc__grid.is-live .hm-svc__tile.is-on .hm-svc__bit::after { transform: scaleX(1); transition: none; }
  /* niente disegni inline ne' fotogrammi (lo script non li scarica): restano
     le immagini ferme; il revamping resta meta' e meta' */
  .hm-svc__grid.is-live .hm-svc__rv-win,
  .hm-svc__grid.is-live .hm-svc__tile.is-on .hm-svc__rv-win { transform: translateX(-50%); transition: none; }
  .hm-svc__grid.is-live .hm-svc__rv-win img,
  .hm-svc__grid.is-live .hm-svc__tile.is-on .hm-svc__rv-win img { transform: translateX(50%); transition: none; }
  .hm-svc__grid.is-live .hm-svc__rv-edge,
  .hm-svc__grid.is-live .hm-svc__tile.is-on .hm-svc__rv-edge { opacity: 1; animation: none; }
  .hm-svc__grid.is-live .hm-svc__rv-years b:last-child { color: var(--hm-svc-ink); transition: none; }
  .hm-svc__sat-what::after,
  .hm-svc__sat-what,
  .hm-svc__sat-state,
  .hm-svc__sat-count,
  .hm-svc__all svg,
  .hm-svc__go svg { transition: none; }
}