/* ============================================================================
   HOME — sess.68, BOZZA
   Solo token, `:hover` dentro `@media (hover:hover)`, 4 fasce canoniche.
   ========================================================================= */

.home-page #main {
  max-width: var(--page-max, 1200px);
  margin-inline: auto;
  padding: calc(var(--ds-header-h, 72px) + 18px) clamp(14px, 3vw, 28px) 64px;
}

/* ── banner bozza ─────────────────────────────────────────────────────────
   Stessa famiglia visiva del banner delle pagine prodotto: giallo brand con
   testo nero, leggibile identico in chiaro e in scuro. */
.hm-draft {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 22px;
  padding: 11px 16px;
  border-radius: 10px;
  background: var(--ds-brand-yellow-dark);
  color: #1A1A1A;
  font-size: 13px;
  line-height: 1.4;
}

.hm-draft strong {
  font-family: 'Oswald', system-ui, sans-serif;
  letter-spacing: .06em;
}

/* ── hero ─────────────────────────────────────────────────────────────────
   La foto è una griglia di studio vera: il testo ci sta sopra, quindi serve
   una velatura che garantisca il contrasto senza spegnere l'immagine. */
.hm-hero {
  position: relative;
  margin-bottom: 56px;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
}

.hm-hero__media { display: block; }

.hm-hero__media img {
  display: block;
  width: 100%;
  height: clamp(340px, 52vh, 560px);
  object-fit: cover;
  object-position: center 42%;
}

.hm-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
              rgba(10, 10, 10, .25) 0%,
              rgba(10, 10, 10, .55) 46%,
              rgba(10, 10, 10, .88) 100%);
}

.hm-hero__body {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(20px, 3vw, 40px);
  max-width: var(--misura);
}

/* Sull'hero il testo sta su una foto scura in ENTRAMBI i temi: qui il colore
   NON segue il tema, altrimenti in tema chiaro diventerebbe testo scuro su
   un'immagine scura. È l'eccezione, ed è voluta. */
/* DESIGN-CONTRACT: ConthraxSB solo su codici, sigle, unita' e chip di range.
   «Dal 1982, da Roma» e «In arrivo» non sono nessuna di queste cose: sono
   prosa, e per giunta la PRIMA RIGA che si legge sulla pagina piu' narrativa
   del sito. ⇒ Oswald. E 10px stava sotto il minimo (--ds-fs-xs, 11,2px). */
.hm-hero__eyebrow {
  margin: 0 0 6px;
  font-family: 'Oswald', system-ui, sans-serif;
  font-weight: 500;
  font-size: var(--ds-fs-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ds-brand-yellow-dark);
}

.hm-hero__title {
  margin: 0 0 12px;
  font-family: 'Oswald', system-ui, sans-serif;
  font-size: clamp(30px, 4.6vw, 58px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: .01em;
  color: #F4F3F0;
}

.hm-hero__lead {
  margin: 0 0 20px;
  font-size: clamp(14px, 1.2vw, 17px);
  line-height: 1.55;
  color: rgba(244, 243, 240, .88);
}

.hm-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; }

/* CTA brand: giallo pieno + testo NERO (`feedback_cta_brand_style`). */
.hm-btn {
  display: inline-block;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1px solid rgba(244, 243, 240, .34);
  color: #F4F3F0;
  font-family: 'Oswald', system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
}

.hm-btn--brand {
  background: var(--ds-brand-yellow-dark);
  border-color: var(--ds-brand-yellow-dark);
  color: #1A1A1A;
}

/* ── sezioni ─────────────────────────────────────────────────────────────── */
.hm-section { margin-bottom: 56px; }

.hm-h2 {
  position: relative;
  margin: 0 0 8px;
  padding-left: 16px;
  font-family: 'Oswald', system-ui, sans-serif;
  font-size: clamp(21px, 2.4vw, 30px);
  font-weight: 500;
  color: var(--ds-c-text);
}

.hm-h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0.86em;
  background: linear-gradient(180deg,
              var(--ds-brand-yellow-dark), var(--ds-brand-yellow-light));
}

.hm-sub {
  margin: 0 0 22px;
  padding-left: 16px;
  max-width: var(--misura);
  color: var(--ds-c-text-secondary);
}

/* ── i tre argomenti ─────────────────────────────────────────────────────── */
.hm-three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.hm-arg {
  padding: 22px 22px 24px;
  border-radius: 14px;
  background: var(--ds-c-surface);
  /* Colonna dentro una griglia → accento SOLO sul proprio lato sinistro. */
  box-shadow: inset 3px 0 0 rgba(244, 181, 50, .48);
}

body.ds-dark .hm-arg { box-shadow: inset 3px 0 0 rgba(244, 181, 50, .32); }

.hm-arg h2 {
  margin: 0 0 8px;
  font-family: 'Oswald', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--ds-c-text);
}

.hm-arg p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ds-c-text-secondary);
}

/* ⚠️ 02/09/2026 — la rete di sicurezza orizzontale, e cosa NON e'.
   Tolto lo sbordo del paraluce restavano 8 px di scorrimento: non un bug
   nuovo, e' il `100vw` degli elementi a tutta larghezza (film, fascia), che
   per specifica COMPRENDE la scrollbar verticale mentre il contenuto no.
   ⭐ Questa riga e' una GUARDIA, non la cura: la cura sarebbe non misurare in
   100vw. La tengo perche' 8 px di scorrimento su un widescreen si vedono come
   una pagina che «balla», e perche' chi ricontrolla misura lo scorrimento —
   se resta, sembra che il fix non abbia funzionato.
   `clip` e non `hidden`: non crea un contenitore di scorrimento, quindi
   sticky e le proprieta' guidate dallo scroll del film continuano a valere. */
html{ overflow-x: clip; }

/* ── il prisma in home ───────────────────────────────────────────────────
   Il componente arriva dal megamenu: qui si toglie solo il vestito da
   pannello, perché in pagina non è un menu che si apre. */
.hm-prisma .dsm-col__title { display: none; }
.hm-prisma .dsm-lineup { border-top: 0; padding-top: 0; }

/* ── portfolio ───────────────────────────────────────────────────────────── */
.hm-portfolio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.hm-card {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  background: var(--ds-c-surface);
  text-decoration: none;
  color: var(--ds-c-text);
}

.hm-card img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
}

.hm-card__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px 16px;
}

/* Qui Conthrax RESTA: BBC, SRF, ITV sono sigle, ed e' uno dei quattro usi che
   il contratto ammette. Cambia solo il corpo: 9px era sotto il minimo. */
.hm-card__client {
  font-family: 'ConthraxSB', 'Oswald', system-ui, sans-serif;
  font-size: var(--ds-fs-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ds-c-accent);
}

.hm-card__title {
  font-family: 'Oswald', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.3;
}

.hm-more {
  display: inline-block;
  margin-top: 18px;
  color: var(--ds-c-text);
  font-family: 'Oswald', system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: .06em;
  text-decoration: none;
  border-bottom: 1px solid var(--ds-c-accent-border);
}

/* ── energia ─────────────────────────────────────────────────────────────── */
.hm-energy__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.hm-kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 22px;
  border-radius: 14px;
  background: var(--ds-c-surface);
  box-shadow: inset 3px 0 0 rgba(244, 181, 50, .48);
}

body.ds-dark .hm-kpi { box-shadow: inset 3px 0 0 rgba(244, 181, 50, .32); }

.hm-kpi__n {
  font-family: 'Oswald', system-ui, sans-serif;
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 500;
  color: var(--ds-c-text);
  font-variant-numeric: tabular-nums;
}

.hm-kpi__u {
  font-size: 12.5px;
  color: var(--ds-c-text-tertiary);
}

.hm-energy__note {
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--ds-c-text-tertiary);
}

/* ── Galileo ─────────────────────────────────────────────────────────────── */
.hm-new {
  padding: clamp(22px, 3vw, 38px);
  border-radius: 18px;
  background: var(--ds-c-bg-elevated);
  border: 1px solid var(--ds-c-accent-border);
}

.hm-new__text { max-width: var(--misura); }

.hm-new p {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ds-c-text-secondary);
}

.hm-new .hm-btn--brand { border-color: var(--ds-brand-yellow-dark); }

/* Nel blocco Galileo il testo sta su fondo di pagina, non su foto: qui i
   colori DEVONO seguire il tema, al contrario dell'hero. */
.hm-new .hm-hero__eyebrow { color: var(--ds-c-accent); }

/* ── chi siamo ───────────────────────────────────────────────────────────── */
.hm-about p {
  max-width: var(--misura);
  padding-left: 16px;
  color: var(--ds-c-text-secondary);
  line-height: 1.6;
}

.hm-about .hm-more { margin-left: 16px; }

@media (hover: hover) {
  .hm-btn:hover { border-color: var(--ds-brand-yellow-dark); }
  .hm-btn--brand:hover { background: var(--ds-c-accent-hover); }
  .hm-card:hover { background: var(--ds-c-surface-hover); }
  .hm-more:hover { border-bottom-color: var(--ds-c-accent); }
}

/* ══ FILM HERO — «lo scroll è il fader» (sess.69, BUILDER-HOME) ══════════
   Stili ATTIVI SOLO con la classe `hm-hero--film`, che mette il JS
   (home-film-hero.js) e solo quando film e reduced-motion lo permettono.
   Senza JS, o dopo un teardown, nessuna di queste regole tocca l'hero:
   il markup statico (foto BBC + copy) resta governato dai blocchi sopra.

   Nota sticky: `body{overflow-x:hidden}` del reset PROPAGA al viewport
   (html è `visible`), quindi lo sticky dentro body funziona e il full-bleed
   `100vw` non genera scrollbar orizzontale. */

/* ── GATE ANTI-FOUC (round 3) ─────────────────────────────────────────────
   `html.hm-film-boot` la mette lo script inline in <head> PRIMA del primo
   paint, con gli stessi guard del modulo (mp4 ok, no reduced-motion).
   Cosi' al load si vede subito il poster del film, non la foto BBC che poi
   salta via quando il modulo monta lo stage. `visibility` e non `display`:
   l'immagine resta nel layout e non c'e' scatto quando il film subentra.
   min-height ~schermo: e' la taglia che l'hero avra' col film, cosi' il
   passaggio boot→film non muove la pagina. */
html.hm-film-boot .hm-hero{
  min-height: 100vh;
  min-height: 100svh;
  background: #0A0A0A url("../../video/home/f7-journey-poster.png") center / cover no-repeat;
}
html.hm-film-boot .hm-hero__media img{ visibility: hidden; }
@media (max-width: 1099.98px){
  html.hm-film-boot .hm-hero{
    background-image: url("../../video/home/f7-journey-mobile-poster.png");
  }
}

.hm-hero--film {
  /* La sezione è la pellicola: ~2.8 schermate di corsa per 15 s di film. */
  height: 280vh;
  width: 100vw;
  margin-left: calc(50% - 50vw);   /* full-bleed fuori dal max-width di #main */
  border-radius: 0;
  overflow: visible;               /* `hidden` ucciderebbe lo sticky */
}

/* il velo lineare dell'hero statico non serve: c'è lo scrim radiale */
.hm-hero--film::after { display: none; }

/* la foto BBC resta nel DOM (è il fallback) ma non si vede in film mode */
.hm-hero--film .hm-hero__media { display: none; }

/* `.hm-film__stage` è il wrapper creato dal JS: SENZA `hm-hero--film` non
   ha alcuno stile e i figli si comportano come nel markup statico (è il
   contratto di fallback — per questo qui sotto è sempre col prefisso). */
.hm-hero--film .hm-film__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #0A0A0A;             /* il film parte dal buio: niente flash */
}

.hm-hero--film .hm-film__poster,
.hm-hero--film .hm-film__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;                    /* vince su `img{height:auto}` del reset */
  object-fit: cover;
  object-position: 50% 50%;
}

.hm-hero--film .hm-film__video {
  z-index: 1;
  opacity: 0;                      /* sotto: il poster = frame 0 esatto */
  transition: opacity .35s ease;
}

/* primo `seeked` riuscito → il video ha un frame dipinto, può coprire */
.hm-hero--film[data-film-painted] .hm-film__video { opacity: 1; }

/* La copy è la STESSA del markup (stessi data-i18n): qui solo lo scrim
   radiale dietro il testo — idea #6 del report Cringer: si vela la copy,
   non il frame intero. Colori fissi come nell'hero statico: il testo sta
   su un film scuro in entrambi i temi. */
.hm-hero--film .hm-hero__body {
  padding-top: clamp(60px, 12vh, 140px);
  background: radial-gradient(115% 135% at 12% 100%,
              rgba(8, 8, 8, .78) 0%,
              rgba(8, 8, 8, .50) 42%,
              rgba(8, 8, 8, .18) 64%,
              rgba(8, 8, 8, 0) 78%);
}

/* ══ FASCE ═══════════════════════════════════════════════════════════════ */

/* app — sotto 1100: tutto in colonna. Tre argomenti affiancati a 390 px
   darebbero righe da quattro parole. */
@media (max-width: 1099.98px) {
  .hm-three,
  .hm-portfolio,
  .hm-energy__row { grid-template-columns: 1fr; }
  .hm-hero__media img { height: clamp(280px, 44vh, 380px); }
  .hm-section { margin-bottom: 42px; }
  .hm-btn { padding: 14px 22px; }        /* bersaglio touch */

  /* film hero a 390: corsa più corta (il pollice scrolla più in fretta
     del mouse) e scrim che sale di più perché la copy occupa più schermo */
  .hm-hero--film { height: 240vh; }
  .hm-hero--film .hm-hero__body {
    background: radial-gradient(140% 120% at 30% 100%,
                rgba(8, 8, 8, .82) 0%,
                rgba(8, 8, 8, .55) 48%,
                rgba(8, 8, 8, .2) 70%,
                rgba(8, 8, 8, 0) 84%);
  }

  /* ── MODALITÀ PLAY (round 3 — decisione di David dal collaudo iPhone) ──
     Su iPhone lo scrub non e' mai partito nemmeno col priming del round 2:
     il video si montava (poster visibile) ma currentTime non avanzava.
     «Non possiamo usare lo stesso metodo della index in eu standard?» — si':
     sotto i 1100 il film si SUONA come sulla holding (play vero al primo
     gesto, corre da solo, si ferma sull'ultimo frame) e lo scroll torna a
     fare lo scroll. La classe `hm-film--play` la mette il JS in base alla
     fascia (mqMobile, NO touch-detection). La sezione e' UNA schermata,
     niente sticky: il film sta li' e la pagina prosegue sotto. */
  .hm-hero--film.hm-film--play{ height: 100vh; height: 100svh; }
  .hm-hero--film.hm-film--play .hm-film__stage{
    position: relative;
    height: 100%;
  }

  /* ── L'INQUADRATURA (round 4 — David: «il prodotto e' fuori inquadratura»)
     Il cover del 16:9 in portrait mostra il 26% centrale del frame, e nella
     prima meta' del film l'F7 sta a sinistra del centro: a 50% si vedeva
     mezzo proiettore tagliato. Misurato sui frame estratti dall'encode
     mobile (griglie 30/40/50% nello scratchpad): 0-7 s il soggetto sta
     bene a 40%, dall'orbita in poi a 50%. E' un piano-sequenza (zero
     stacchi rilevati da ffprobe scene-detect): il passaggio e' una
     PANORAMICA dolce che il JS innesca a t≈7,2 s — la transition qui sotto
     e' il movimento. Il poster (frame 0) parte gia' a 40%. */
  .hm-hero--film.hm-film--play .hm-film__poster,
  .hm-hero--film.hm-film--play .hm-film__video{
    object-position: 40% 50%;
    transition: object-position 1.8s ease, opacity .35s ease;
  }

  /* ── V-84② · LE DUE INQUADRATURE — lo switch sta in UNA riga del modulo ───
     `CROP_LOAD` in home-film-hero.js mette `hm-film--crop-a` o `--crop-b`.
     Tutte e due restano scritte: David le vuole entrambe finché non decide.

     A · pieno schermo, nessuna banda — sono le regole qui sopra e basta.
         Il cover di un 16:9 in portrait mostra il 26% del fotogramma e il
         proiettore, largo il 43%, resta tagliato. Misurato, non stimato.

     B · il fotogramma in una fascia alta il 64%: si vede il 40,6% e
         l'apparecchio entra quasi tutto.
         ⭐ «B, ma TAGLIAMO — non mostriamo spazio vuoto sopra/sotto»: la
         fascia e' agganciata IN ALTO, quindi sopra non c'e' niente da
         tagliare (l'immagine parte da sotto l'header), e sotto NON c'e'
         spazio vuoto ma la zona scura dove stanno invito ed eyebrow: la
         maschera sfuma l'immagine dentro quella zona invece di finire con
         un bordo netto. Non e' un letterbox: e' un'immagine che si posa.
     ⚠️ Perche' non esiste una «B a tutto schermo»: per mostrare il 40,6% di
        un 1280×720 riempiendo 390×844 servirebbe un fotogramma alto 1125 px.
        In portrait, vedere di piu' significa rimpicciolire. L'unico modo di
        avere insieme apparecchio intero e zero nero e' un encode nativo in
        verticale del master — lavoro di media, non di CSS. */
  .hm-hero--film.hm-film--play.hm-film--crop-b .hm-film__poster,
  .hm-hero--film.hm-film--play.hm-film--crop-b .hm-film__video{
    top: 0;
    bottom: auto;
    height: 64%;
    object-position: 50% 50%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 84%, rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 84%, rgba(0,0,0,0) 100%);
  }
  /* con la fascia alta il 64% il centro dello stage cade sotto l'immagine:
     l'invito sale a stare sull'apparecchio, dove indica la cosa giusta */
  .hm-hero--film.hm-film--play.hm-film--crop-b .hm-film__hint{ top: 40%; }

  /* ── LA COPY SI RITIRA MENTRE IL FILM SUONA (round 4 — David: «c'e'
     sempre la frase») ── Pre-gesto: poster + copy, come un hero. Al play la
     copy esce e il film resta PULITO; a fine corsa rientra sull'ultimo
     frame, piu' lenta — la stessa grazia del reveal della holding. Il
     payoff «Lighting the Future» resta della giuntura: qui non si doppia. */
  .hm-hero--film.hm-film--play .hm-hero__body{
    transition: opacity .7s ease, transform .7s ease;
  }
  .hm-hero--film.hm-film--play.hm-film--rolling .hm-hero__body{
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
  }
  .hm-hero--film.hm-film--play.hm-film--done .hm-hero__body{
    transition: opacity 1.5s ease .5s, transform 1.5s ease .5s;
  }

  /* ── V-83 · L'INVITO D'ACCENSIONE (David, 03/09: «non si percepisce il
     turn ON — deve apparire SUBITO al caricamento, non dopo») ─────────────
     Anellino che pulsa + una riga sobria, come sulla holding. Compare col
     poster, non dopo: nessun `animation-delay`, nessuna transizione in
     entrata — è già lì al primo paint.
     `hm-film--played` (JS, al primo via) lo spegne, e non lo riaccende più.
     `pointer-events: none`: il tocco deve arrivare al film, non all'invito. */
  /* ⭐ V-85 (David, 08/09): «una pill discreta, NON un ▶ da player».
     La forma non è un vezzo — è la promessa. Un triangolo da player dice
     «qui c'è un video da guardare fino in fondo», ed è esattamente la
     promessa che il film a due tempi toglie di mezzo: il tocco accende la
     luce e basta. Una pill dice «questo si tocca» senza dire quanto dura.
     ⛔ Il velo ellittico di V-84① è stato TOLTO, non dimenticato: era lì
     perché la riga cadeva sulla lente — la zona più chiara del fotogramma —
     e serviva del buio dietro. La superficie della pill fa quel lavoro
     meglio e con un bordo netto invece di una sfumatura di 240 px. Se un
     giorno la pill sparisse, il velo va rimesso o la scritta torna
     illeggibile: era una cura, non una decorazione.
     I colori sono derivati dai token, non inventati:
     fondo = --ds-neutral-900 #0C0C0C · bordo = --ds-brand-yellow-light #F3E955 */
  .hm-hero--film.hm-film--play .hm-film__hint{
    display: inline-flex;
    position: absolute;
    left: 50%;
    top: 50%;
    /* z-index esplicito, lezione della holding: su iOS il <video> si compone
       su un layer proprio e senza questo l'invito finisce SOTTO il film
       (e su Chrome il difetto non si vede). */
    z-index: 5;
    transform: translate(-50%, -50%) translateZ(0);
    flex-direction: row;
    align-items: center;
    gap: 11px;
    padding: 11px 20px 11px 16px;
    border-radius: 999px;
    background: rgba(12, 12, 12, .74);
    border: 1px solid rgba(243, 233, 85, .40);
    box-shadow: 0 8px 26px rgba(0, 0, 0, .50);
    -webkit-backdrop-filter: blur(7px) saturate(120%);
            backdrop-filter: blur(7px) saturate(120%);
    pointer-events: none;
    white-space: nowrap;
    text-align: center;
    opacity: 1;
    transition: opacity .55s ease;
  }
  .hm-hero--film.hm-film--play.hm-film--played .hm-film__hint{ opacity: 0; }

  .hm-film__hint-ring{ position: relative; display: block; width: 15px; height: 15px; flex: 0 0 auto; }
  .hm-film__hint-ring::before,
  .hm-film__hint-ring::after{
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid var(--ds-brand-yellow-light);   /* V-84①: più chiaro e più spesso */
  }
  .hm-film__hint-ring::before{ animation: hm-hint-pulse 2.6s ease-out infinite; }
  .hm-film__hint-ring::after{
    width: 5px; height: 5px;
    inset: auto; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    background: var(--ds-c-accent);
    border: none;
  }
  /* Oswald e non il Michroma della holding: DESIGN-CONTRACT — il ConthraxSB
     è per codici e sigle, questa è prosa. Stesso colore e stessa spaziatura
     dell'eyebrow qui sopra: al load i due si leggono come una cosa sola. */
  /* V-84①: da 11,2 a 12,8px e peso 600. È la prima riga che si legge sulla
     home mobile: il minimo del DESIGN-CONTRACT è un pavimento, non una
     misura da usare dove il testo deve FARSI VEDERE. Il text-shadow è la
     seconda rete, per il frame vivo del video quando il velo non basta. */
  .hm-film__hint-text{
    font-family: 'Oswald', system-ui, sans-serif;
    font-weight: 600;
    font-size: var(--ds-fs-sm);
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--ds-brand-yellow-light);
    text-shadow: 0 1px 10px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.75);
    padding-left: .28em;                /* compensa il letter-spacing finale */
  }

  /* ══ ⭐ V-85 · L'INVITO A SCORRERE — «finito il primo tempo, di qui si va» ══
     David (08/09): il film che partiva e non si fermava lasciava una domanda
     senza risposta — «devo guardare o proseguire?». Ora il primo tempo
     finisce sul proiettore acceso e questa freccia risponde.
     Sta IN BASSO e fuori dall'inquadratura (la fascia crop-b arriva al 64%):
     indica la pagina, non il film. `pointer-events: none` perché sopra ci
     deve passare sia il dito che scorre sia il tocco che chiede il seguito.
     Colori dai token: --ds-brand-yellow-light per il segno, il resto è nero. */
  /* ⚠️⚠️ NON ANCORARE QUESTA FRECCIA AL `bottom` DELLO STAGE — misurato,
     non temuto. Primo tentativo: `bottom: 16px`. `getComputedStyle` diceva
     opacity 1 e visibility visible, e il collaudo passava; lo screenshot
     mostrava il vuoto. Lo stage e' alto 100svh ma NON parte da 0: sopra ci
     sono l'header fisso e (oggi) il banner BOZZA, ~195 px a 390. Quindi il
     suo bordo inferiore cade 195 px SOTTO la piega, e con lui la freccia.
     Lo strumento rispondeva a un'altra domanda: «e' dipinta?» non «si
     vede?». ⇒ Si ancora dall'ALTO, in percentuale, cosi' l'offset di
     partenza non entra nel conto: 68% sta appena sotto la fascia del film
     (che in crop-b finisce al 64%) e resta dentro lo schermo sia col banner
     sia senza. E «sotto l'immagine» e' anche il punto che David ha chiesto:
     l'invito indica la pagina, non il proiettore. */
  .hm-hero--film.hm-film--play .hm-film__go{
    display: flex;
    position: absolute;
    left: 50%;
    top: 68%;
    bottom: auto;
    z-index: 5;
    transform: translateX(-50%) translateZ(0);
    flex-direction: column;
    align-items: center;
    gap: 7px;
    pointer-events: none;
    /* nasce spento e non occupa niente: esiste solo quando la luce è accesa */
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease, visibility 0s linear .5s;
  }
  .hm-hero--film.hm-film--play.hm-film--acceso .hm-film__go{
    opacity: 1;
    visibility: visible;
    transition: opacity .5s ease .25s, visibility 0s;
  }
  .hm-film__go-txt{
    font-family: 'Oswald', system-ui, sans-serif;
    font-weight: 500;
    font-size: var(--ds-fs-xs, 11px);
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--ds-brand-yellow-light);
    text-shadow: 0 1px 10px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.75);
    padding-left: .26em;                /* compensa il letter-spacing finale */
    opacity: .82;                       /* discreto: la scena resta il film */
  }
  .hm-film__go-arrow{
    display: block;
    width: 22px;
    height: 13px;
    color: var(--ds-brand-yellow-light);
    filter: drop-shadow(0 1px 6px rgba(0,0,0,.85));
  }

  /* ⛔ PULSA UNA VOLTA SOLA — `1` e non `infinite`, ed è la regola, non una
     svista. Un movimento che continua chiede attenzione, e qui l'attenzione
     la deve prendere la pagina sotto: la freccia dà un colpo e poi sta
     ferma. (L'anellino della pill pulsa all'infinito perché lì l'attenzione
     la vogliamo davvero: è l'unica cosa che c'è da fare.)
     `both` tiene il fotogramma finale: nessun salto a fine animazione. */
  .hm-hero--film.hm-film--play.hm-film--acceso .hm-film__go-arrow{
    animation: hm-go-nudge 1.5s ease-out .55s 1 both;
  }
  @keyframes hm-go-nudge{
    0%   { transform: translateY(0);    opacity: .55; }
    35%  { transform: translateY(5px);  opacity: 1; }
    70%  { transform: translateY(0);    opacity: .9; }
    100% { transform: translateY(0);    opacity: .9; }
  }

  /* Chi ha chiesto meno movimento non lo riceve nemmeno qui. In pratica il
     modulo del film non parte affatto sotto `prefers-reduced-motion` (esce
     in `init`), quindi questa regola oggi non ha nulla da spegnere: sta qui
     perché la freccia non deve dipendere da quella coincidenza per essere
     corretta. La freccia resta, ferma e visibile. */
  @media (prefers-reduced-motion: reduce){
    .hm-hero--film.hm-film--play.hm-film--acceso .hm-film__go-arrow{
      animation: none;
      opacity: .9;
    }
    .hm-film__hint-ring::before{ animation: none; }
  }

  /* ── V-83b · IL PALCO PULITO AL LOAD (approvato da David, 03/09 h21:01) ──
     «La luce degli studi televisivi» è bocciata (02/09, «banalotta») e il
     titolo sostitutivo non è ancora arrivato: finché non c'è, sulla
     schermata di load NON si mostra. Restano l'eyebrow «DAL 1982, DA ROMA»
     e l'invito — il resto della copy entra a fine film, come già fa.
     ⚠️ `opacity` e non `display`: il blocco resta nel layout, così quando la
     copy rientra sull'ultimo frame non si sposta niente e soprattutto
     l'eyebrow non salta via dal punto in cui l'utente l'ha appena vista.
     ⚠️ Vale SOLO prima del primo via (`:not(.hm-film--played)`): dopo, il
     titolo è di nuovo parte della copy e la governa `hm-film--rolling` /
     `hm-film--done` come nel round 4. */
  .hm-hero--film.hm-film--play .hm-hero__title,
  .hm-hero--film.hm-film--play .hm-hero__lead,
  .hm-hero--film.hm-film--play .hm-hero__cta{
    transition: opacity 1.1s ease, transform 1.1s ease;
  }
  .hm-hero--film.hm-film--play:not(.hm-film--played) .hm-hero__title,
  .hm-hero--film.hm-film--play:not(.hm-film--played) .hm-hero__lead,
  .hm-hero--film.hm-film--play:not(.hm-film--played) .hm-hero__cta{
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
  }

  /* ── V-84① · L'EYEBROW AL LOAD ────────────────────────────────────────────
     Col titolo tolto, «DAL 1982, DA ROMA» resta da sola in fondo — ed è la
     riga più piccola della pagina su un fotogramma che lì sotto non è nero.
     ⇒ Due leve, e NESSUNA delle due è la dimensione: peso 600 e ombra sul
     testo, più il velo del corpo copy che si chiude.
     ⚠️ Il `font-size` NON si tocca di proposito: cambiarlo qui alzerebbe il
     blocco di un paio di px, e a fine film la riga SALTEREBBE dal punto in
     cui l'utente l'ha appena vista — che è esattamente quello che V-83b
     evitava nascondendo con `opacity` invece che con `display`. */
  .hm-hero--film.hm-film--play:not(.hm-film--played) .hm-hero__eyebrow{
    font-weight: 600;
    color: var(--ds-brand-yellow-light);
    text-shadow: 0 1px 10px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.75);
  }
  /* il velo del corpo copy si chiude: al load non deve reggere un paragrafo,
     deve reggere UNA riga — e può permettersi di essere più deciso */
  .hm-hero--film.hm-film--play:not(.hm-film--played) .hm-hero__body{
    background: radial-gradient(150% 125% at 30% 100%,
                rgba(6, 6, 8, .92) 0%,
                rgba(6, 6, 8, .74) 42%,
                rgba(6, 6, 8, .34) 68%,
                rgba(6, 6, 8, 0) 88%);
  }
}

/* compact-narrow — 1100-1399: due colonne, respiro intermedio. */
@media (min-width: 1100px) and (max-width: 1399.98px) {
  .hm-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* wide — da 1850 in su: più aria, come chiede brief_menu_architecture. */
@media (min-width: 1850px) {
  .home-page #main { max-width: var(--page-max-largo); }
  .hm-section { margin-bottom: 72px; }
  .hm-card img { height: 220px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA GIUNTURA — V-76 (David, 02/09: «parte bene poi si spezza»)
   ───────────────────────────────────────────────────────────────────────────
   Diagnosi misurata: il film NON finiva. Opacità 1 e nessun filtro lungo
   tutta la corsa, poi lo stage sticky si s-incolla e scivola fuori a piena
   luce. E nella stessa riga di pixel cambiavano TRE cose insieme — immagine
   piena → nero, calda → neutra, a tutto schermo → tre card in 1200px. Tre
   variabili nello stesso istante non si leggono come un passaggio: si
   leggono come due pagine incollate.
   ⇒ Decisione di David: A+B insieme. A = l'ultima inquadratura si deposita.
   B = la riga di chiusura col payoff storico, e i tre argomenti diventano
   una fascia col ritmo del resto del sito.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── A · la coda: il film perde luce e si posa ───────────────────────────── */
.hm-hero--film .hm-film__stage{
  /* `--film-coda` la scrive il JS: 0 fino a due terzi, poi sale a 1.
     Non si spegne del tutto: sotto lo 0,55 di luminosità l'immagine
     diventa una macchia grigia, e una macchia non è una chiusura. */
  filter:
    saturate(calc(1 - 0.5 * var(--film-dim, 0)))
    brightness(calc(1 - 0.42 * var(--film-dim, 0)));
  transition: filter .12s linear;
}

/* ⭐ LA COPY CEDE IL POSTO AL PAYOFF, e non e' un effetto: nella prima
   stesura il payoff compariva SOPRA il titolo dell'hero e i due testi si
   attraversavano. Il gesto giusto e' un passaggio di consegne — mentre il
   film si posa, la copy si ritira e il marchio prende il centro. Cosi' la
   chiusura ha un solo protagonista, che e' quello che una chiusura fa. */
.hm-hero--film .hm-hero__body{
  opacity: calc(1 - var(--film-coda, 0));
  transform: translateY(calc(-18px * var(--film-coda, 0)));
  transition: opacity .12s linear, transform .12s linear;
}
.hm-hero--film .hm-hero__body[style],
.hm-hero--film .hm-hero__body{ pointer-events: auto; }

/* ── B · il payoff, sull'ultima inquadratura ─────────────────────────────── */
.hm-film__payoff{
  position: absolute;
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 0 24px;
  opacity: var(--film-coda, 0);
  transform: translateY(calc(-50% + 16px * (1 - var(--film-coda, 0))));
  transition: opacity .12s linear, transform .12s linear;
  pointer-events: none;
  z-index: 4;
}
/* ⚠️ Serve un velo: la riga cadeva sul centro luminoso della lente, bianco
   su bianco, e a meta' dissolvenza spariva. Il velo e' largo e sfumato, non
   un rettangolo: chiude la luce quel tanto che basta a leggere. */
.hm-film__payoff::before{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  height: 148%;
  /* ⚠️ FASCIA ORIZZONTALE, non ellisse — e ci sono arrivato sbagliando due
     volte. L'ellisse funzionava a 1680 e a 390 diventava un disco scuro
     visibile; ma il difetto vero era un altro: a 390 il film e' su un
     FOTOGRAMMA DIVERSO, col centro scuro e l'anello chiaro proprio dove
     cade la riga. Un velo tarato su un fotogramma non regge gli altri.
     ⇒ Una fascia che attraversa tutta la larghezza e sfuma sopra e sotto
     copre il testo qualunque cosa ci sia dietro: sul chiaro lo spegne, sullo
     scuro sparisce. E' anche la convenzione del lower third televisivo, che
     su un sito di luci per broadcast non e' un caso. */
  background: linear-gradient(180deg,
              rgba(6,6,8,0) 0%,
              rgba(6,6,8,.58) 26%,
              rgba(6,6,8,.66) 50%,
              rgba(6,6,8,.58) 74%,
              rgba(6,6,8,0) 100%);
  z-index: -1;
  pointer-events: none;
}
.hm-film__payoff-txt{
  font-family: 'Oswald', system-ui, sans-serif;
  font-weight: 300;                 /* è un payoff, non un titolo: sobrio */
  font-size: clamp(24px, 4.2vw, 60px);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #F3F1EC;
  text-shadow: 0 2px 22px rgba(0,0,0,.55);
  text-align: center;
  line-height: 1.1;
}
/* il filo oro: largo quanto la riga, non quanto lo schermo — chiude la
   frase, non taglia la pagina */
.hm-film__payoff::after{
  content: "";
  display: block;
  width: min(420px, 62vw);
  height: 2px;
  background: linear-gradient(90deg,
              rgba(244,181,50,0) 0%,
              var(--brand, #F4B532) 22%,
              var(--brand, #F4B532) 78%,
              rgba(244,181,50,0) 100%);
}

/* ── V-83 · L'INVITO D'ACCENSIONE — l'anellino della holding ───────────────
   Il markup lo crea il JS (`home-film-hero.js`), ma esiste SOLO nella
   modalità play della fascia app: sul desktop il film si scrubba con lo
   scroll e non c'è nessun interruttore da indicare. ⇒ Qui è spento per
   default e lo accende il blocco `@media (max-width: 1099.98px)` più su.
   ⚠️ Senza questa riga i due span cadrebbero nello stage come testo nudo
   anche in scrub mode: `.hm-film__hint` non ha nessun'altra regola globale. */
.hm-film__hint{ display: none; }
/* V-85: stessa identica ragione per l'invito a scorrere. Sopra i 1100 il
   film lo comanda lo scroll — non c'è nessun «primo tempo» da chiudere e
   quindi niente da annunciare. Il `display:none` della fascia app sta già
   nel blocco @media qui sopra; questo è il default per tutte le altre. */
.hm-film__go{ display: none; }

/* La pulsazione: identica a quella della holding (`_deploy_holding`), che è
   la cosa che sul telefono di David si legge come «toccami». Nome col
   prefisso `hm-` perché le keyframes hanno UN SOLO spazio dei nomi in tutto
   il documento, e questo file convive con gli altri CSS del sito. */
@keyframes hm-hint-pulse{
  0%   { transform: scale(1);   opacity: .9; }
  70%  { transform: scale(3.2); opacity: 0; }
  100% { transform: scale(3.2); opacity: 0; }
}

/* ── B · i tre argomenti: fascia a tutta larghezza ───────────────────────── */
body.hm-has-film .hm-three{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);     /* stesso sconfinamento del film */
  /* ⭐ ROUND 2 (David: «sembra un cambio netto di stile, manca armonia»).
     La fascia NASCE DENTRO L'ULTIMA LUCE invece che sotto: risale di 150 px
     sopra la fine del film e si riprende quello spazio come padding, cosi'
     il contenuto non si muove ma il fondo della fascia entra nell'inquadratura.
     Prima c'erano 56 px di nero vuoto piu' 78 di padding — 134 px in cui non
     succedeva niente, ed e' li' che l'occhio leggeva «finita una pagina, ne
     comincia un'altra». */
  margin-top: -150px;
  padding: calc(clamp(40px, 6vw, 78px) + 150px) clamp(20px, 5vw, 64px) clamp(34px, 5vw, 60px);
  margin-bottom: 56px;
  gap: clamp(18px, 2.4vw, 34px);
  z-index: 1;
  /* ⚠️ 02/09/2026 — lo sbordo del paraluce VUOLE uscire dal bordo destro, ma
     uscire dal bordo e uscire dal DOCUMENTO sono due cose diverse: a 2000 px
     la pagina scorreva di 699 px in orizzontale, e chi la apriva larga si
     trovava mezzo catalogo spinto fuori dallo schermo.
     ⭐ `body{overflow-x:hidden}` c'e' gia' e NON bastava: la sua propagazione
     al viewport qui non avviene, e la pagina scorre lo stesso — verificato
     scrollando davvero (window.scrollTo -> scrollLeft 699), non deducendolo
     dal fatto che la regola fosse scritta.
     `clip` e non `hidden`: `hidden` su un asse rende l'altro scrollabile e ci
     porterebbe via lo sbordo VERTICALE, che invece serve. Cosi' la bandiera
     esce dallo schermo come deve e non si porta dietro la pagina. */
  overflow-x: clip;
  overflow-y: visible;
}
/* Il velo caldo: la temperatura del film non finisce di colpo, scende dentro
   la fascia e si spegne verso il fondo pagina. E' il pezzo che mancava —
   prima cambiavano insieme luce, colore e larghezza; ora il colore fa da
   ponte mentre gli altri due si sono gia' calmati. */
body.hm-has-film .hm-three::after{
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 62%;
  /* ⚠️ Il velo NON parte al massimo dal bordo: a piena forza sulla prima
     riga di pixel disegna un gradino, che e' la stessa cucitura di prima con
     un altro nome. Sale da zero nei primi punti e poi si spegne. */
  background:
    linear-gradient(180deg,
      rgba(244,181,50,0) 0%,
      rgba(244,181,50,.055) 14%,
      rgba(244,181,50,.030) 44%,
      rgba(244,181,50,0) 100%),
    linear-gradient(180deg,
      rgba(12,12,12,0) 0%,
      rgba(12,12,12,.34) 16%,
      rgba(12,12,12,0) 82%);
  pointer-events: none;
  z-index: -1;
}
/* ⛔ QUI NON VA UN FILO. Avevo messo una riga oro in testa alla fascia
   pensandola come rima del filo che chiude il payoff. Guardata in pagina fa
   il contrario: su una giuntura che deve sparire, una linea orizzontale e'
   una CUCITURA — segna il punto invece di scioglierlo. La rima tipografica
   resta (spaziatura e peso dei titoli), la linea no. */
/* ⭐ L'ALONE: l'ultima inquadratura non sparisce, resta sotto la fascia.
   È il ponte — le card salgono DENTRO l'immagine invece di apparire sul
   nero. Bassissima di proposito: sopra il 10% comincia a disturbare la
   lettura, ed è testo tecnico. */
body.hm-has-film .hm-three::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--hm-poster, none);
  background-size: cover;
  background-position: center 38%;
  /* Piu' presente in alto e sfumato molto piu' a lungo: prima si spegneva al
     42% e la meta' bassa della fascia tornava nera di colpo. */
  opacity: .11;
  filter: saturate(.42) blur(1px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, rgba(0,0,0,.35) 66%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 30%, rgba(0,0,0,.35) 66%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}
body.hm-has-film .hm-arg{ position: relative; }

@media (max-width: 1099.98px){
  /* Sul telefono la fascia non deve diventare un muro: meno respiro sopra e
     alone più corto, perché la colonna singola lo attraverserebbe tutto. */
  body.hm-has-film .hm-three{ padding-top: clamp(28px, 7vw, 44px); }
  body.hm-has-film .hm-three::before{
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 26%, transparent 82%);
            mask-image: linear-gradient(180deg, #000 0%, #000 26%, transparent 82%);
  }
  .hm-film__payoff{ bottom: clamp(96px, 18vh, 150px); }
  .hm-film__payoff-txt{ letter-spacing: .12em; }
}

/* ── Il ponte tipografico ─────────────────────────────────────────────────
   Il payoff e' Oswald 300 maiuscolo, spaziato 9,6 px; i titoli delle card
   erano Oswald 500, spaziatura normale, minuscolo. Fra i due non c'era
   nessuna parentela: il salto di registro e' meta' del «cambio di stile»
   che David vede.
   ⚠️ Non si ridisegnano le card — si mette una spaziatura appena percettibile
   e un peso un filo piu' leggero, che e' quanto basta perche' le due
   tipografie si riconoscano. Piu' di cosi' e le card diventano un titolo. */
body.hm-has-film .hm-arg h2{
  font-weight: 400;
  letter-spacing: .028em;
}

/* ── IL PARALUCE CHE SBORDA — idea di David, mock ─────────────────────────
   «Se il paraluce sbordasse sul resto quando inizia ad apparire e poi si
   ritirasse?» ⇒ Un pezzo del mondo-film che ROMPE il confine di sezione:
   entra sopra la fascia mentre lei appare, e se ne va.
   ⚠️ Deve sembrare LA COSA DEL FILM che invade, non uno sticker appiccicato:
   per questo è grande, esce dal bordo (non sta comodo dentro la pagina),
   porta un'ombra sulla fascia e ha la stessa luce fredda dell'inquadratura
   spenta — non il nero pieno del cut-out da catalogo.
   📌 MOCK: geometria e tempi sono da tarare con David guardando. Il render
   dedicato (sola bandiera, posa coerente con l'ultima inquadratura) è la
   versione buona; questo è il cut-out di catalogo, che serve a decidere SE
   il gesto funziona. */
.hm-seam-flag{
  position: absolute;
  /* ⚠️ SFIORA, non copre. Nel primo mock entrava tutto l'apparecchio e
     copriva il testo della terza card: si leggeva come una foto caduta
     sopra la pagina, non come qualcosa che sborda. Spinto fuori dal bordo,
     entra solo la bandiera — che e' poi la cosa che David ha nominato. */
  top: -20%;
  right: -26%;
  width: clamp(320px, 40vw, 700px);
  pointer-events: none;
  z-index: 3;
  /* andata e ritorno: entra sbordando, poi si ritira */
  opacity: calc(0.10 + 0.62 * var(--seam-pass, 0));
  transform:
    translate3d(calc(22% - 26% * var(--seam-pass, 0)),
                calc(-10% + 8% * var(--seam-pass, 0)), 0)
    rotate(calc(-6deg + 4deg * var(--seam-pass, 0)))
    scale(calc(0.96 + 0.07 * var(--seam-pass, 0)));
  transition: opacity .1s linear, transform .1s linear;
  will-change: transform, opacity;
}
.hm-seam-flag img{
  display: block;
  width: 100%;
  height: auto;
  /* la luce dell'ultima inquadratura: spenta e fredda, non il nero da
     catalogo — se resta «da e-commerce» si legge come sticker */
  filter:
    brightness(.72) contrast(1.06) saturate(.55)
    drop-shadow(-18px 26px 42px rgba(0,0,0,.55));
}

/* ⛔ SOTTO I 1100 IL GESTO NON C'E' — deciso il 02/09 guardando il render
   WebKit a 390 (engine di Safari), dopo DUE tentativi di ridurlo/schiarirlo.
   A 390 restano ~98px di una sagoma scura su un fotogramma scuro: non si
   riconosce cos'e' (si legge come una macchia) e nel passaggio attraversa la
   colonna del testo. In piu' su iPhone e' stato visto ORFANO — fermo, mezzo
   fuori schermo — quando il film moriva e il teardown lo lasciava li'.
   Regola di David: «una cosa fuori posto e' peggio di una cosa che non c'e'».
   Il paraluce che sborda resta un gesto da schermo largo (>=1100). */
@media (max-width: 1099.98px){
  body.ds-vp-app .hm-seam-flag,
  .hm-seam-flag{ display: none; }
}

/* Chi ha chiesto meno movimento non deve vedere niente che si muove. */
@media (prefers-reduced-motion: reduce){
  .hm-seam-flag{ display: none; }
}

/* ── Il beat retrofit (02/09, al posto del contatore energia) ─────────────
   Il contatore erano tre cifre grandi; questo è prosa. La sezione ha una
   forma sua — non eredita la griglia dei KPI, che senza numeri resterebbe
   una griglia vuota. Stessa impaginazione del blocco Galileo, che è l'altro
   punto della home in cui si racconta invece di elencare. */
.hm-retrofit{ max-width: var(--misura); }
.hm-retrofit p:not(.hm-hero__eyebrow){
  margin: 0;
  padding-left: 16px;                 /* allineato al filo del titolo */
  font-size: 15px;
  line-height: 1.62;
  color: var(--ds-c-text-secondary);
}
.hm-retrofit .hm-hero__eyebrow{ color: var(--ds-c-accent); }

/* ── Le card della fascia devono reggere QUALUNQUE fotogramma ─────────────
   ⚠️ `.hm-arg` ha `background: var(--ds-c-surface)`, che in dark vale
   rgba(255,255,255,.05): praticamente trasparente. Con l'alone dietro, il
   testo si leggeva bene sui fotogrammi scuri e male su quelli chiari — e
   quale fotogramma ci sia dipende da dove si e' fermato lo scroll.
   🔑 E' lo stesso errore del velo dietro il payoff: un valore tarato su UN
   fotogramma non regge gli altri. La cura e' la stessa — non tarare meglio,
   ma togliere la dipendenza: la card porta il proprio fondo, e l'alone resta
   INTORNO invece che ATTRAVERSO. Il ponte visivo non si perde: si vede fra
   una card e l'altra, che e' dove serve.
   📌 Non e' opaco al 100%: un filo di trasparenza tiene la profondita'. */
body.hm-has-film .hm-arg{
  background: rgba(16, 15, 14, .88);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}