/* ==========================================================================
   Home (index.html) — prefisso hm-
   Sezioni: hero con emblema 3D · esploso (index-esploso.css, prefisso exp-) ·
   check-up col manometro · quadro di comando · per chi lavoriamo · guida col
   carrello · dall'officina · principi · banda citazione e banda finale (core).
   Stato base = stato finale: gli stati di partenza esistono solo sotto
   html.js-motion e con .is-armed, che lo script mette quando prende in mano un
   oggetto. Si animano solo transform, opacity, clip-path e stroke-dashoffset.
   ========================================================================== */

/* ---------- Comparse del testo: dissolvenza breve ----------
   Sul testo la direzione vuole al massimo una dissolvenza brevissima: qui 300 ms di sola
   opacità (il core usa 900 ms per tutto). I titoli h2 non hanno comparsa; le targhe tengono
   data-reveal="plate" con i tempi del core. */
.js-motion main [data-reveal="fade"]:not(.is-revealed) { transition: opacity 300ms var(--ease-out); transition-delay: var(--d, 0ms); }

/* ---------- Viti a vista (targhe e pannelli) ---------- */
.hm-screws { position: absolute; inset: 12px; z-index: 1; pointer-events: none; }
.hm-screws i {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #FFFFFF, #AEB6BC 55%, #6E787F);
  box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .3), 0 1px 1px rgba(0, 0, 0, .35);
}
.hm-screws i::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 50%;
  height: 1px;
  margin-top: -.5px;
  background: rgba(21, 24, 26, .55);
  transform: rotate(var(--sr, 35deg));
}
.hm-screws i:nth-child(1) { top: 0; left: 0; }
.hm-screws i:nth-child(2) { top: 0; right: 0; --sr: -20deg; }
.hm-screws i:nth-child(3) { bottom: 0; left: 0; --sr: 80deg; }
.hm-screws i:nth-child(4) { bottom: 0; right: 0; --sr: 10deg; }

/* ==========================================================================
   1 · Hero
   ========================================================================== */
.hm-hero {
  position: relative;
  isolation: isolate;
  padding-top: calc(var(--header-h) + clamp(28px, 6vw, 88px));
  padding-bottom: clamp(56px, 8vw, 112px);
  overflow: clip;
}
/* luce fredda dietro l'emblema e tavola tecnica appena percettibile: fermi, niente comparse */
.hm-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(34% 48% at 73% 50%, rgba(140, 192, 230, .085), transparent 72%),
    radial-gradient(56% 70% at 73% 46%, rgba(238, 241, 243, .04), transparent 70%);
}
.hm-hero__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(195, 202, 208, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(195, 202, 208, .07) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: center center;
  -webkit-mask: radial-gradient(30% 44% at 73% 50%, #000 0%, transparent 100%);
  mask: radial-gradient(30% 44% at 73% 50%, #000 0%, transparent 100%);
}
.hm-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 72px);
  align-items: center;
}
.hm-hero__text { display: grid; gap: 22px; align-content: start; }
.hm-hero__title {
  font-size: clamp(2.5rem, 4.7vw, 4.6rem);
  line-height: .98;
  text-wrap: balance;
}
.hm-hero__cta { margin-top: 8px; }
.hm-hero__object { position: relative; display: grid; justify-items: center; }

@media (max-width: 960px) {
  .hm-hero__grid { grid-template-columns: 1fr; }
  .hm-hero__object { order: -1; }                 /* su mobile l'emblema sta sopra il testo */
  .hm-hero__object .hero3d { max-width: 520px; }
  .hm-hero__bg { background: radial-gradient(70% 30% at 50% 24%, rgba(140, 192, 230, .09), transparent 72%); }
  .hm-hero__bg::before {
    -webkit-mask: radial-gradient(56% 26% at 50% 24%, #000 0%, transparent 100%);
    mask: radial-gradient(56% 26% at 50% 24%, #000 0%, transparent 100%);
  }
}
@media (max-width: 600px) {
  .hm-hero { padding-top: calc(var(--header-h) + 12px); }
  /* sul telefono l'occhiello va su due righe: righe bilanciate e respirate, trattino sulla prima */
  .hm-hero .eyebrow { align-items: flex-start; line-height: 1.6; text-wrap: balance; }
  .hm-hero .eyebrow::before { flex: none; margin-top: calc(.8em - .5px); }
  .hm-hero__grid { gap: 18px; }
  .hm-hero__object .hero3d { max-width: 360px; }
  .hm-hero__text { gap: 18px; }
  .hm-hero__bg { background: radial-gradient(80% 24% at 50% 20%, rgba(140, 192, 230, .09), transparent 72%); }
  .hm-hero__bg::before {
    -webkit-mask: radial-gradient(64% 20% at 50% 20%, #000 0%, transparent 100%);
    mask: radial-gradient(64% 20% at 50% 20%, #000 0%, transparent 100%);
  }
}

/* ==========================================================================
   Componente .hero3d — emblema 3D con poster
   Stati (li mette hero3d.js o lo script di pagina sullo stage):
     is-loading  il modulo sta caricando          is-ready     la scena è viva
     is-slow     caricamento oltre 2,4 s: poster  is-fallback  solo poster (niente WebGL,
     is-late     la scena parte già a riposo                   movimento ridotto, leggera, errore)
     is-edge     bordi sfumati accesi (apertura e separazione dei pezzi)
   Con movimento il poster resta spento: l'accensione parte dai pezzi che arrivano e si incastrano,
   non dal marchio già finito (scelta del committente, 2026-10-01). Il poster (lo stato a riposo, stessa
   inquadratura della scena) compare solo se la scena tarda (is-slow) o non può girare. Se la scena è
   pronta col poster in vista, il canvas si accende sopra (450 ms) su un poster identico, la scena
   resta ferma (hold in index.js), poi il poster si spegne sotto il canvas già pieno.
   Senza JS, con movimento ridotto e in modalità leggera il poster è visibile da subito.
   ========================================================================== */
.hero3d {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 4;              /* uguale al riquadro della scena e al poster 1200×960 */
}
.hero3d picture { display: contents; }
.hero3d__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity .6s var(--ease-out);
}
.hero3d__canvas {
  opacity: 0;
  transition: opacity .35s var(--ease-out);
}
.hero3d.is-late .hero3d__canvas { transition-duration: 450ms; }
/* Bordi sfumati: un pezzo che durante l'apertura o la separazione sfiora il riquadro non viene tagliato
   netto. Solo con is-edge (lo mette hero3d.js): a riposo i pezzi stanno lontani dai bordi, e la maschera
   su un canvas che si ridisegna costa un passaggio di composizione in più a ogni fotogramma. */
.hero3d.is-edge .hero3d__canvas {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(180deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(180deg, transparent, #000 4%, #000 96%, transparent);
  mask-composite: intersect;
}
.hero3d.is-ready .hero3d__canvas { opacity: 1; }

/* Con movimento il poster aspetta: l'accensione parte dai pezzi, non dal marchio già finito. */
html.js-motion:not(.mt-lite) .hero3d:not(.is-fallback):not(.is-slow) .hero3d__poster { opacity: 0; }
/* Rete di sicurezza: se lo script di pagina non parte, il poster compare da solo. */
html.js-motion:not(.mt-lite) .hero3d:not([class*="is-"]) .hero3d__poster { animation: hero3d-poster .6s var(--ease-out) 3.2s both; }
@keyframes hero3d-poster { from { opacity: 0; } to { opacity: 1; } }
/* partenza col poster in vista: il poster si spegne solo a canvas pieno (dopo i 450 ms della sua accensione) */
.hero3d.is-ready .hero3d__poster { opacity: 0; transition: opacity 160ms linear 470ms; }

@media print {
  .hero3d__canvas { display: none; }
  .hero3d .hero3d__poster { opacity: 1 !important; animation: none !important; }
}

/* ==========================================================================
   3 · Check-up «Vi riconoscete?» — pannello d'alluminio, interruttori, manometro
   ========================================================================== */
.hm-check__head { max-width: 46rem; }

.hm-check__panel {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr);
  grid-template-areas: "list meter" "list cta";
  grid-template-rows: 1fr auto;
  column-gap: clamp(32px, 5vw, 80px);
  row-gap: 24px;
  padding: clamp(30px, 4vw, 56px);
  border-radius: var(--radius-l);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .45) 0 1px, rgba(255, 255, 255, 0) 1px 3px),
    linear-gradient(180deg, #F5F7F8 0%, #E2E6E9 100%);
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    inset 0 0 0 1px rgba(21, 24, 26, .07),
    0 1px 0 rgba(0, 0, 0, .08),
    0 44px 70px -42px rgba(21, 24, 26, .6);
}

/* luce del puntatore su un livello proprio (core: .light-spot), stessa forma del vecchio radiale
   90% 80% fino al 60%, partenza in alto a sinistra */
.hm-check__panel > .light-spot { --lx: .3; --ly: 0; --spot-w: 1.08; --spot-h: .96; --spot-color: rgba(255, 255, 255, .8); }

.hm-check__list { grid-area: list; min-width: 0; margin: 0; padding: 0; border: 0; }
.hm-check__row {
  padding-block: 10px;
  border-top: 1px solid rgba(21, 24, 26, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);      /* solco inciso: ombra sopra, luce sotto */
}
.hm-check__row:last-of-type { border-bottom: 1px solid rgba(21, 24, 26, .12); }
.hm-check__row .toggle__label { text-wrap: pretty; }   /* peso sull'alluminio e hover: li dà il core */

/* Si vede che le frasi si toccano: riga guida, riga che si illumina sotto il puntatore,
   colpetto alla prima leva quando il pannello entra in vista (index.js, .is-nudge).
   Solo opacità e trasformazioni: in WebKit niente ridisegni. */
.hm-check__how {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 1.4;
  text-transform: uppercase;
  color: #4A545B;
  transition: opacity 400ms var(--ease-out);
}
.hm-check__tap { position: relative; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--blu-scuro); }
.hm-check__tap::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px solid var(--blu-scuro);
  opacity: 0;
}
.js-motion .hm-check__tap::after { animation: hm-tap 1.8s var(--ease-out) infinite; }
@keyframes hm-tap {
  0% { opacity: .7; transform: scale(.5); }
  70%, 100% { opacity: 0; transform: scale(1.4); }
}
.hm-check__panel.is-touched .hm-check__how { opacity: .45; }
.hm-check__panel.is-touched .hm-check__tap::after { animation: none; }

.hm-check__row { position: relative; z-index: 0; }
.hm-check__row::before {
  content: "";
  position: absolute;
  inset: 3px -12px;
  z-index: -1;
  border-radius: 10px;
  background: rgba(255, 255, 255, .7);
  box-shadow: inset 0 0 0 1px rgba(21, 24, 26, .06);
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
}
@media (hover: hover) {
  .hm-check__row:hover::before { opacity: 1; }
}
.hm-check__row:has(input:focus-visible)::before { opacity: 1; }
.hm-check__row.is-nudge .toggle__lever { animation: hm-nudge 900ms var(--ease-out) both; }
@keyframes hm-nudge {
  0%, 100% { transform: scaleY(-.9); }
  22% { transform: scaleY(-.3); }
  44% { transform: scaleY(-.9); }
  64% { transform: scaleY(-.5); }
  82% { transform: scaleY(-.9); }
}

.hm-check__meter {
  grid-area: meter;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 20px;
  text-align: center;
}
.hm-gauge-wrap {
  width: min(100%, 330px);
  border-radius: 50%;
  box-shadow: 0 30px 44px -22px rgba(21, 24, 26, .6), 0 4px 10px -4px rgba(21, 24, 26, .35);
}
.hm-gauge { display: block; width: 100%; height: auto; }
.hm-check__result {
  max-width: 24rem;
  min-height: 3.2em;
  color: var(--fg-2);
  font-size: var(--fs-small);
  line-height: 1.55;
  text-wrap: pretty;
}
.hm-check__cta { grid-area: cta; justify-self: center; align-self: end; }

/* il manometro (SVG, unità del viewBox 260 × 260) */
.hm-gauge__minor { stroke: #7A848B; stroke-width: 1.2; }
.hm-gauge__major { stroke: #D5DADD; stroke-width: 2.4; stroke-linecap: square; }
.hm-gauge__track { fill: none; stroke: rgba(195, 202, 208, .34); stroke-width: 1.4; stroke-dasharray: 2.5 4.5; }
.hm-gauge__arc,
.hm-gauge__glow {
  fill: none;
  stroke: var(--scintilla);
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1.01;
  transition: stroke-dashoffset 680ms var(--ease-clack);
}
.hm-gauge__arc { stroke-width: 4.5; }
.hm-gauge__glow { stroke-width: 12; opacity: .2; }
.hm-gauge__nums text {
  font-family: var(--font-mono);
  font-size: 12px;
  fill: #C3CAD0;
  text-anchor: middle;
  dominant-baseline: central;
}
.hm-gauge__unit,
.hm-gauge__code {
  font-family: var(--font-mono);
  font-size: 7.4px;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-anchor: middle;
  fill: #9AA3A9;                                         /* 6:1 sul quadrante */
}
.hm-gauge__code { fill: #6E787F; }                      /* sigla di fabbrica, decorativa */
.hm-gauge__window { fill: #07090A; stroke: #000; stroke-opacity: .7; }
.hm-gauge__drum text,
.hm-gauge__of {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  dominant-baseline: central;
}
.hm-gauge__drum text { fill: #EEF1F3; text-anchor: end; }
.hm-gauge__of { fill: #7A848B; text-anchor: start; }
.hm-gauge__drum { transform: translateY(calc(var(--n, 0) * -24px)); transition: transform 520ms var(--ease-clack); }

/* lancetta: molla fino a n/6; sui fermi (0 e 6) accelera e batte, il rimbalzo lo fa lo script */
.hm-gauge__rot,
.hm-gauge__knock { transform-box: view-box; transform-origin: 130px 130px; }
.hm-gauge__rot {
  transform: rotate(calc(-120deg + var(--needle, var(--n, 0)) * 40deg));
  transition: transform 680ms var(--ease-clack);
}
/* prova strumento (solo con movimento, una volta): la lancetta spazza fino in fondo scala
   e torna, come un cruscotto all'accensione. Il contatore resta fermo: segue solo --n. */
.hm-gauge.is-sweep .hm-gauge__rot,
.hm-gauge.is-sweep .hm-gauge__arc,
.hm-gauge.is-sweep .hm-gauge__glow {
  transition-duration: 900ms;
  transition-timing-function: cubic-bezier(.5, 0, .25, 1);
}
.hm-gauge.is-peg .hm-gauge__rot,
.hm-gauge.is-peg .hm-gauge__arc,
.hm-gauge.is-peg .hm-gauge__glow {
  transition-duration: 420ms;
  transition-timing-function: cubic-bezier(.55, 0, 1, .45);
}

@media (max-width: 760px) {
  .hm-check__panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "meter" "list" "cta";
    grid-template-rows: auto;
    row-gap: 18px;
    padding: 16px 16px 22px;
  }
  /* il manometro resta in vista mentre si spuntano le frasi */
  .hm-check__meter {
    position: sticky;
    top: calc(var(--header-h) + 8px);
    z-index: 2;
    grid-template-columns: 104px minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    gap: 14px;
    margin-inline: -6px;
    padding: 10px 14px 10px 10px;
    border-radius: 12px;
    text-align: left;
    background: linear-gradient(180deg, #F8F9FA, #E7EAEC);
    box-shadow: inset 0 1px 0 #FFFFFF, 0 0 0 1px rgba(21, 24, 26, .08), 0 16px 26px -18px rgba(21, 24, 26, .6);
    transition: transform 520ms var(--ease-out);          /* lo stesso passo dell'header */
  }
  /* quando l'header si ritira, il manometro incollato sale con lui (solo se è davvero
     incollato: .is-stuck lo mette lo script; fermo nel pannello coprirebbe il testo sopra) */
  body:has(.site-header.is-hidden) .hm-check__meter.is-stuck { transform: translateY(calc(-1 * var(--header-h))); }
  .hm-gauge-wrap { width: 104px; box-shadow: 0 10px 16px -8px rgba(21, 24, 26, .55); }
  .hm-check__result { min-height: 0; font-size: .9375rem; color: var(--fg); }
  .hm-check__cta { justify-self: stretch; }
  .hm-check__cta .btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   4 · Nati dentro Maranatha — il quadro di comando
   Tre interruttori (il .toggle di sola lettura del core, rimpicciolito), il comando manuale
   in ambra e lo sportello piombato. Il quadro mostra solo categorie: niente descrizioni.
   ========================================================================== */
.hm-origin__grid {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: center;
}
.hm-origin__text { display: grid; gap: 20px; align-content: start; }
.hm-origin__p { max-width: 34em; color: var(--fg-2); text-wrap: pretty; }

.hm-board {
  --col: 64px;                                  /* colonna della barra: chiave e icone sullo stesso asse */
  position: relative;
  isolation: isolate;
  padding: clamp(22px, 3vw, 34px);
  border-radius: var(--radius-l);
  background:
    var(--brushed),
    linear-gradient(180deg, #262C30 0%, #191D20 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .09),
    inset 0 0 0 1px rgba(255, 255, 255, .04),
    0 1px 0 rgba(0, 0, 0, .6),
    0 44px 80px -44px rgba(0, 0, 0, .95);
}
/* luce del puntatore su un livello proprio, sotto lo smusso: il vecchio radiale 110% 80% fino al 58% */
.hm-board > .light-spot { z-index: -2; --lx: .6; --ly: 0; --spot-w: 1.276; --spot-h: .928; --spot-color: rgba(255, 255, 255, .07); }
.hm-board::before {
  /* smusso lavorato, come le targhe */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .04) 38%, rgba(0, 0, 0, .35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.hm-board__head {
  display: grid;
  grid-template-columns: var(--col) minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}
.hm-board__label { padding-bottom: 2px; }
.hm-board__title {
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--argento);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .7);
}
.hm-board__sub { margin-top: 6px; font-size: .875rem; color: var(--fg-3); }

/* chiave a due posizioni: 0 in alto a sinistra, I in alto a destra */
.hm-key { position: relative; display: block; width: var(--col); height: 64px; }
.hm-key__knob {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #15191C 0 13px, transparent 14px),
    radial-gradient(circle at 38% 30%, #F3F5F6, #9AA3A9 45%, #4A545A 100%);
  box-shadow: 0 8px 14px -6px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 1px rgba(0, 0, 0, .4);
}
.hm-key__lever {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 8px;
  margin: -4px 0 0 -15px;
  border-radius: 4px;
  background: linear-gradient(180deg, #FFFFFF, #AEB7BD 52%, #6E787F);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .75);
  transform: rotate(-45deg);                    /* acceso: indica la I */
}
.hm-key__lever::after {
  /* la punta che indica la posizione */
  content: "";
  position: absolute;
  right: 3px;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: var(--scintilla);
  box-shadow: 0 0 6px rgba(224, 160, 80, .8);
}
.hm-key__mark {
  position: absolute;
  top: -2px;
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 500;
  color: var(--fg-3);
}
.hm-key__mark--off { left: 4px; }
.hm-key__mark--on { right: 6px; color: var(--argento); }

/* la barra di alimentazione: tratteggio = da alimentare, blu = alimentata */
.hm-bus {
  position: absolute;
  left: calc(var(--col) / 2 - 1px);
  top: 0;
  bottom: 0;
  z-index: 0;
  width: 2px;
  background: repeating-linear-gradient(180deg, rgba(195, 202, 208, .28) 0 4px, transparent 4px 9px);
}
.hm-bus i {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(140, 192, 230, .75), rgba(140, 192, 230, .95));
  box-shadow: 0 0 8px rgba(140, 192, 230, .55);
  transform-origin: 50% 0;
}
.hm-bus--head { top: 50%; bottom: -18px; left: calc(50% - 1px); }

.hm-board__list { list-style: none; margin: 18px 0 0; padding: 0; }
.hm-mod {
  position: relative;
  display: grid;
  grid-template-columns: var(--col) minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding-block: 16px;
  border-top: 1px solid rgba(0, 0, 0, .45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
}
.hm-mod:last-child .hm-bus { bottom: auto; height: 40px; }   /* la barra finisce sull'ultima icona */
.hm-mod__icon {
  position: relative;
  z-index: 1;
  justify-self: center;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--brushed), linear-gradient(180deg, #1B2023, #13171A);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .06);
}
.hm-mod__icon img { width: 30px; height: 30px; object-fit: contain; transition: opacity .5s var(--ease-out); }
.hm-mod__icon .hm-mod__img--wide { width: 40px; height: 40px; }   /* il pezzo dei gestionali è largo e basso: a 30 px sparirebbe */
.hm-mod__name {
  font-family: var(--font-display);
  font-stretch: 110%;
  font-weight: 680;
  font-size: 1.08rem;
  line-height: 1.2;
  letter-spacing: -.005em;
}
.hm-mod__code {
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--fg-3);
}
/* stato: la leva dell'interruttore (su = I, LED blu) e la scritta «In funzione» */
.hm-mod__state {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--argento);
  transition: opacity .4s var(--ease-out);
}
.hm-mod__switch { grid-template-columns: auto; gap: 0; zoom: .78; }   /* il .toggle del core senza etichetta, in formato da quadro */

/* comando manuale (ambra) e sportello piombato, staccati dai moduli */
.hm-board__foot {
  display: grid;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid rgba(0, 0, 0, .45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
}
.hm-board__tag {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.hm-board__rule {
  display: grid;
  grid-template-columns: var(--col) minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--fg);
  text-wrap: pretty;
  transition: opacity .4s var(--ease-out);
}
.hm-board__rule .hm-lamp { justify-self: center; }
.hm-board__rule .hm-board__tag { color: #E9C08E; }
.hm-hatch {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 12px 16px 12px 10px;
  border-radius: 10px;
  border: 1px dashed rgba(195, 202, 208, .26);
  background: linear-gradient(180deg, rgba(0, 0, 0, .24), rgba(0, 0, 0, .1));
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 255, 255, .04);
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--fg-2);
}
.hm-hatch__seal { display: block; width: 72px; height: 40px; overflow: visible; }
.hm-hatch__wire { stroke: #8F989E; stroke-width: 1.3; stroke-linecap: round; }
.hm-hatch__screw { fill: #AEB6BC; stroke: rgba(0, 0, 0, .45); stroke-width: 1; }
.hm-hatch__lead { fill: #7D868C; stroke: rgba(0, 0, 0, .5); stroke-width: 1; }
.hm-hatch__stamp { stroke: #4B5358; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }

/* spia con lente: alloggiamento spento, lente accesa (::before), prova in ambra (i), alone (b) */
.hm-lamp {
  position: relative;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #262C30;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .06);
}
.hm-lamp::before,
.hm-lamp i {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #F0F8FE, var(--blu) 55%, #4F8FC0);
  transition: opacity .22s var(--ease-out);
}
.hm-lamp i { background: radial-gradient(circle at 40% 35%, #FFF1DC, var(--scintilla) 55%, #B8772F); opacity: 0; transition-duration: .12s; }
.hm-lamp b {
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(140, 192, 230, .55), rgba(140, 192, 230, 0) 68%);
  opacity: .75;
  transition: opacity .45s var(--ease-out);
}
.hm-lamp--person::before { background: radial-gradient(circle at 40% 35%, #FFF1DC, var(--scintilla) 55%, #B8772F); }
.hm-lamp--person b { background: radial-gradient(circle, rgba(224, 160, 80, .6), rgba(224, 160, 80, 0) 68%); }

/* armato (MT.arm: solo con JS e movimento, se il quadro è sotto la piega): chiave su 0,
   barra spenta, leve giù. La prova in ambra (.is-test) vince sul LED spento. */
.js-motion .hm-board.is-armed .hm-key__lever { transform: rotate(-135deg); }
.js-motion .hm-board.is-armed .hm-bus i { transform: scaleY(0); }
.js-motion .hm-board.is-armed .hm-mod:not(.is-on) .toggle__lever { transform: scaleY(-.9); }
.js-motion .hm-board.is-armed .hm-mod:not(.is-on):not(.is-test) .led { --led-lit: 0; }
.js-motion .hm-board.is-armed .hm-mod:not(.is-on) .hm-mod__icon img { opacity: .28; }
.js-motion .hm-board.is-armed .hm-mod:not(.is-on) .hm-mod__state,
.js-motion .hm-board.is-armed:not(.is-person) .hm-board__rule { opacity: .42; }
.js-motion .hm-board.is-armed:not(.is-person) .hm-lamp--person::before,
.js-motion .hm-board.is-armed:not(.is-person) .hm-lamp--person b { opacity: 0; }
.hm-mod.is-test .hm-mod__switch .led {
  --led-lit: 1;
  --led-color: var(--scintilla);
  --led-ring: rgba(224, 160, 80, .16);
  --led-halo: rgba(224, 160, 80, .85);
}
.js-motion .hm-board.is-person .hm-lamp--person { animation: hm-pop 520ms var(--ease-clack) both; }
.js-motion .hm-board.is-person .hm-lamp--person b { animation: hm-flare 1.4s var(--ease-out) both; }
@keyframes hm-pop { from { transform: scale(1.45); } to { transform: scale(1); } }
@keyframes hm-flare { 0% { opacity: 1; transform: scale(1.8); } 100% { opacity: .75; transform: scale(1); } }

/* dopo l'accensione i LED respirano piano: 4,8 s, 38% di quiete, un'onda dall'alto.
   Solo opacità della luce (::after del .led), in pausa fuori vista e spenta in leggera (data-loop). */
.hm-board.is-live .hm-mod__switch .led::after {
  animation: hm-breathe 4.8s var(--ease-in-out) infinite both;
  animation-delay: calc(var(--i, 0) * 300ms);
}
@keyframes hm-breathe {
  0%, 62%, 100% { opacity: 1; }
  28% { opacity: .55; }
}

@media (max-width: 960px) {
  .hm-origin__grid { grid-template-columns: minmax(0, 1fr); }
}
/* quadro stretto (colonna di destra fra 961 e 1180 px, o telefono): la leva va sotto il nome */
@media (min-width: 961px) and (max-width: 1180px), (max-width: 560px) {
  .hm-mod { grid-template-columns: var(--col) minmax(0, 1fr); gap: 10px 16px; }
  .hm-mod__state { grid-column: 2; }
}
@media (max-width: 560px) {
  .hm-board { --col: 52px; padding: 18px 16px 16px; }
  .hm-board__head { gap: 14px; }
  .hm-mod { gap: 8px 14px; }
  .hm-mod__icon { width: 42px; height: 42px; border-radius: 10px; }
  .hm-mod__icon img { width: 26px; height: 26px; }
  .hm-mod__icon .hm-mod__img--wide { width: 36px; height: 36px; }
  .hm-mod:last-child .hm-bus { height: 37px; }
  .hm-board__rule { gap: 14px; }
  .hm-hatch { gap: 12px; padding: 12px; }
  .hm-hatch__seal { width: 60px; height: 34px; }
}

/* ==========================================================================
   5 · Per chi lavoriamo — tre targhe, le RSA in evidenza
   ========================================================================== */
.hm-who__head { max-width: 58rem; }
.hm-who__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: clamp(16px, 2vw, 28px);
}
.hm-who__card { display: flex; flex-direction: column; align-items: flex-start; }
.hm-who__card--main {
  grid-row: span 2;
  overflow: hidden;
  padding: clamp(30px, 3.8vw, 52px);
}
/* la luce del puntatore è il livello .light-spot del core (radiale 120% 90% fino al 55%), qui un
   filo più chiara; lo sfondo resta la grafite un poco più calda della targa grande */
.plate.hm-who__card--main { background: var(--brushed), linear-gradient(180deg, #272D31 0%, #1B2023 100%); }
.hm-who__card--main > .light-spot { --spot-color: rgba(255, 255, 255, .085); }
.hm-who__card--main .hm-screws { inset: 14px; }
.hm-who__mark {
  position: absolute;
  right: -6%;
  bottom: -10%;
  z-index: -1;
  width: min(66%, 380px);
  height: auto;
  opacity: .13;
  pointer-events: none;
}
.hm-who__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 6px 10px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--argento);
  background: rgba(140, 192, 230, .08);
  box-shadow: inset 0 0 0 1px rgba(140, 192, 230, .3);
}
.hm-who__card--main .plate__code { margin-bottom: 14px; }
.hm-who__title {
  font-family: var(--font-display);
  font-stretch: 114%;
  font-weight: 720;
  font-size: clamp(1.35rem, 1.9vw, 1.7rem);
  line-height: 1.08;
  letter-spacing: -.012em;
}
.hm-who__card--main .hm-who__title { font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1; letter-spacing: -.02em; }
.hm-who__text { max-width: 26em; font-size: var(--fs-lead); line-height: 1.5; }
.hm-who__card .plate__foot { margin-top: auto; padding-top: 24px; }
.hm-who__card--main .plate__foot { padding-top: clamp(32px, 6vw, 88px); }

@media (max-width: 860px) {
  .hm-who__grid { grid-template-columns: minmax(0, 1fr); }
  .hm-who__card--main { grid-row: auto; }
}

/* ==========================================================================
   6 · Come lavoriamo — la guida di precisione e il carrello
   ========================================================================== */
.hm-method__head { max-width: 50rem; }
.hm-guide { position: relative; }
.hm-guide__steps {
  --g: clamp(20px, 2.6vw, 40px);
  --band: 108px;                                 /* fascia della guida sopra i passi */
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--g);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* la guida: profilo d'acciaio con i fori delle viti a passo costante */
.hm-guide__steps::before {
  content: "";
  position: absolute;
  left: -8px;
  right: -8px;
  top: 30px;
  height: 14px;
  border-radius: 3px;
  background:
    radial-gradient(circle at 50% 50%, #2A3136 0 1.8px, #7A848B 2.3px, rgba(122, 132, 139, 0) 3.1px) 20px 0 / 56px 14px repeat-x,
    linear-gradient(180deg, #FFFFFF 0%, #D5DADD 28%, #9AA3A9 56%, #6E787F 74%, #B7BFC5 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .85), 0 8px 12px -6px rgba(21, 24, 26, .45), inset 0 -1px 0 rgba(0, 0, 0, .18);
}
/* scala incisa sotto la guida */
.hm-guide__steps::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 52px;
  height: 9px;
  background:
    repeating-linear-gradient(90deg, rgba(21, 24, 26, .42) 0 1px, transparent 1px 48px) 0 0 / 100% 9px no-repeat,
    repeating-linear-gradient(90deg, rgba(21, 24, 26, .22) 0 1px, transparent 1px 8px) 0 0 / 100% 5px no-repeat;
}
.hm-step { position: relative; padding-top: var(--band); }
.hm-step__num {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--fg-3);
}
.hm-step__title { font-size: clamp(1.2rem, 1.6vw, 1.45rem); }
.hm-step__text { margin-top: 10px; color: var(--fg-2); font-size: var(--fs-small); line-height: 1.55; max-width: 24em; text-wrap: pretty; }

/* il fermo: cerchio a tratti (da fare), corpo d'acciaio con lente blu (fatto) o ambra (dove siamo) */
.hm-step__stop {
  position: absolute;
  left: 26px;
  top: 68px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px transparent;
}
.hm-step__stop::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px dashed rgba(21, 24, 26, .38);
}
.hm-step__body {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #FFFFFF, #C9D0D5 58%, #8E989F);
  box-shadow: 0 3px 6px -2px rgba(21, 24, 26, .5), inset 0 -1px 1px rgba(0, 0, 0, .2);
  transition: opacity .3s var(--ease-out);
}
.hm-step__led {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #B7BFC5;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .3);
}
.hm-step__led::before,
.hm-step__led::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0;
  transition: opacity .3s var(--ease-out);
}
.hm-step__led::before { background: radial-gradient(circle at 40% 35%, #CFE6F7, var(--blu-scuro) 60%, #1F4F75); box-shadow: 0 0 0 3px rgba(47, 110, 158, .16), 0 0 10px rgba(47, 110, 158, .6); }
.hm-step__led::after { background: radial-gradient(circle at 40% 35%, #FFF1DC, var(--scintilla) 55%, #B8772F); box-shadow: 0 0 0 3px rgba(224, 160, 80, .2), 0 0 10px rgba(224, 160, 80, .85); }
.hm-step.is-done .hm-step__led::before { opacity: 1; }
.hm-step.is-current .hm-step__led::after { opacity: 1; }
.hm-step:not(.is-done):not(.is-current) .hm-step__body { opacity: 0; }

/* il carrello: blocco lavorato con quattro viti; parcheggiato all'ultimo fermo (stato base) */
.hm-guide__carriage {
  position: absolute;
  left: 0;
  top: 14px;
  z-index: 2;
  width: 72px;
  height: 46px;
  border-radius: 7px;
  background:
    var(--brushed),
    linear-gradient(180deg, #6E787F 0%, #434C52 44%, #262C30 52%, #4A545A 78%, #5B656C 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38),
    inset 0 0 0 1px rgba(0, 0, 0, .35),
    0 12px 18px -8px rgba(21, 24, 26, .7);
}
.hm-guide__carriage::after {
  /* indice: la punta che segna il fermo */
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 12px;
  height: 7px;
  margin-left: -6px;
  background: linear-gradient(180deg, #4A545A, #262C30);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.hm-guide__carriage i {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #FFFFFF, #AEB6BC 55%, #5B656C);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .5);
}
.hm-guide__carriage i:nth-child(1) { left: 7px; top: 7px; }
.hm-guide__carriage i:nth-child(2) { right: 7px; top: 7px; }
.hm-guide__carriage i:nth-child(3) { left: 7px; bottom: 7px; }
.hm-guide__carriage i:nth-child(4) { right: 7px; bottom: 7px; }
.hm-guide__carriage b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .2em;
  color: #C3CAD0;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .7);
}

/* guida verticale: sotto i 900 px i passi stanno in colonna e il carrello scende */
@media (max-width: 899.98px) {
  .hm-guide__steps {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
    padding-left: 84px;
  }
  .hm-guide__steps::before {
    left: 22px;
    right: auto;
    top: -10px;
    bottom: -10px;
    width: 14px;
    height: auto;
    background:
      radial-gradient(circle at 50% 50%, #2A3136 0 1.8px, #7A848B 2.3px, rgba(122, 132, 139, 0) 3.1px) 0 20px / 14px 56px repeat-y,
      linear-gradient(90deg, #FFFFFF 0%, #D5DADD 28%, #9AA3A9 56%, #6E787F 74%, #B7BFC5 100%);
  }
  .hm-guide__steps::after {
    left: 44px;
    right: auto;
    top: 0;
    bottom: 0;
    width: 9px;
    height: auto;
    background:
      repeating-linear-gradient(180deg, rgba(21, 24, 26, .42) 0 1px, transparent 1px 48px) 0 0 / 9px 100% no-repeat,
      repeating-linear-gradient(180deg, rgba(21, 24, 26, .22) 0 1px, transparent 1px 8px) 0 0 / 5px 100% no-repeat;
  }
  .hm-step { padding-top: 0; }
  .hm-step__stop { left: -26px; top: 0; }
  .hm-guide__carriage { left: -83px; top: -13px; width: 46px; height: 46px; }
  .hm-guide__carriage::after {
    left: auto;
    right: -7px;
    top: 50%;
    bottom: auto;
    width: 7px;
    height: 12px;
    margin: -6px 0 0;
    background: linear-gradient(90deg, #4A545A, #262C30);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
  }
  .hm-guide__carriage b { font-size: .56rem; letter-spacing: .12em; }
}

/* ==========================================================================
   7 · Dall'officina — la regola, un lavoro pubblico, la dimostrazione
   ========================================================================== */
.hm-work__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  margin-bottom: clamp(40px, 6vw, 72px);
}
.hm-work__head .section-head { max-width: 50rem; margin-bottom: 0; }
.hm-work__head > p { flex: none; }
.hm-work__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.hm-work__grid > li { display: flex; }
.hm-case {
  --pad: clamp(22px, 2.4vw, 32px);
  display: flex;
  flex-direction: column;
  width: 100%;
}
/* finestra del campione: l'oggetto su una tavola scura a quadretti */
.hm-case__spec {
  position: relative;
  display: grid;
  place-items: center;
  /* larghezza dichiarata: in WebKit, dentro la targa-div (non link) l'aspect-ratio usava la larghezza
     prima dei margini negativi e la finestra veniva 36 px più bassa delle altre due */
  width: calc(100% + 2 * var(--pad));
  aspect-ratio: 16 / 9;
  margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) 22px;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
  background:
    radial-gradient(60% 80% at 50% 45%, rgba(140, 192, 230, .08), transparent 70%),
    linear-gradient(rgba(195, 202, 208, .06) 1px, transparent 1px) center / 24px 24px,
    linear-gradient(90deg, rgba(195, 202, 208, .06) 1px, transparent 1px) center / 24px 24px,
    #111417;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .6), inset 0 1px 3px rgba(0, 0, 0, .6);
}
.hm-case__spec img {
  position: relative;
  z-index: 1;
  width: auto;
  height: 50%;
  margin-bottom: 9%;
  transition: transform var(--t-obj) var(--ease-out);
}
/* ombra del pezzo già sfocata, ferma (niente filter: in modalità leggera sparirebbe) */
.hm-case__spec--site::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 58%;
  width: 34%;
  height: 10%;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .6), transparent);
  pointer-events: none;
}
a.hm-case:hover .hm-case__spec img { transform: translateY(-4px); }
.hm-case__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.hm-case__meta .plate__code { margin: 0; }
.hm-case__state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fg-3);
}
.hm-case__state--call .led { --led-lit: 1; --led-color: var(--scintilla); --led-ring: rgba(224, 160, 80, .16); --led-halo: rgba(224, 160, 80, .85); }
.hm-case__title {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 700;
  font-size: 1.28rem;
  line-height: 1.18;
  letter-spacing: -.008em;
}
.hm-case .plate__foot { margin-top: auto; padding-top: 22px; }

/* 1 · la regola: fascicolo d'acciaio chiuso col filo e il piombino, timbro ambra */
.hm-file { position: relative; width: min(56%, 220px); aspect-ratio: 1.45; margin-top: 4%; }
.hm-file__tab {
  position: absolute;
  left: 7%;
  top: -10%;
  width: 34%;
  height: 16%;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #4C555B, #353C41);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
.hm-file__cover {
  position: absolute;
  inset: 0;
  border-radius: 4px 9px 9px 9px;
  background: var(--brushed), linear-gradient(180deg, #4A5359 0%, #2B3237 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(0, 0, 0, .35), 0 16px 22px -12px rgba(0, 0, 0, .95);
}
.hm-file__cover i {
  position: absolute;
  left: 10%;
  height: 3px;
  border-radius: 2px;
  background: rgba(0, 0, 0, .3);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
}
.hm-file__cover i:nth-child(1) { top: 15%; width: 44%; }
.hm-file__cover i:nth-child(2) { top: 25%; width: 28%; }
.hm-file__cover i:nth-child(3) { top: 35%; width: 36%; }
.hm-file__seal { position: absolute; left: -6%; top: 46%; width: 112%; height: auto; overflow: visible; }
.hm-file__wire { stroke: #A3ACB2; stroke-width: 1.4; stroke-linecap: round; }
.hm-file__lead { fill: #7D868C; stroke: rgba(0, 0, 0, .5); stroke-width: 1; }
.hm-file__mark { stroke: #4B5358; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.hm-file__stamp {
  position: absolute;
  right: -14%;
  top: 4%;
  padding: 6px 10px 5px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: .56rem;
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1.4;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: #EDBE80;
  background: rgba(224, 160, 80, .07);
  box-shadow: inset 0 0 0 2px rgba(224, 160, 80, .8), inset 0 0 0 4px rgba(224, 160, 80, .14);
  rotate: -8deg;
}
/* il timbro cade una volta (MT.arm): transizioni solo sullo stato .is-played */
.js-motion .hm-file.is-armed:not(.is-played) .hm-file__stamp { opacity: 0; scale: 1.8; rotate: -20deg; }
.js-motion .hm-file.is-played .hm-file__stamp {
  transition: opacity 140ms linear 420ms, scale 480ms var(--ease-clack) 420ms, rotate 480ms var(--ease-clack) 420ms;
}
.js-motion .hm-file.is-played .hm-file__cover,
.js-motion .hm-file.is-played .hm-file__tab,
.js-motion .hm-file.is-played .hm-file__seal { animation: hm-thud 300ms var(--ease-out) 520ms both; }
@keyframes hm-thud { 0%, 100% { translate: 0 0; } 35% { translate: 0 2px; } }

/* 2 · il sito di Maranatha: le cinque lingue, ferme */
.hm-langs { position: absolute; left: 50%; bottom: 13%; display: flex; gap: 6px; translate: -50% 0; }
.hm-langs i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: .56rem;
  font-weight: 500;
  letter-spacing: .1em;
  padding: 4px 6px 3px;
  border-radius: 4px;
  color: var(--argento);
  background: rgba(140, 192, 230, .08);
  box-shadow: inset 0 0 0 1px rgba(140, 192, 230, .3);
}

/* 3 · la dimostrazione: uno schermo tratteggiato (dati finti) con il tasto di avvio */
.hm-demo {
  position: relative;
  display: grid;
  place-items: center;
  width: 48%;
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  border: 1.5px dashed rgba(195, 202, 208, .38);
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0));
}
.hm-demo__play {
  width: 22%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 32%, #F3F5F6, #9AA3A9 50%, #4A545A);
  box-shadow: 0 8px 14px -6px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .6);
  transition: scale var(--t-obj) var(--ease-out);
}
.hm-demo__play::after {
  /* triangolo di avvio, inciso */
  content: "";
  display: block;
  width: 34%;
  aspect-ratio: .87;
  margin: 33% 0 0 38%;
  background: #1B2023;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.hm-demo__tag { position: absolute; left: 14px; top: 14px; }
a.hm-case--demo:hover .hm-demo__play { scale: 1.08; }

@media (max-width: 960px) {
  .hm-work__grid { grid-template-columns: minmax(0, 1fr); max-width: 680px; }
  .hm-case__spec { aspect-ratio: 21 / 8; }
  .hm-file { width: min(40%, 200px); }
  .hm-demo { width: 34%; }
}
@media (max-width: 640px) {
  .hm-work__head { flex-direction: column; align-items: flex-start; }
  .hm-case__spec { aspect-ratio: 16 / 8; }
  .hm-file { width: min(50%, 190px); }
  .hm-demo { width: 44%; }
}

/* ==========================================================================
   8 · Principi
   ========================================================================== */
.hm-pr__grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.hm-pr__head { display: grid; gap: 18px; }
.hm-pr__list { margin: 0; padding: 0; list-style: none; }
.hm-pr__item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 16px;
  padding-block: 22px;
  border-top: 1px solid rgba(21, 24, 26, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}
.hm-pr__item:last-child { border-bottom: 1px solid rgba(21, 24, 26, .12); }
/* niente numeri (i principi non sono una sequenza): un LED blu fermo, all'altezza del titolo */
.hm-pr__led { margin-top: .62em; }
.hm-pr__title { font-size: clamp(1.15rem, 1.5vw, 1.35rem); }
.hm-pr__item p { margin-top: 8px; max-width: 38em; color: var(--fg-2); text-wrap: pretty; }

@media (max-width: 860px) {
  .hm-pr__grid { grid-template-columns: minmax(0, 1fr); }
  .hm-pr__item { grid-template-columns: 22px minmax(0, 1fr); gap: 12px; }
}

/* ---------- Stampa: oggetti fermi e leggibili ---------- */
@media print {
  .hm-hero__bg, .hm-screws, .hm-guide__carriage, .hm-bus, .hm-key { display: none !important; }
  .hm-check__panel, .hm-board { border: 1px solid #bbb; background: none !important; break-inside: avoid; }
  .hm-check__meter { position: static; }
  .hm-gauge-wrap { box-shadow: none; }
  .hm-case__spec { background: none !important; }
  .hm-case__spec img { filter: brightness(.25) !important; }
  .hm-case__spec--site::after { display: none; }
  .hm-board__head { grid-template-columns: minmax(0, 1fr); }      /* senza chiave, l'etichetta prende tutta la riga */
  /* in stampa il quadro è sempre acceso, anche se la pagina non è mai arrivata fin lì */
  .hm-board .hm-mod__state,
  .hm-board .hm-board__rule,
  .hm-board .hm-lamp::before,
  .hm-board .hm-lamp b { opacity: 1 !important; }
  .hm-board .hm-lamp { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .hm-board .hm-lamp b { display: none; }
  .hm-mod__state, .hm-board__rule, .hm-hatch { color: #333 !important; }
  .hm-board__rule .hm-board__tag { color: #7A4E14 !important; }    /* ambra scura, leggibile su carta */
  .hm-hatch { background: none !important; box-shadow: none !important; border-color: #999 !important; }
  .hm-mod__icon { background: none !important; box-shadow: inset 0 0 0 1px #bbb !important; }
  .hm-mod__icon img { filter: brightness(.25) !important; opacity: 1 !important; }
  .hm-file__cover, .hm-file__tab { background: #ddd !important; box-shadow: inset 0 0 0 1px #999 !important; }
  .hm-file__stamp { color: #7A4E14 !important; box-shadow: inset 0 0 0 2px #7A4E14 !important; background: none !important; }
  .hm-demo { border-color: #999; }
  .hm-langs i { color: #333; box-shadow: inset 0 0 0 1px #999; background: none; }
}