/* ==========================================================================
   ESTRO · Landing "Agenzia di comunicazione a Milano" — RACCORDO
   --------------------------------------------------------------------------
   File CSS dedicato alla versione di raccordo (hero con proposta + modulo,
   loghi in griglia, 3 card, 3 casi, metodo, FAQ, chiusura).

   Non modifica lo stile del sito: tutte le regole sono scoped su
   body.acm-page e usano il prefisso .acm- / le variabili --acm-*.
   Palette, font e riprese di materiale dalla pagina pubblica sono invariati:
   questo file NON sostituisce landing-agenzia-comunicazione.css, che resta
   intatto in _originale/ per il confronto.

   ── CONTRATTO DI TRACKING (lo rispetta anche il JS) ────────────────────
   · La CTA primaria NON usa la classe `estro-eva-cta` e NON sta dentro
     un contenitore `.acm-btnrow`: js/eva-chat.js (condiviso, non modificato)
     elimina le `.acm-btn--primary` dentro `.acm-btnrow` e riscrive l'etichetta
     dei `.estro-eva-cta`. Qui la primaria porta al modulo e deve restare.
   · La CTA secondaria dichiara `data-estro-open-eva`: è il selettore che il
     condiviso usa per aprire la chat, ed è l'unico modo lecito di aprirla.

   ── CONTRASTO (misurato, non stimato) ───────────────────────────────────
   · #DB005A su nero = 4,16:1 → solo testo grande. Per testo piccolo su
     fondi scuri si usa #E8337E (5,21:1).
   · #DB005A su #F4F4F5 = 4,66:1 e su bianco = 5,05:1 → OK anche per testo
     piccolo. Su fondi chiari #E8337E scende a 3,70:1: qui non si usa.
   · #E8337E su fondi chiari non va usato; #DB005A su fondi scuri neppure.
   · Sul fucsia il testo è bianco pieno (5,05:1): il traslucido scendeva
     a 4,24:1, sotto la soglia AA.

   ── IL SISTEMA (secondo giro di design, 31/10/2026) ────────────────────
   Un unico ritmo per tutta la pagina:
     · una scala tipografica sola (--acm-fs-*) con l'H1 sempre più grande
       di ogni H2: prima l'H1 (44px) era più piccolo degli H2 (73,6px);
     · una scala di spaziature sola (--acm-s-*);
     · un solo linguaggio di bordi e raggi (--acm-r-*, --acm-hair-*);
     · il fucsia pieno è razionato: CTA, scheda attiva, occhielli, punti
       elenco. Nient'altro di pieno.
   ========================================================================== */

/* ─── FONT ───────────────────────────────────────────────────────────────
   Stessa scelta del sito pubblico: "Special Gothic Expanded One" con
   display=block (il fallback ha metriche diverse e con swap il titolo
   cambierebbe larghezza) e DM Sans. I <link> sono nell'head dell'HTML:
   i due stylesheet viaggiano in parallelo invece che in cascata. */
@font-face {
  font-family: 'TitleFallback';
  src: local('Impact'), local('Haettenschweiler'), local('Arial Narrow Bold');
  size-adjust: 158.5%;
  font-weight: 100 900;
  font-style: normal;
}

/* ─── TOKEN ────────────────────────────────────────────────────────────── */
body.acm-page {
  /* colore */
  --acm-black:    #000000;
  --acm-white:    #FFFFFF;
  --acm-surface:  #F4F4F5;
  --acm-surface2: #E7E7E9;
  --acm-panel:    #121216;
  --acm-primary:  #DB005A;
  --acm-primary-hover: #E10A63;
  /* Variante del fucsia per TESTO PICCOLO su fondo scuro (5,21:1 su nero).
     Solo su fondi scuri. */
  --acm-primary-ink: #E8337E;
  --acm-primary-tint: rgba(219, 0, 90, 0.12);

  /* testo */
  --acm-text:          #FFFFFF;
  --acm-text-dim:      rgba(255,255,255,0.72);
  --acm-text-faint:    rgba(255,255,255,0.54);
  --acm-text-dark:     #0B0B0C;
  --acm-text-dark-dim: rgba(11,11,12,0.70);
  --acm-text-dark-faint: rgba(11,11,12,0.52);

  /* filetti: un solo spessore, due opacità (scuro / chiaro) */
  --acm-hair-dark:  rgba(255,255,255,0.11);
  --acm-hair-light: rgba(11,11,12,0.13);

  /* raggi */
  --acm-r-xs: 8px;
  --acm-r-sm: 12px;
  --acm-r-md: 16px;
  --acm-r-lg: 22px;
  --acm-r-pill: 999px;

  /* ritmo */
  --acm-s-1: .25rem;  --acm-s-2: .5rem;   --acm-s-3: .75rem;
  --acm-s-4: 1rem;    --acm-s-5: 1.5rem;  --acm-s-6: 2rem;
  --acm-s-7: 3rem;    --acm-s-8: 4.5rem;  --acm-s-9: 6.5rem;

  /* misure */
  --acm-gutter: clamp(1.25rem, 5vw, 5rem);
  --acm-maxw: 1400px;
  --acm-measure: 62ch;
  --acm-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* ── SCALA TIPOGRAFICA (unica per tutta la pagina) ─────────────────────
     L'ordine è gerarchico: display > h2 > h3 > titolo > testo.
     L'H1 della hero è il corpo più grande della pagina. */
  --acm-fs-display: clamp(2rem, 4.4vw, 2.75rem);   /* H1 hero      → 44px */
  --acm-fs-h2:      clamp(1.75rem, 3.2vw, 2.35rem); /* H2 sezione  → 37,6px */
  --acm-fs-h3:      clamp(1.15rem, 1.7vw, 1.45rem); /* H3          → 23,2px */
  --acm-fs-title:   clamp(1.25rem, 1.9vw, 1.7rem);  /* titolo caso → 27,2px */
  --acm-fs-lede:    clamp(1.02rem, 1.22vw, 1.14rem);
  --acm-fs-body:    0.9688rem;
  --acm-fs-sm:      0.875rem;
  --acm-fs-xs:      0.8125rem;
  --acm-fs-micro:   0.6875rem;
}

/* ─── RESET LOCALE ─────────────────────────────────────────────────────── */
html:has(> body.acm-page) { overflow-x: hidden; }
body.acm-page {
  margin: 0;
  background: var(--acm-black);
  color: var(--acm-text);
  font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.acm-page *,
body.acm-page *::before,
body.acm-page *::after { box-sizing: border-box; }
body.acm-page h1, body.acm-page h2, body.acm-page h3, body.acm-page h4 {
  font-family: 'Special Gothic Expanded One', 'TitleFallback', 'Impact', sans-serif;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0;
  line-height: 0.96;
  letter-spacing: -0.01em;
}
body.acm-page p { margin: 0; text-wrap: pretty; }
body.acm-page ul { list-style: none; margin: 0; padding: 0; }
body.acm-page img { display: block; max-width: 100%; }
body.acm-page a { color: inherit; text-decoration: none; }
/* `body.acm-page a` (0,1,2) vince su `.acm-btn--primary` (0,1,0): senza questa
   riga la CTA primaria nelle sezioni chiare erediterbbe il colore del testo
   di sezione (nero su fucsia, 3,9:1). */
body.acm-page a.acm-btn--primary { color: var(--acm-white); }
body.acm-page button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

body.acm-page :focus-visible {
  outline: 2px solid var(--acm-primary-ink);
  outline-offset: 3px;
  border-radius: var(--acm-r-xs);
}
/* Sul fucsia il contorno magenta sparirebbe: li si rende bianco. */
.acm-magenta :focus-visible { outline-color: #FFFFFF; }
body.acm-page ::selection { background: var(--acm-primary); color: #fff; }

/* ─── SALTA AL MODULO ──────────────────────────────────────────────────── */
.acm-skip {
  position: absolute;
  left: 1rem;
  top: -120px;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1.2rem;
  background: var(--acm-primary);
  color: #fff;
  font-size: var(--acm-fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: var(--acm-r-pill);
  transition: top .2s var(--acm-ease);
}
.acm-skip:focus { top: 1rem; }

/* ─── LAYOUT ───────────────────────────────────────────────────────────── */
.acm-wrap {
  width: 100%;
  max-width: var(--acm-maxw);
  margin-inline: auto;
  padding-inline: var(--acm-gutter);
}
.acm-section { padding-block: clamp(3.5rem, 6.5vw, 6rem); position: relative; overflow: clip; }
.acm-light { background: var(--acm-surface); color: var(--acm-text-dark); }
.acm-light .acm-eyebrow { color: var(--acm-primary); }
.acm-light .acm-lede { color: var(--acm-text-dark-dim); }
.acm-magenta { background: var(--acm-primary); color: var(--acm-white); }

/* I collegamenti interni devono fermarsi SOPRA la barra fissa, non
   sotto: il click è gestito dal JS, ma se si arriva con l'indirizzo
   #contatto già nella barra è il browser a scorrere, e lo scroll-margin
   gli lascia lo spazio giusto.
   L'altezza dell'header è misurata dal JS (--acm-header-h): cambia da
   telefono a desktop, così come la barra di anteprima. */
body.acm-page section[id],
body.acm-page #contatto {
  scroll-margin-top: calc(var(--acm-header-h, 5rem) + var(--acm-banner-h, 0px) + 1rem);
}

.acm-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ─── TIPOGRAFIA ───────────────────────────────────────────────────────── */
.acm-eyebrow {
  display: inline-block;
  font-size: var(--acm-fs-micro);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--acm-primary-ink);
  margin: 0 0 var(--acm-s-4);
}
.acm-eyebrow--light { color: rgba(255,255,255,0.78); }
.acm-light .acm-eyebrow--light { color: var(--acm-primary); }
/* Le parole dell'occhiello non si staccano mai dal separatore: su mobile
   il punto non deve trovarsi da solo a capo. */
.acm-eyebrow span { white-space: nowrap; }

/* Il "kicker": occhiello + filetto che prosegue fino al bordo del contenuto.
   È il motivo ricorrente che tiene insieme le quattro sezioni. */
.acm-kicker {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--acm-s-4);
  margin: 0 0 var(--acm-s-5);
  width: 100%;
}
.acm-kicker::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--acm-hair-dark);
}
.acm-light .acm-kicker::after { background: var(--acm-hair-light); }

.acm-h2 {
  font-size: var(--acm-fs-h2);
  margin: 0 0 var(--acm-s-4);
}
.acm-h2 em { font-style: normal; color: var(--acm-primary); }
.acm-light .acm-h2 em { color: var(--acm-primary); }
.acm-magenta .acm-h2 em { color: #FFFFFF; }

.acm-h3 { font-size: var(--acm-fs-h3); line-height: 1.05; }

/* META SCRITTURA: il grasso dentro i titoli.
   "Special Gothic Expanded One" ha un solo peso (400): il font-weight 700
   produrrebbe un faux-bold slabbrato. Il grasso è costruito con un tratto
   dello stesso colore del testo dipinto sotto il riempimento. */
.acm-b {
  -webkit-text-stroke: 0.018em currentColor;
  paint-order: stroke fill;
}

.acm-lede {
  font-size: var(--acm-fs-lede);
  line-height: 1.6;
  color: var(--acm-text-dim);
  max-width: var(--acm-measure);
}
.acm-lede strong { color: var(--acm-text); font-weight: 700; }
.acm-light .acm-lede strong { color: var(--acm-text-dark); }
.acm-body { font-size: var(--acm-fs-body); color: var(--acm-text-dim); }
.acm-light .acm-body { color: var(--acm-text-dark-dim); }
.acm-body strong { color: var(--acm-text); font-weight: 700; }
.acm-light .acm-body strong { color: var(--acm-text-dark); }

/* Parola gigante di sfondo — firma del sito.
   Il testo vive in un pseudo-elemento: non entra nell'albero di
   accessibilità e non viene valutato come testo da contrasto.

   Secondo giro di design: era dietro al titolo di sezione e si leggeva
   come una seconda intestazione in conflitto; spostata in basso a destra
   si accavallava con le card dei casi. Ora è una parola che sbuca dal
   bordo superiore della sezione, tagliata dal bordo: un dispositivo
   chiaro, identico in ogni sezione, che non tocca mai il contenuto. */
.acm-ghostword {
  position: absolute;
  right: var(--acm-gutter);
  top: -0.44em;
  font-family: 'Special Gothic Expanded One', 'TitleFallback', 'Impact', sans-serif;
  font-size: clamp(3rem, 8.5vw, 6.5rem);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--acm-primary);
  opacity: 0.09;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.acm-ghostword::before { content: attr(data-ghost); }
.acm-light .acm-ghostword { opacity: 0.1; }
.acm-section > .acm-wrap { position: relative; z-index: 1; }

/* ─── BOTTONI ────────────────────────────────────────────────────────────
   Un solo sistema: pillola, maiuscoletto, una misura. La variante
   "chiusura" (su fucsia) invertisce i colori: nero pieno su fucsia. */
.acm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95rem 1.6rem;
  border-radius: var(--acm-r-pill);
  font-size: var(--acm-fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  transition: transform .25s var(--acm-ease), background-color .25s, color .25s, border-color .25s, box-shadow .25s;
}
.acm-btn--primary {
  background: var(--acm-primary);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}
.acm-btn--primary:hover { background: var(--acm-primary-hover); transform: translateY(-2px); }
.acm-btn--ghost {
  border: 1.5px solid rgba(255,255,255,0.34);
  color: var(--acm-text);
  background: transparent;
}
.acm-btn--ghost:hover { border-color: var(--acm-white); background: rgba(255,255,255,0.06); transform: translateY(-2px); }
.acm-light .acm-btn--ghost { border-color: rgba(0,0,0,0.22); color: var(--acm-text-dark); }
.acm-light .acm-btn--ghost:hover { border-color: var(--acm-text-dark); background: rgba(0,0,0,0.04); }
.acm-btn__arrow {
  display: inline-block;
  font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  font-size: 1rem;
  transition: transform .25s var(--acm-ease);
}
.acm-btn:hover .acm-btn__arrow { transform: translateX(3px); }

/* Sul fucsia la CTA primaria diventa nera: il magenta su magenta non
   esiste, e il nero pieno è l'unico modo di avere un pulsante pieno
   leggibile in chiusura. */
.acm-magenta .acm-btn--primary {
  background: #000000;
  color: #FFFFFF;
  box-shadow: none;
}
.acm-magenta .acm-btn--primary:hover { background: #16161A; }

/* CTA "VETRO LIQUIDO": mantiene il fucsia di brand e aggiunge un bordo a
   hairline luminoso costruito con la tecnica della maschera. */
.acm-btn--glass {
  position: relative;
  isolation: isolate;
  box-shadow:
    0 10px 26px rgba(219, 0, 90, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.acm-btn--glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.60) 0%,
      rgba(255, 255, 255, 0.20) 26%,
      rgba(255, 255, 255, 0) 54%,
      rgba(255, 255, 255, 0.08) 80%,
      rgba(255, 255, 255, 0.42) 100%),
    linear-gradient(90deg,
      rgba(255, 226, 178, 0.55) 0%,
      rgba(250, 236, 210, 0.34) 14%,
      rgba(226, 230, 234, 0.03) 38%,
      rgba(214, 226, 240, 0.02) 64%,
      rgba(200, 228, 250, 0.38) 90%,
      rgba(186, 224, 247, 0.68) 100%);
  -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;
}

/* ─── HEADER ───────────────────────────────────────────────────────────── */
.acm-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: .9rem var(--acm-gutter);
  transition: background-color .3s, border-color .3s, padding .3s;
  border-bottom: 1px solid transparent;
}
.acm-header.is-stuck {
  background: rgba(0,0,0,0.9);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: var(--acm-hair-dark);
}
.acm-header__inner {
  max-width: var(--acm-maxw);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.acm-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
body.acm-page .acm-logo img { height: 34px; width: auto; }
.acm-nav { display: flex; align-items: center; gap: 1.9rem; }
.acm-nav a {
  font-size: var(--acm-fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  transition: color .2s;
}
.acm-nav a:hover { color: var(--acm-primary-ink); }
.acm-header__cta { padding: .72rem 1.3rem; }
.acm-burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  border: 1.5px solid rgba(255,255,255,0.22);
  border-radius: var(--acm-r-pill);
}
.acm-burger span {
  display: block; width: 18px; height: 1.5px;
  background: #fff; position: relative;
}
.acm-burger span::before, .acm-burger span::after {
  content: ''; position: absolute; left: 0; width: 18px; height: 1.5px; background: #fff;
}
.acm-burger span::before { top: -6px; }
.acm-burger span::after  { top: 6px; }

/* ─── HERO ─────────────────────────────────────────────────────────────── */
.acm-hero {
  position: relative;
  background: var(--acm-black);
  padding-top: clamp(6.5rem, 12vh, 9rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  overflow-x: clip;
  overflow-y: visible;
}
.acm-hero__glow {
  position: absolute;
  top: -10%; right: -8%;
  width: min(760px, 92vw); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(219,0,90,0.20) 0%, rgba(219,0,90,0.06) 38%, transparent 66%);
  pointer-events: none;
  z-index: 0;
}
.acm-hero__grid-deco {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  pointer-events: none;
  z-index: 0;
}
/* Fascia di protezione del logo e del menu: il logo è fucsia come i nastri
   del filmato, senza una base scura sparirebbe in alcuni fotogrammi. */
.acm-hero__topbar {
  position: absolute;
  inset: 0 0 auto 0;
  height: 150px;
  background: linear-gradient(180deg, rgba(3,7,18,.92) 0%, rgba(3,7,18,.66) 45%, rgba(3,7,18,0) 100%);
  pointer-events: none;
  z-index: 0;
}
.acm-hero > .acm-wrap { position: relative; z-index: 1; }

.acm-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: clamp(2rem, 3.6vw, 4rem);
  align-items: start;
}
.acm-hero__copy { min-width: 0; }

.acm-hero__title {
  font-size: var(--acm-fs-display);
  line-height: 0.98;
  margin: 0 0 clamp(1.75rem, 2.8vw, 2.4rem);
  overflow-wrap: break-word;
}
.acm-hero__title em { font-style: normal; color: var(--acm-primary-ink); }
/* Righe esplicite: la composizione del titolo è scelta, non casuale.
   Ogni riga si bilancia da sola e l'ingresso le apre una dopo l'altra. */
.acm-hero__title .acm-line { display: block; }

.acm-hero__sub {
  font-size: var(--acm-fs-lede);
  color: var(--acm-text-dim);
  max-width: 48ch;
  margin: 0 0 var(--acm-s-5);
}

/* LA PROPOSTA: l'offerta concreta, subito sotto il titolo.
   È l'elemento che la vecchia pagina aveva "a schermo" e che la nuova
   aveva spostato in fondo: qui torna in alto, leggibile senza scroll. */
.acm-proposta {
  border-left: 3px solid var(--acm-primary);
  padding: .15rem 0 .15rem 1.15rem;
  margin: 0 0 var(--acm-s-5);
  font-size: var(--acm-fs-lede);
  line-height: 1.6;
  color: rgba(255,255,255,0.94);
  max-width: 52ch;
}
.acm-proposta strong { color: var(--acm-white); font-weight: 700; }

.acm-microproof { display: flex; flex-direction: column; gap: .55rem; margin-bottom: var(--acm-s-6); }
.acm-microproof li {
  position: relative;
  padding-left: 1.6rem;
  font-size: var(--acm-fs-sm);
  line-height: 1.55;
  color: var(--acm-text-dim);
}
/* Elenco e punti: un solo linguaggio in tutta la pagina. */
.acm-microproof li::before {
  content: '';
  position: absolute;
  left: 0; top: .58em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--acm-primary);
  box-shadow: 0 0 0 3px rgba(219,0,90,0.16);
}

/* Le azioni: contenitore DEDICATO (non .acm-btnrow — vedi intestazione del
   file: js/eva-chat.js elimina le primarie dentro .acm-btnrow). */
.acm-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  align-items: center;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

/* ─── MODULO NELLA PRIMA SEZIONE ───────────────────────────────────────── */
.acm-panel {
  position: relative;
  background: var(--acm-panel);
  border: 1px solid var(--acm-hair-dark);
  border-radius: var(--acm-r-lg);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  /* Il padding inferiore è più generoso del resto: il launcher della chat GHL
     è fisso in basso a destra e, senza questo spazio, coprirebbe il pulsante
     di invio quando il modulo è in fondo alla schermata. */
  padding-bottom: clamp(3.25rem, 5.5vw, 4.5rem);
  box-shadow: 0 24px 70px rgba(0,0,0,0.6);
}
/* Filetto fucsia in alto: distingue la card dal nero senza dover ricorrere
   a un riempimento chiaro (il contrasto del pannello sul nero è 1,07:1 —
   troppo basso perché il bordo da solo porti il significato). */
.acm-panel::before {
  content: '';
  position: absolute;
  left: clamp(1.4rem, 2.4vw, 2rem);
  right: clamp(1.4rem, 2.4vw, 2rem);
  top: 0;
  height: 3px;
  background: var(--acm-primary);
  border-radius: 0 0 3px 3px;
}
.acm-panel__title {
  font-size: clamp(1.3rem, 1.9vw, 1.65rem);
  margin: 0 0 var(--acm-s-2);
}
.acm-panel__text {
  font-size: var(--acm-fs-sm);
  line-height: 1.6;
  color: var(--acm-text-dim);
  margin: 0 0 var(--acm-s-5);
  max-width: 44ch;
}
.acm-panel__foot {
  margin-top: var(--acm-s-4);
  padding-top: var(--acm-s-4);
  border-top: 1px solid var(--acm-hair-dark);
  font-size: var(--acm-fs-xs);
  line-height: 1.6;
  color: var(--acm-text-dim);
}
.acm-panel__foot a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.acm-panel__foot a:hover { color: var(--acm-primary-ink); }
.acm-panel__micro {
  margin-top: var(--acm-s-4);
  font-size: var(--acm-fs-xs);
  line-height: 1.55;
  color: var(--acm-text-faint);
  max-width: 46ch;
}

/* ─── DUE MODALITÀ NELLO STESSO PANNELLO ─────────────────────────────────
   "Scrivo la mia richiesta" / "Mi aiuta Eva": due tab che si scambiano
   lo stesso pannello. I campi restano nel DOM (si cambia solo l'attributo
   `hidden`): i dati già inseriti non si perdono. Il form è la modalità
   iniziale, visibile senza cliccare nulla. */
.acm-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--acm-hair-dark);
  border-radius: var(--acm-r-pill);
  padding: 4px;
  margin-bottom: var(--acm-s-5);
  background: rgba(255,255,255,0.03);
}
.acm-mode {
  padding: .7rem .85rem;
  border-radius: var(--acm-r-pill);
  font-size: var(--acm-fs-xs);
  font-weight: 700;
  letter-spacing: .01em;
  color: rgba(255,255,255,0.80);
  text-align: center;
  min-height: 40px;
  transition: background-color .2s, color .2s;
}
.acm-mode[aria-selected="true"] { background: var(--acm-primary); color: #fff; }
.acm-mode:hover:not([aria-selected="true"]) { color: #fff; background: rgba(255,255,255,0.07); }
.acm-modepanel:focus { outline: none; }

/* Invito secondario accanto al form. */
.acm-panel__evainvite {
  margin-top: var(--acm-s-4);
  font-size: var(--acm-fs-xs);
  line-height: 1.55;
  color: var(--acm-text-dim);
}
.acm-linkbtn {
  color: var(--acm-primary-ink);
  font-weight: 700;
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 2px 4px;
  border-radius: var(--acm-r-xs);
}
.acm-linkbtn:hover { color: #fff; }

/* ─── MODALITÀ EVA ─────────────────────────────────────────────────────── */
.acm-eva__intro {
  font-size: var(--acm-fs-sm);
  line-height: 1.6;
  color: rgba(255,255,255,0.92);
  margin-bottom: var(--acm-s-4);
}
.acm-eva__list { display: flex; flex-direction: column; gap: .5rem; margin-bottom: var(--acm-s-5); }
.acm-eva__list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: var(--acm-fs-xs);
  line-height: 1.55;
  color: var(--acm-text-dim);
}
.acm-eva__list li strong { color: #fff; }
.acm-eva__list li::before {
  content: '';
  position: absolute;
  left: 0; top: .6em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--acm-primary);
}
.acm-eva__cta { width: 100%; }
/* Nota di stato: filetto a sinistra e superficie tenue. Il bordo tratteggiato
   magenta sembrava un errore: qui la nota è un'informazione. */
.acm-eva__note {
  margin-top: var(--acm-s-4);
  padding: .8rem .95rem;
  border-left: 3px solid var(--acm-primary);
  border-radius: 0 var(--acm-r-sm) var(--acm-r-sm) 0;
  background: var(--acm-primary-tint);
  font-size: var(--acm-fs-xs);
  line-height: 1.55;
  color: rgba(255,255,255,0.90);
}
.acm-eva__note strong { color: #fff; }

/* Link discreto alle candidature, nel footer. */
.acm-footer__careers {
  margin-top: var(--acm-s-5);
  font-size: var(--acm-fs-xs);
  color: var(--acm-text-faint);
}
.acm-footer__careers a { color: var(--acm-text-dim); }

/* ─── FORM MOCK (solo preview) ─────────────────────────────────────────── */
.acm-mock__flag {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: var(--acm-s-4);
  padding: .35rem .7rem;
  border-radius: var(--acm-r-pill);
  background: var(--acm-primary-tint);
  font-size: var(--acm-fs-micro);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #ff9cc8;
}
.acm-mock__flag::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--acm-primary-ink);
}
.acm-mock__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--acm-s-3); }
.acm-field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.acm-field--full { grid-column: 1 / -1; }
.acm-field label {
  font-size: var(--acm-fs-xs);
  font-weight: 600;
  color: rgba(255,255,255,0.86);
  display: flex;
  align-items: baseline;
  gap: .4rem;
  flex-wrap: wrap;
}
.acm-field label .acm-req { color: var(--acm-primary-ink); font-weight: 700; }
.acm-field label .acm-opt {
  font-weight: 400;
  font-size: var(--acm-fs-micro);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--acm-text-faint);
}
.acm-field input, .acm-field textarea, .acm-field select {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.30);
  border-radius: var(--acm-r-sm);
  padding: .8rem .9rem;
  color: var(--acm-white);
  font-family: inherit;
  font-size: var(--acm-fs-body);
  line-height: 1.5;
  transition: border-color .2s, background-color .2s;
  -webkit-appearance: none;
  appearance: none;
}
.acm-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='1.6' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  padding-right: 2.4rem;
}
.acm-field select option { background: #17171c; color: #fff; }
.acm-field textarea { resize: vertical; min-height: 92px; }
.acm-field input::placeholder, .acm-field textarea::placeholder { color: rgba(255,255,255,0.5); }
.acm-field input:focus, .acm-field textarea:focus, .acm-field select:focus {
  outline: none;
  border-color: var(--acm-primary);
  background: rgba(219,0,90,0.06);
}
.acm-field input[aria-invalid="true"], .acm-field textarea[aria-invalid="true"], .acm-field select[aria-invalid="true"] { border-color: #ff6b6b; }
.acm-field__error {
  font-size: var(--acm-fs-xs);
  line-height: 1.4;
  color: #ff9d9d;
  min-height: 0;
}
/* Il suggerimento è un aiuto, non un errore: colore neutro. */
.acm-field__hint {
  font-size: var(--acm-fs-micro);
  line-height: 1.45;
  color: var(--acm-text-faint);
}
.acm-mock__privacy {
  margin-top: var(--acm-s-4);
  font-size: var(--acm-fs-micro);
  line-height: 1.55;
  color: var(--acm-text-faint);
}
.acm-mock__privacy a { color: var(--acm-text-dim); text-decoration: underline; text-underline-offset: 3px; }
.acm-mock__status {
  margin-top: var(--acm-s-3);
  font-size: var(--acm-fs-xs);
  line-height: 1.5;
  color: #ff9d9d;
}
.acm-mock__status:empty { display: none; }
.acm-mock__submit { margin-top: var(--acm-s-4); width: 100%; }
.acm-mock__note {
  margin-top: var(--acm-s-3);
  font-size: var(--acm-fs-micro);
  line-height: 1.55;
  color: var(--acm-text-faint);
}
.acm-mock__success {
  text-align: center;
  padding: clamp(1.25rem, 3vw, 2rem) 0;
}
.acm-mock__success h3 {
  font-family: inherit;
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: none;
  margin-bottom: var(--acm-s-3);
}
.acm-mock__success p { color: var(--acm-text-dim); font-size: var(--acm-fs-sm); max-width: 44ch; margin-inline: auto; }
.acm-mock__success .acm-mock__flag { margin-bottom: var(--acm-s-3); }

/* ─── OFFERTA: 3 CARD ──────────────────────────────────────────────────── */
.acm-section__head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--acm-s-5) clamp(1.5rem, 3.5vw, 3.5rem);
  align-items: end;
  margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem);
}
.acm-section__head > * { min-width: 0; }
.acm-section__head .acm-lede { margin: 0; }

.acm-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--acm-hair-light);
  border: 1px solid var(--acm-hair-light);
  border-radius: var(--acm-r-lg);
  overflow: hidden;
}
.acm-card {
  background: var(--acm-surface);
  padding: clamp(1.5rem, 2.4vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: var(--acm-s-3);
  min-height: 100%;
  transition: background-color .3s var(--acm-ease);
}
.acm-card:hover { background: #FFFFFF; }
/* Numero e occhiello sulla stessa riga: prima il numero (2,4rem) era più
   grande del titolo della card e capovolto la gerarchia. */
.acm-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--acm-s-3);
  padding-bottom: var(--acm-s-3);
  border-bottom: 1px solid var(--acm-hair-light);
}
.acm-card__num {
  font-family: 'Special Gothic Expanded One', 'TitleFallback', 'Impact', sans-serif;
  font-size: .9375rem;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--acm-primary);
}
.acm-card__num::before { content: attr(data-num); }
.acm-card__tag {
  font-size: var(--acm-fs-micro);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  /* Fucsia di brand: 4,66:1 su #F4F4F5, sopra la soglia AA anche a 11 px. */
  color: var(--acm-primary);
}
/* L'altezza minima allinea i testi delle tre card: senza, le descrizioni
   partono a righe diverse a seconda che il titolo vada su una o due righe. */
.acm-card__title {
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.06;
  font-weight: 400;
  min-height: 2.12em;
}
.acm-card__text { font-size: var(--acm-fs-body); color: var(--acm-text-dark-dim); }

.acm-offer__foot {
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--acm-s-5);
  padding-top: var(--acm-s-5);
  border-top: 1px solid var(--acm-hair-light);
}
.acm-offer__foot p { font-size: var(--acm-fs-lede); max-width: 52ch; }
.acm-offer__foot strong { color: var(--acm-text-dark); }

/* ─── CASI ─────────────────────────────────────────────────────────────── */
.acm-cases { display: flex; flex-direction: column; gap: clamp(1.75rem, 3.2vw, 3rem); }
.acm-case {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: stretch;
  background: #0B0B0B;
  border: 1px solid var(--acm-hair-dark);
  border-radius: var(--acm-r-lg);
  overflow: hidden;
  transition: border-color .3s var(--acm-ease);
}
.acm-case:hover { border-color: rgba(255,255,255,0.2); }
.acm-case:nth-child(even) .acm-case__media { order: 2; }
.acm-case__media { position: relative; background: #000; min-height: 300px; }
body.acm-page .acm-case__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.acm-case__body { padding: clamp(1.4rem, 2.6vw, 2.4rem); }
/* Riga del cliente: stessa altezza e stesso peso per tutti e tre i casi. */
.acm-case__client {
  display: flex;
  align-items: center;
  gap: .85rem;
  min-height: 26px;
  margin-bottom: var(--acm-s-4);
}
body.acm-page .acm-case__client img {
  height: 24px; width: auto; max-width: 140px;
  object-fit: contain; object-position: left center;
  filter: brightness(0) invert(1);
  opacity: .92;
}
.acm-case__client--text {
  font-family: 'Special Gothic Expanded One', 'TitleFallback', 'Impact', sans-serif;
  font-size: .9375rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #fff;
}
.acm-case__sector {
  font-size: var(--acm-fs-micro);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--acm-primary-ink);
  margin-bottom: var(--acm-s-3);
}
.acm-case__title { font-size: var(--acm-fs-title); line-height: 1.02; margin-bottom: var(--acm-s-4); }
.acm-case__facts {
  margin-top: var(--acm-s-4);
  display: grid;
  gap: .55rem;
  padding-top: var(--acm-s-4);
  border-top: 1px solid var(--acm-hair-dark);
}
.acm-case__facts div { display: grid; grid-template-columns: 9.5rem 1fr; gap: .8rem; align-items: baseline; }
.acm-case__facts dt {
  font-size: var(--acm-fs-micro);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--acm-text-faint);
}
.acm-case__facts dd { margin: 0; font-size: var(--acm-fs-sm); color: rgba(255,255,255,0.88); }
.acm-case__link {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: var(--acm-s-5);
  font-size: var(--acm-fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--acm-primary-ink);
  border-bottom: 1.5px solid transparent;
  padding-bottom: 2px;
  min-height: 24px;
  transition: border-color .25s, gap .25s;
}
.acm-case__link:hover { border-bottom-color: var(--acm-primary-ink); gap: .75rem; }

/* Prada: confronto foto di partenza / output su modella.
   Le due fotografie hanno fondo bianco: vengono trattate come due stampe
   appoggiate su un supporto scuro, non come due riquadri bianchi. */
.acm-prada-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 14px;
  background: #0B0B0B;
  align-items: center;
}
.acm-prada-compare figure {
  margin: 0; min-width: 0; align-self: stretch;
  display: flex; flex-direction: column;
  background: #fff;
  border-radius: var(--acm-r-xs);
  overflow: hidden;
}
.acm-prada-compare figcaption {
  padding: 10px;
  color: #111;
  font: 600 11px/1.3 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .06em;
}
body.acm-page .acm-prada-compare img { position: static; width: 100%; height: 360px; object-fit: contain; flex: 1; min-height: 0; }

/* ─── METODO ───────────────────────────────────────────────────────────── */
.acm-method__head { margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.acm-method__head .acm-h2,
.acm-method__head .acm-lede { max-width: 68ch; }
.acm-method__head .acm-lede { margin-top: var(--acm-s-4); }
.acm-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  counter-reset: acmstep;
}
.acm-step { position: relative; padding-top: var(--acm-s-5); border-top: 2px solid var(--acm-text-dark); }
.acm-step::before {
  counter-increment: acmstep;
  content: '0' counter(acmstep);
  display: block;
  font-family: 'Special Gothic Expanded One', 'TitleFallback', 'Impact', sans-serif;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--acm-primary);
  margin-bottom: var(--acm-s-3);
}
body.acm-page .acm-step h3 {
  font-size: var(--acm-fs-h3);
  text-transform: none;
  font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  margin-bottom: var(--acm-s-2);
  /* Allinea i tre paragrafi: il titolo del terzo passo va su due righe. */
  min-height: 2em;
}
.acm-step p { font-size: var(--acm-fs-sm); color: var(--acm-text-dark-dim); }

.acm-team {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem 2rem;
  padding-top: var(--acm-s-5);
  border-top: 1px solid var(--acm-hair-light);
}
.acm-team__faces { display: flex; }
body.acm-page .acm-team__faces img {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--acm-surface);
  margin-left: -13px;
  background: var(--acm-surface2);
}
.acm-team__faces img:first-child { margin-left: 0; }
.acm-team__text { font-size: var(--acm-fs-sm); color: var(--acm-text-dark-dim); max-width: 46ch; }
.acm-team__text strong { color: var(--acm-text-dark); }

/* ─── FAQ ──────────────────────────────────────────────────────────────── */
.acm-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.acm-faq__intro .acm-lede { margin-top: var(--acm-s-4); }
.acm-faq__list { border-top: 1px solid var(--acm-hair-dark); }
.acm-faq__item { border-bottom: 1px solid var(--acm-hair-dark); }
.acm-faq__q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--acm-s-5);
  text-align: left;
  padding: 1.25rem 0;
  font-size: 1.0625rem;
  font-weight: 700;
  font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  color: var(--acm-text);
  transition: color .2s;
}
.acm-faq__q:hover { color: var(--acm-primary-ink); }
.acm-faq__icon {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border: 1.5px solid var(--acm-hair-dark);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .9rem; line-height: 1;
  color: var(--acm-primary-ink);
  transition: transform .3s var(--acm-ease), border-color .3s;
}
.acm-faq__q:hover .acm-faq__icon { border-color: rgba(255,255,255,0.35); }
.acm-faq__q[aria-expanded="true"] .acm-faq__icon { transform: rotate(45deg); }
.acm-faq__a { overflow: hidden; max-height: 0; transition: max-height .35s var(--acm-ease); }
.acm-faq__a p {
  padding: 0 3rem 1.35rem 0;
  font-size: var(--acm-fs-body);
  color: var(--acm-text-dim);
  max-width: 62ch;
}

/* ─── CHIUSURA ───────────────────────────────────────────────────────────
   Sul fucsia il bianco traslucido scende a 4,24:1: sotto la soglia AA
   per il testo normale. Qui il testo è bianco pieno (5,05:1). */
.acm-magenta { padding-block: clamp(4rem, 7vw, 7rem); }
.acm-close { text-align: center; }
.acm-close__title { font-size: clamp(1.9rem, 3.5vw, 2.6rem); margin: 0 auto var(--acm-s-4); max-width: 24ch; }
body.acm-page .acm-close__text { color: #FFFFFF; font-size: var(--acm-fs-lede); margin: 0 auto var(--acm-s-5); max-width: 46ch; }
.acm-close__actions {
  display: flex; flex-wrap: wrap; gap: .85rem;
  align-items: center; justify-content: center;
  margin-bottom: var(--acm-s-5);
}
body.acm-page .acm-close__phone { color: #FFFFFF; font-size: var(--acm-fs-sm); }
body.acm-page .acm-close__phone a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
body.acm-page .acm-close__phone a:hover { color: rgba(255,255,255,0.86); }
.acm-magenta .acm-btn--ghost { border-color: rgba(255,255,255,0.6); color: #fff; }
.acm-magenta .acm-btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,0.14); }

/* ─── FOOTER ───────────────────────────────────────────────────────────── */
.acm-footer { background: var(--acm-black); padding-block: clamp(2.25rem, 4.5vw, 3.5rem); border-top: 1px solid var(--acm-hair-dark); }
.acm-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
  align-items: center;
  justify-content: space-between;
}
.acm-footer p { font-size: var(--acm-fs-xs); color: var(--acm-text-faint); }
.acm-footer a { color: var(--acm-text-dim); text-decoration: underline; text-underline-offset: 3px; }
.acm-footer a:hover { color: var(--acm-primary-ink); }
.acm-footer nav { display: flex; flex-wrap: wrap; gap: 1.2rem; font-size: var(--acm-fs-xs); }
/* I link di navigazione non portano la sottolineatura: l'ho resa al passaggio
   del mouse, così il piè di pagina resta quieto. */
.acm-footer nav a { display: inline-flex; align-items: center; min-height: 24px; text-decoration: none; }
.acm-footer nav a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ─── REVEAL ───────────────────────────────────────────────────────────── */
.acm-js .acm-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--acm-ease), transform .6s var(--acm-ease); }
.acm-js .acm-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body.acm-page *, body.acm-page *::before, body.acm-page *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .acm-js .acm-reveal { opacity: 1; transform: none; }
}

/* ─── MOVIMENTO ──────────────────────────────────────────────────────────
   Pochi movimenti, tutti dentro prefers-reduced-motion:no-preference.
   Il titolo si apre parola per parola; il resto sale in sequenza. */
.acm-split { display: inline; }
.acm-w { display: inline-block; }
.acm-w__i { display: inline-block; }

@media (prefers-reduced-motion: no-preference) {
  .acm-js .acm-split .acm-w__i {
    opacity: 0;
    translate: 0 0.42em;
    transition:
      opacity .5s cubic-bezier(.25, .8, .35, 1),
      translate .5s cubic-bezier(.25, .8, .35, 1);
    transition-delay: calc(var(--acm-wi, 0) * 38ms);
  }
  .acm-js .acm-split.is-in .acm-w__i { opacity: 1; translate: 0 0; }

  @keyframes acm-marker {
    from { opacity: 0; scale: .25; }
    to   { opacity: 1; scale: 1; }
  }
  @keyframes acm-num {
    from { opacity: 0; translate: 0 -12px; }
    to   { opacity: 1; translate: 0 0; }
  }
  @keyframes acm-lift {
    from { opacity: 0; translate: 0 9px; }
    to   { opacity: 1; translate: 0 0; }
  }
  @keyframes acm-wipe {
    from { clip-path: inset(-.78em 0 calc(100% + .78em) 0); translate: 0 9px; }
    to   { clip-path: inset(-.78em 0 -.78em 0); translate: 0 0; }
  }

  .acm-js .acm-cards.is-in .acm-card:nth-child(1) { --acm-ci: 0; }
  .acm-js .acm-cards.is-in .acm-card:nth-child(2) { --acm-ci: 1; }
  .acm-js .acm-cards.is-in .acm-card:nth-child(3) { --acm-ci: 2; }
  .acm-js .acm-cards.is-in .acm-card__num { animation: acm-num .55s cubic-bezier(.25,.8,.35,1) calc(var(--acm-ci,0) * .09s) backwards; }

  .acm-js .acm-steps.is-in .acm-step:nth-child(1) { --acm-si: 0; }
  .acm-js .acm-steps.is-in .acm-step:nth-child(2) { --acm-si: 1; }
  .acm-js .acm-steps.is-in .acm-step:nth-child(3) { --acm-si: 2; }
  .acm-js .acm-steps.is-in .acm-step { animation: acm-lift .6s cubic-bezier(.25,.8,.35,1) calc(var(--acm-si,0) * .09s) backwards; }
}

/* ─── INGRESSO NELLA HERO ────────────────────────────────────────────────
   Sequenza unica al caricamento, ~1,2 s. Tutto dentro
   prefers-reduced-motion:no-preference, con fallback statico.
   Il selettore è html:not(.acm-entered): quando il JS ritira l'ingresso
   aggiungendo la classe, le animazioni non si ripetono al cambio di
   breakpoint. */
@media (prefers-reduced-motion: no-preference) {
  :root {
    --acm-ent-line: cubic-bezier(.16, 1, .3, 1);
    --acm-ent-soft: cubic-bezier(.25, .8, .35, 1);
    --acm-rise: 9px;
  }
  html:not(.acm-entered) .acm-ent--eyebrow { animation: acm-lift .55s var(--acm-ent-soft) .06s backwards; }
  html:not(.acm-entered) .acm-hero__title .acm-line:nth-child(1) { animation: acm-wipe .80s var(--acm-ent-line) .16s backwards; }
  html:not(.acm-entered) .acm-hero__title .acm-line:nth-child(2) { animation: acm-wipe .80s var(--acm-ent-line) .34s backwards; }
  html:not(.acm-entered) .acm-ent--sub    { animation: acm-lift .65s var(--acm-ent-soft) .62s backwards; }
  html:not(.acm-entered) .acm-ent--cta    { animation: acm-lift .75s var(--acm-ent-line) .74s backwards; }
  html:not(.acm-entered) .acm-ent--panel  { animation: acm-lift .75s var(--acm-ent-line) .30s backwards; }
}

/* ─── RESPONSIVE ───────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .acm-section__head { grid-template-columns: 1fr; align-items: start; }
  .acm-faq { grid-template-columns: 1fr; }
  .acm-hero__layout { grid-template-columns: 1fr; }
  .acm-hero__copy { max-width: 720px; }
  /* Il pannello resta `relative`: il suo filetto magenta (::before) è
     ancorato al pannello, e con `static` finiva in cima alla hero,
     staccato dal modulo. */
  .acm-panel { position: relative; max-width: 720px; }
}

@media (max-width: 900px) {
  .acm-cards { grid-template-columns: 1fr; }
  .acm-steps { grid-template-columns: 1fr; gap: 1.75rem; }
  .acm-case { grid-template-columns: 1fr; }
  .acm-case:nth-child(even) .acm-case__media { order: 0; }
  .acm-case__media { min-height: 240px; }
}

@media (max-width: 900px) {
  /* Menu a tendina: sotto i 900 px la barra di navigazione con la CTA
     occuperebbe quasi tutta la larghezza e il titolo del link andrebbe
     su due righe. */
  .acm-nav {
    position: fixed;
    inset: 0 0 auto 0;
    top: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(0,0,0,0.97);
    backdrop-filter: blur(20px);
    padding: 5.5rem var(--acm-gutter) 2rem;
    transform: translateY(-100%);
    transition: transform .35s var(--acm-ease);
    border-bottom: 1px solid var(--acm-hair-dark);
    overflow-y: auto;
  }
  .acm-nav.is-open { transform: translateY(0); }
  .acm-nav a { padding: 1rem 0; border-bottom: 1px solid var(--acm-hair-dark); font-size: 1rem; }
  .acm-burger { display: inline-flex; }
  .acm-header__cta { display: none; }
}

@media (max-width: 760px) {
  .acm-mock__grid { grid-template-columns: 1fr; }
  .acm-case__facts div { grid-template-columns: 1fr; gap: .15rem; }
  .acm-prada-compare img { height: 280px; }
  .acm-offer__foot { flex-direction: column; align-items: flex-start; }
  body.acm-page .acm-team__faces img { width: 42px; height: 42px; margin-left: -11px; }
  .acm-ghostword { font-size: clamp(2.5rem, 11vw, 4rem); right: calc(var(--acm-gutter) * -0.2); }
}

@media (max-width: 480px) {
  .acm-hero { padding-top: 6rem; }
  .acm-hero__title { font-size: clamp(1.85rem, 8.4vw, 2.5rem); }
  .acm-hero__actions { flex-direction: column; align-items: stretch; }
  .acm-hero__actions .acm-btn { width: 100%; }
  .acm-close__actions { flex-direction: column; align-items: stretch; }
  .acm-close__actions .acm-btn { width: 100%; }
  .acm-modes { grid-template-columns: 1fr; gap: 4px; border-radius: var(--acm-r-md); }
}

/* ─── BANNER PREVIEW ─────────────────────────────────────────────────────
   Presente solo nella preview statica (data-build="preview"). La barra è
   fissa in alto e il JS ne misura l'altezza in --acm-banner-h: header ed
   hero si spostano di conseguenza, così la barra non copre né il logo né
   il menu. Nella versione da integrare il banner non esiste. */
html:not([data-build="preview"]) .acm-previewbar { display: none; }
.acm-previewbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 300;
  background: #17101b;
  color: #fff;
  border-bottom: 1px solid rgba(219,0,90,.55);
  padding: .5rem var(--acm-gutter);
  text-align: center;
  font-size: var(--acm-fs-xs);
  line-height: 1.5;
  letter-spacing: .02em;
}
.acm-previewbar strong { color: #ff9cc8; }
html[data-build="preview"] .acm-header { top: var(--acm-banner-h, 0px); }
html[data-build="preview"] .acm-hero {
  padding-top: calc(clamp(6.5rem, 12vh, 9rem) + var(--acm-banner-h, 0px));
}

/* ═══════════════════════════════════════════════════════════════════════
   GIRONE 3 — 31/10/2026
   · LA MASCOTTE: il gatto astronauta accanto al logo, nella barra.
   · IL RITMO: la pagina smette di stare "incastrata" (vedi sotto).
   · LA FASCIA sotto la hero: anello di particelle in grigio, nomi dei
     clienti che scorrono, media partner.
   · L'ETICHETTA sopra le due modalità del modulo.
   Tutto scoped su .acm- / body.acm-page: il resto del sito non è toccato.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── 1. IL RITMO VERTICALE ───────────────────────────────────────────────
   CAUSA DELLA PAGINA "ACCORPATA": il reset locale azzera i margin dei
   componenti. `body.acm-page h1..h4 { margin: 0 }` e
   `body.acm-page p { margin: 0 }` hanno specificità 0,1,2 e battono i
   margin dichiarati dai componenti (0,1,0): il respiro che il disegno
   prevedeva spariva e occhiello, titolo, testo e CTA finivano incolati.
   Qui il ritmo torna, alla stessa specificità del reset.
   Unica eccezione: .acm-section__head .acm-lede resta a margin 0 (lì il
   testo sta in una colonna propria, sotto il titolo). */
body.acm-page .acm-eyebrow { margin: 0 0 var(--acm-s-4); }
body.acm-page .acm-kicker { margin: 0 0 var(--acm-s-5); }
body.acm-page .acm-h2 { margin: 0 0 var(--acm-s-4); }
body.acm-page .acm-hero__title { margin: 0 0 clamp(1.6rem, 2.6vw, 2.4rem); }
body.acm-page .acm-hero__sub { margin: 0 0 var(--acm-s-5); }
body.acm-page .acm-proposta { margin: 0 0 var(--acm-s-5); }
body.acm-page .acm-microproof { margin: 0 0 var(--acm-s-6); }
body.acm-page .acm-panel__title { margin: 0 0 var(--acm-s-2); }
body.acm-page .acm-panel__text { margin: 0 0 var(--acm-s-5); }
body.acm-page .acm-eva__intro { margin: 0 0 var(--acm-s-4); }
body.acm-page .acm-eva__list { margin: 0 0 var(--acm-s-5); }
body.acm-page .acm-mock__flag { margin: 0 0 var(--acm-s-4); }
body.acm-page .acm-mock__success h3 { margin: 0 0 var(--acm-s-3); }
body.acm-page .acm-case__sector { margin: 0 0 var(--acm-s-3); }
body.acm-page .acm-case__title { margin: 0 0 var(--acm-s-4); }
body.acm-page .acm-close__title { margin: 0 auto var(--acm-s-4); }

/* La hero ha il respiro più generoso: è la prima schermata, il primo
   contatto con lo studio. */
body.acm-page .acm-hero .acm-eyebrow { margin-bottom: var(--acm-s-5); }
body.acm-page .acm-hero__title { margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
body.acm-page .acm-hero__sub { margin-bottom: var(--acm-s-6); }
body.acm-page .acm-proposta { margin-bottom: var(--acm-s-6); }
body.acm-page .acm-microproof { margin-bottom: var(--acm-s-7); }

/* ─── 2. LA MASCOTTE, NELLA PRIMA SEZIONE BIANCA ─────────────────────────
   Il gatto astronauta della home sta accanto al titolo di «Le esigenze».
   Il filmato ha il CANALE ALFA: lo sfondo è davvero trasparente, quindi il
   gatto è integrato nella sezione, senza riquadro, senza bordo e senza
   ombra. Niente filtri: i bordi restano netti.
   Ripiego: se il browser non legge il WebM con alfa si usa l'MP4 (che non
   può avere l'alfa), e in quel caso la mascotte torna su una tessera
   bianca morbida. */
.acm-head__side {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(1rem, 2.2vw, 2.25rem);
}
.acm-cat {
  margin: 0;
  flex: 0 0 auto;
  width: clamp(92px, 8.5vw, 124px);
  aspect-ratio: 120 / 182;
  background: transparent;
  pointer-events: none;
}
.acm-cat__media {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* Ripiego senza alfa (MP4): il filmato ha fondo bianco, quindi la
   mascotte torna su una tessera bianca morbida invece di mostrare
   il rettangolo del video. */
.acm-cat--fallback {
  background: #FFFFFF;
  border-radius: var(--acm-r-md);
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(11,11,12,0.12);
}

/* ─── 3. IL MOVIMENTO NELLA HERO ─────────────────────────────────────────
   L'anello di particelle della pagina prodotto Eva, in grigio e spento,
   come sfondo del primo schermo. Il filmato ha fondo grigio chiaro:
   invertendolo l'anello diventa chiaro su nero; la maschera radiale
   dissolve i bordi del rettangolo e la blend mode "screen" fa svanire
   nel fondo ciò che resta di scuro. Resta un alone: testo bianco sopra
   un grigio al 18%, il contrasto non scende sotto 12:1. */
.acm-hero { isolation: isolate; }
.acm-hero__ring {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(44% 42% at 48% 44%, #000 0%, #000 44%, transparent 84%);
  mask-image: radial-gradient(44% 42% at 48% 44%, #000 0%, #000 44%, transparent 84%);
}
.acm-hero__ring-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transform: scale(1.25);
  /* Il filmato ha fondo grigio chiaro e anello scuro: invertendolo l'anello
     diventa chiaro su nero. Il contrasto alto manda il fondo a zero e
     lascia in piedi solo la struttura. */
  filter: invert(1) brightness(.55) contrast(2.1);
  opacity: .5;
  mix-blend-mode: screen;
}

/* ─── 4. LA FASCIA SOTTO LA HERO ─────────────────────────────────────────
   I nomi dei clienti che scorrono e i media partner. Il movimento
   (anello di particelle) è nella hero. */
.acm-clients {
  position: relative;
  isolation: isolate;
  background: var(--acm-black);
  padding-block: clamp(3rem, 6.5vw, 5.5rem) clamp(2.5rem, 5vw, 4rem);
  overflow: clip;
  border-top: 1px solid var(--acm-hair-dark);
}
.acm-clients > .acm-wrap { position: relative; z-index: 1; }

.acm-clients__head { margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
body.acm-page .acm-clients__title {
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  margin: 0 0 var(--acm-s-3);
}
body.acm-page .acm-clients__note {
  font-size: var(--acm-fs-xs);
  line-height: 1.6;
  color: var(--acm-text-faint);
  max-width: 68ch;
  margin: 0;
}

/* I nomi che scorrono: stesso sistema della home (due righe in verso
   opposto, pausa al passaggio del mouse, sfumatura ai bordi).
   La riga viene clonata dal JS: qui c'è un solo elenco. */
.acm-marquee {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: clamp(.75rem, 1.6vw, 1.4rem);
  /* Velocità della corsa in px/s: la stessa per tutte le fasce, così i
     loghi non sembrano due animazioni diverse. Il JS calcola la durata
     sulla lunghezza effettiva della striscia. */
  --acm-marquee-speed: 45;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.acm-marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  width: max-content;
  animation: acm-marquee var(--acm-marquee-duration, 120s) linear infinite;
}
/* La seconda riga va nel verso opposto: due correnti contrary, come sulla
   home. */
.acm-marquee__track--rev { animation-direction: reverse; }
/* Al passaggio del mouse la corsa si ferma: si poteva leggere un nome. */
.acm-marquee__track:hover { animation-play-state: paused; }
.acm-marquee__item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(104px, 12vw, 148px);
  height: clamp(64px, 8vw, 92px);
}
/* I loghi sono quadrati con il marchio al centro: li si adatta al box,
   altrimenti restano illeggibili. */
body.acm-page .acm-marquee__item img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .72;
  transition: opacity .25s;
}
.acm-marquee__item:hover img { opacity: 1; }
@keyframes acm-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* I media partner: stessa corsa, taglia più sottile e più lenta. */
.acm-media {
  margin-top: clamp(2rem, 4vw, 3.25rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--acm-hair-dark);
}
body.acm-page .acm-media__label {
  font-size: var(--acm-fs-micro);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--acm-text-faint);
  margin: 0 0 var(--acm-s-4);
}
.acm-marquee--media {
  /* I media partner scorrono più piano: sono sette nomi, non quaranta. */
  --acm-marquee-speed: 22;
}
.acm-marquee--media .acm-marquee__item {
  width: clamp(88px, 10vw, 120px);
  height: clamp(50px, 6vw, 64px);
}

/* ─── 5. L'ETICHETTA SOPRA LE DUE MODALITÀ ───────────────────────────────
   Dice cosa ci si aspetta dai due pulsanti: senza, il tablist sembra un
   interruttore senza spiegazione. */
body.acm-page .acm-modes__label {
  font-size: var(--acm-fs-micro);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--acm-text-faint);
  margin: 0 0 var(--acm-s-2);
}

/* ─── 6. MOVIMENTO RIDOTTO ───────────────────────────────────────────────
   Con prefers-reduced-motion i due filmati restano fermi sul primo
   fotogramma (poster) e i nomi non scorrono: si dispongono su più righe.
   Il JS in questo caso non clona la riga, così nessun nome è ripetuto. */
@media (prefers-reduced-motion: reduce) {
  .acm-marquee__track {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--acm-s-4);
  }
}

/* ─── 7. ADATTAMENTI ─────────────────────────────────────────────────────
   La mascotte si riduce con lo schermo; l'anello della hero allarga la
   sua maschera quando la colonna di testo va a capo. */
@media (max-width: 900px) {
  .acm-cat { width: 96px; }
  .acm-hero__ring {
    -webkit-mask-image: radial-gradient(62% 40% at 50% 40%, #000 0%, #000 46%, transparent 86%);
    mask-image: radial-gradient(62% 40% at 50% 40%, #000 0%, #000 46%, transparent 86%);
  }
}
@media (max-width: 480px) {
  .acm-cat { width: 78px; }
  .acm-hero__ring-video { opacity: .34; }
  .acm-marquee__item { width: 96px; height: 58px; }
  .acm-marquee--media .acm-marquee__item { width: 80px; height: 46px; }
}

/* 31 ottobre: tubi storici nella hero, particelle Eva sotto le FAQ. */
.acm-hero__tubes { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; background:#000; }
.acm-hero__tubes::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.36),rgba(0,0,0,.12)),linear-gradient(180deg,rgba(0,0,0,.28),transparent 65%,#000); }
.acm-hero__tubes-video { width:100%; height:100%; object-fit:cover; object-position:center; filter:brightness(.32) saturate(1.25); }
.acm-faq__ring { display:block; position:relative; inset:auto; width:100%; height:clamp(210px,24vw,320px); margin-top:1.5rem; -webkit-mask-image:radial-gradient(ellipse at center,#000 20%,transparent 74%); mask-image:radial-gradient(ellipse at center,#000 20%,transparent 74%); }
.acm-faq__ring .acm-hero__ring-video { transform:scale(1.15); opacity:.72; }
@media(max-width:900px) { .acm-faq__ring { max-width:420px; height:230px; margin-inline:auto; } }

/* Mobile conversion CTA ordering */
@media (max-width:767px){.acm-hero__copy{display:flex;flex-direction:column}.acm-hero__copy>.acm-microproof{order:2}.acm-hero__copy>.acm-hero__actions{order:1;margin-top:1.25rem}}

/* Show conversion content immediately on phones; preserve background motion. */
@media (max-width:767px){html:not(.acm-entered) .acm-hero .acm-ent,html:not(.acm-entered) .acm-hero__title .acm-line{animation:none!important;opacity:1!important;transform:none!important;clip-path:none!important}}

/* 31 October: static phone experience and form closer to the title. */
@media (max-width: 767px) {
  .acm-page *, .acm-page *::before, .acm-page *::after {
    animation: none !important;
    transition: none !important;
  }
  html { scroll-behavior: auto !important; }
  .acm-hero { padding-top: 6rem; }
  .acm-hero__layout { gap: 1.25rem; }
  .acm-hero__title { font-size: clamp(1.55rem, 6.8vw, 2.3rem); margin-bottom: 1rem; }
  .acm-hero__copy > .acm-eyebrow { margin-bottom: .75rem; }
  .acm-proposta { font-size: 1rem; line-height: 1.5; margin-bottom: 0; }
  .acm-panel { padding: 1rem; padding-bottom: 3.25rem; }
  .acm-panel__text { margin-bottom: 1rem; }
  .acm-hero__details { min-width: 0; }
  .acm-hero__details > .acm-hero__sub { font-size: 1rem; }
  .acm-marquee__track { width: 100%; flex-wrap: wrap; justify-content: center; }
  .acm-reveal, .acm-split, .acm-word { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

/* Client evidence is visible in the hero independently from the form height. */
.acm-hero-proof { margin: 1.25rem 0; }
.acm-hero-proof p { color: var(--acm-text-dim); font-size: .75rem; margin: 0 0 .65rem; }
.acm-hero-proof ul { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); align-items:center; gap:.75rem; margin:0; padding:0; list-style:none; }
.acm-hero-proof li { min-width:0; display:flex; align-items:center; justify-content:center; height:44px; }
body.acm-page .acm-hero-proof img { width:100%; height:auto; max-height:40px; object-fit:contain; filter:brightness(0) invert(1); }
@media(max-width:767px) {
 .acm-hero-proof { margin:1rem 0 0; }
 .acm-hero-proof p { font-size:.7rem; margin-bottom:.4rem; }
 .acm-hero-proof ul { grid-template-columns:repeat(3,minmax(0,1fr)); gap:.35rem .8rem; }
 .acm-hero-proof li { height:32px; }
 body.acm-page .acm-hero-proof img { max-width:96px; max-height:30px; }
}

/* Selezione statica: prova sociale leggibile senza caroselli duplicati. */
body.acm-page .acm-client-selection {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.acm-page .acm-client-selection .acm-marquee__item {
  width: auto;
  min-width: 0;
  height: 112px;
  border: 1px solid var(--acm-hair-dark);
  border-radius: 12px;
}
body.acm-page .acm-client-selection img {
  max-width: min(80%, 140px);
  max-height: 96px;
  opacity: .9;
}
@media (max-width: 600px) {
  body.acm-page .acm-client-selection { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.acm-page .acm-client-selection .acm-marquee__item { height: 88px; }
  body.acm-page .acm-client-selection img { max-height: 80px; }
}

/* Crop only transparent margins of square logo assets through CSS. */
.acm-hero-proof li { overflow:hidden; }
body.acm-page .acm-hero-proof img { width:100%; height:100%; max-width:none; max-height:none; object-fit:cover; }