/* ==========================================================================
   ESTRO · Landing "Agenzia di comunicazione e pubblicità Milano"
   --------------------------------------------------------------------------
   File CSS isolato. Non modifica lo stile del sito: tutte le regole sono
   scoped su body.acm-page e i selettori usano il prefisso .acm-.
   Variabili: --acm-*   Classi: .acm-*
   Palette e font ripresi da css/tokens.css e css/base.css del sito pubblico.
   ========================================================================== */

/* ─── FONTS ──────────────────────────────────────────────────────────────
   Stessa strategia del sito: "Special Gothic Expanded One" con display=block
   (il fallback ha metriche diverse e con swap il titolo cambiava larghezza)
   e "TitleFallback" con size-adjust allineato. DM Sans resta su swap.
   I font NON sono piu' importati da qui: i <link> corrispondenti sono
   nell'<head> dell'HTML. Con @import la catena era HTML -> CSS locale ->
   CSS Google -> file dei font; con <link> i due CSS viaggiano in parallelo
   e si perde un round-trip sul percorso critico. */

@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 LOCALI ────────────────────────────────────────────────────── */
body.acm-page {
  --acm-black:    #000000;
  --acm-white:    #FFFFFF;
  --acm-surface:  #F5F5F5;
  --acm-surface2: #EEEEEE;
  --acm-primary:  #DB005A;
  --acm-primary-hover: #a8003f;
  /* Variante del fucsia per TESTO PICCOLO su fondo scuro: #DB005A arriva a
     4.16:1 su nero e 4.0:1 sul pannello #0B0B0B, sotto la soglia AA (4.5:1).
     Questa versione, piu' chiara e leggermente piu' rosa, arriva a 5.21:1 su
     nero e 4.88:1 sul pannello #0B0B0B. Da usare SOLO su fondi scuri: su
     superfici chiare (#F5F5F5) il fucsia di brand #DB005A e' il corretto. */
  --acm-primary-ink: #E8337E;

  --acm-ink:      rgba(0,0,0,0.70);
  --acm-ink-dark: rgba(255,255,255,0.72);
  --acm-line:     rgba(0,0,0,0.12);
  --acm-line-dark:rgba(255,255,255,0.14);

  --acm-display: 'Special Gothic Expanded One', 'TitleFallback', 'Impact', sans-serif;
  --acm-body:    'DM Sans', 'Helvetica Neue', Arial, sans-serif;

  --acm-gutter:  clamp(1.25rem, 5vw, 5rem);
  --acm-maxw:   1440px;
  --acm-py:     clamp(4rem, 8vw, 7.5rem);
  --acm-radius: 22px;

  --acm-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── RESET LOCALE ────────────────────────────────────────────────────── */
/* overflow-x a livello di documento, come nel sito (base.css): i segni
   decorativi che escono dal viewport non allargano la pagina. */
html:has(> body.acm-page) { overflow-x: hidden; }
body.acm-page {
  margin: 0;
  background: var(--acm-black);
  color: var(--acm-white);
  font-family: var(--acm-body);
  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: var(--acm-display);
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0;
  line-height: 0.95;
  letter-spacing: -0.01em;
}
body.acm-page p { margin: 0; text-wrap: pretty; }
body.acm-page ul { list-style: none; margin: 0; padding: 0; }
/* L'altezza di ogni immagine è definita dal suo contesto: qui il reset
   lascia solo il vincolo di larghezza, per non sovrascrivere i ratio. */
body.acm-page img { display: block; max-width: 100%; }
body.acm-page a { color: inherit; text-decoration: none; }
/* `body.acm-page a { color: inherit }` ha specificita' (0,1,2) e batte
   `.acm-btn--primary { color:#fff }` (0,1,0): senza questo blocco i pulsanti
   ad anello erediterebbero il colore del contenitore (nero su fucsia = 4.16:1). */
body.acm-page a.acm-btn--primary { color: var(--acm-white); }
body.acm-page a.acm-btn--ghost { color: var(--acm-white); }
body.acm-page button { font-family: var(--acm-body); cursor: pointer; border: 0; background: none; color: inherit; }

body.acm-page :focus-visible {
  outline: 2px solid var(--acm-primary);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Sul fondo 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; }

/* ─── LAYOUT ──────────────────────────────────────────────────────────── */
.acm-wrap {
  width: 100%;
  max-width: var(--acm-maxw);
  margin-inline: auto;
  padding-inline: var(--acm-gutter);
}
.acm-section { padding-block: var(--acm-py); position: relative; overflow: clip; }
.acm-light { background: var(--acm-surface); color: var(--acm-black); }
.acm-light .acm-eyebrow { color: var(--acm-primary); }
.acm-light .acm-lede { color: var(--acm-ink); }
.acm-magenta { background: var(--acm-primary); color: var(--acm-white); }

.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: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--acm-primary-ink);
  margin: 0 0 1.1rem;
}
.acm-eyebrow--light { color: rgba(255,255,255,0.72); }

.acm-h2 {
  font-size: clamp(2.25rem, 6vw, 5.5rem);
  margin: 0 0 1.5rem;
}
.acm-h2 em, .acm-h3 em { font-style: normal; color: var(--acm-primary); }
.acm-h3 {
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1;
}

/* ─── META SCRITTURA: il grasso dentro i titoli ───────────────────────────
   "Special Gothic Expanded One" e' un display con un solo peso (400): il
   font-weight: 700 produrrebbe un faux-bold slabbrato. Il grasso qui e'
   costruito con un tratto dello stesso colore del testo, dipinto sotto il
   riempimento (paint-order: stroke fill): le lettere si ispessiscono
   davvero, senza sbavature, e restano leggibili anche in fucsia.

   Serve a costruire la meta scrittura: dentro un titolo, la parola che
   tiene il significato ha un peso diverso dal resto della frase. */
.acm-b {
  -webkit-text-stroke: 0.018em currentColor;
  paint-order: stroke fill;
}
/* Su fondi chiari il tratto in nero resta netto; su fondi scuri (hero)
   il colore corrente e' gia' bianco. */
.acm-hero__title .acm-b { -webkit-text-stroke-width: 0.016em; }
.acm-lede {
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: 1.6;
  color: var(--acm-ink-dark);
  max-width: 60ch;
}
.acm-lede strong { color: var(--acm-white); font-weight: 700; }
.acm-light .acm-lede strong { color: var(--acm-black); }
.acm-body { font-size: 1rem; color: var(--acm-ink-dark); }
.acm-light .acm-body { color: var(--acm-ink); }
.acm-body strong { color: var(--acm-white); font-weight: 700; }
.acm-light .acm-body strong { color: var(--acm-black); }

/* Parola gigante di sfondo — firma del sito */
/* La parola fantasma è decorazione pura: il testo vive in un pseudo-elemento
   (content: attr(data-ghost)) e non nel DOM. Così non entra nell'albero di
   accessibilità e non viene valutata come testo da contrasto — resta il
   controllo visivo sull'aria-hidden sull'elemento contenitore. */
.acm-ghostword {
  position: absolute;
  left: var(--acm-gutter);
  top: 0.05em;
  font-family: var(--acm-display);
  font-size: clamp(4rem, 14vw, 12rem);
  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 { color: var(--acm-primary); opacity: 0.10; }
.acm-section > .acm-wrap { position: relative; z-index: 1; }

/* ─── BOTTONI ─────────────────────────────────────────────────────────── */
.acm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem 1.9rem;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
  transition: transform .25s var(--acm-ease), background-color .25s, color .25s, border-color .25s;
  will-change: transform;
}
.acm-btn--primary { background: var(--acm-primary); color: #fff; }
.acm-btn--primary:hover { background: var(--acm-primary-hover); transform: translateY(-2px); }
.acm-btn--ghost {
  border: 1.5px solid rgba(255,255,255,0.42);
  color: var(--acm-white);
  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.24); color: var(--acm-black); }
.acm-light .acm-btn--ghost:hover { border-color: var(--acm-black); background: rgba(0,0,0,0.04); }
.acm-btn__arrow {
  display: inline-block;
  font-family: var(--acm-body);
  font-size: 1rem;
  transition: transform .25s var(--acm-ease);
}
.acm-btn:hover .acm-btn__arrow { transform: translateX(3px); }
.acm-btnrow { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }

/* ─── CTA "VETRO LIQUIDO" ──────────────────────────────────────────────
   Variante del pulsante primario: mantiene il fucsia Estro come colore
   pieno e aggiunge il bordo a hairline luminoso, costruito con la
   tecnica della maschera (::before + mask) invece che con un border.
   Il riflesso interno segue l'angolo della luce: caldo a sinistra,
   freddo a destra, come nel video di riferimento. */
.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: 0.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: rgba(255,255,255,0.08);
}
.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: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  transition: color .2s;
}
.acm-nav a:hover { color: var(--acm-primary); }
.acm-header__cta { padding: 0.78rem 1.4rem; font-size: 0.8125rem; }
.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: 999px;
}
.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(7rem, 13vh, 10rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  /* overflow-x: clip blocca il video e il glow che sforano in orizzontale;
     overflow-y: visible lascia libero l'alone sfocato, che è più alto della
     hero. `clip` + `visible` è una combinazione valida (a differenza di
     `hidden` + `visible`, che forzerebbe `auto`). */
  overflow-x: clip;
  overflow-y: visible;
}
/* I livelli decorativi restano sotto il contenuto: senza z-index esplicito
   un elemento posizionato coprirebbe il titolo (gli elementi posizionati
   dipingono sopra il flusso normale). */
/* ─── SFONDO VIDEO DELLA HERO ────────────────────────────────────────────
   Il wrapper ha overflow hidden: il video è in object-cover e viene
   ritagliato ai bordi. Il contenuto della hero sta sopra, in z-1.

   L'opacità NON ha transition: la dissolvenza è pilotata a frame dal JS
   (requestAnimationFrame), una transition CSS la inseguirebbe e la
   renderebbe imprecisa. */
.acm-hero__video-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.acm-hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
  will-change: opacity;
  /* Il filmato resta un'ATMOSFERA, non un competitor del testo.
     Il footage ha momenti in cui il nastro riempie quasi tutto il campo:
     a quelle brightness' il titolo fucsia sparisce nel nastro. Per questo
     il filmato e' portato a un quarto della luminosita' originale: i
     punti caldi si leggono ancora come forma in movimento, ma in
     nessun fotogramma il testo perde contrasto. Misurato sul fotogramma
     piu' luminoso della clip: titolo fucsia 3,4:1, testi piccoli 5,8:1.

     Inoltre il filmato e' ingrandito e ancorato al basso: l'animazione
     scende nella parte inferiore dell'hero, la fascia del titolo resta
     scura e libera, e la forma in movimento si vede tutta sotto al
     testo, dove non compete con la lettura. */
  filter: brightness(.24) saturate(1.35) contrast(1.08);
  transform: scale(1.32);
  transform-origin: 50% 100%;
}

/* Vela di leggibilita': sotto al testo una base scura controllata.
   Due livelli: una fascia orizzontale per tutta la larghezza (menu,
   occhi e titolo) e un alone morbido sulla colonna di sinistra
   (sottotitolo, pulsante, micro testo). Il blur ammorbidisce i bordi,
   cosi' non si vede nessuno "rettangolo" sopra il filmato.

   Il collage dei lavori sta sopra la vela: le prove restano luminose. */
.acm-hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(3, 7, 18, 0) 0%,
      rgba(3, 7, 18, .90) 7%,
      rgba(3, 7, 18, .93) 15%,
      rgba(3, 7, 18, .93) 31%,
      rgba(3, 7, 18, .55) 38%,
      rgba(3, 7, 18, 0) 45%),
    radial-gradient(72% 44% at 6% 46%,
      rgba(3, 7, 18, .94) 0%,
      rgba(3, 7, 18, .86) 40%,
      rgba(3, 7, 18, 0) 72%);
  filter: blur(24px);
  pointer-events: none;
  z-index: 0;
}

/* Con il video attivo la griglia di puntini diventa rumore sopra il
   filmato: viene spenta. Il bagliore fucsia resta, ridotto: è la firma
   del brand, non una velatura per la leggibilità. */
.acm-hero.has-video .acm-hero__grid { opacity: 0; }
.acm-hero.has-video .acm-hero__glow { opacity: .45; }

.acm-hero__glow {
  position: absolute;
  top: -8%; right: -6%;
  width: min(820px, 92vw); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(219,0,90,0.22) 0%, rgba(219,0,90,0.07) 38%, transparent 66%);
  pointer-events: none;
  z-index: 0;
  transition: opacity .6s var(--acm-ease);
}
.acm-hero__grid {
  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;
}
.acm-hero > .acm-wrap { position: relative; z-index: 1; }

/* Fascia di protezione del logo e del menu: il logo e' fucsia come i
   nastri del filmato, e in alcuni fotogrammi sparirebbe. Scura in alto,
   sfumata verso il basso, senza bordi netti. */
.acm-hero__topbar {
  position: absolute;
  inset: 0 0 auto 0;
  height: 140px;
  background: linear-gradient(180deg,
    rgba(3, 7, 18, .90) 0%,
    rgba(3, 7, 18, .66) 45%,
    rgba(3, 7, 18, 0) 100%);
  pointer-events: none;
  z-index: 0;
}

/* Vestizione di brand del footage: "color" tiene la luminosita' del
   video e ne prende la tinta, quindi i filamenti diventano fucsia mentre
   il nero resta nero e i punti caldi restano caldi. Il blend avviene
   dentro .acm-hero__video-wrap, che e' un contesto di impilamento: il
   video e' il backdrop, il tint e' la sorgente. */
.acm-hero__tint {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 100% at 50% 42%, #FF3D8B 0%, #DB005A 38%, #3E0028 100%);
  mix-blend-mode: color;
  opacity: .92;
  pointer-events: none;
}

/* Titolo a tutta larghezza, come la home del sito: al display di Special
   Gothic serve spazio, e il titolo intero resta in una riga logica che
   l'animazione puo' aprire riga per riga. */
.acm-hero__title {
  font-size: clamp(2.1rem, 4.9vw, 4.6rem);
  line-height: 0.95;
  margin: 0 0 clamp(2rem, 4vw, 3.2rem);
  overflow-wrap: break-word;
}
.acm-hero__title em { font-style: normal; color: var(--acm-primary); }
.acm-line { display: block; }

.acm-hero__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: start;
}
.acm-hero__copy { max-width: 560px; padding-top: 0.4rem; }
.acm-hero__sub {
  font-size: clamp(1.0625rem, 1.35vw, 1.1875rem);
  color: var(--acm-ink-dark);
  max-width: 46ch;
  margin: 0 0 2rem;
}
.acm-hero__micro {
  margin-top: 1.35rem;
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.62);
  max-width: 46ch;
}

/* Collage editoriale: lavori reali, non immagini astratte */
.acm-collage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
}
.acm-collage__item {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: var(--acm-surface2);
  box-shadow: 0 18px 44px rgba(0,0,0,0.45);
}
body.acm-page .acm-collage__item img { width: 100%; height: 100%; object-fit: cover; }
.acm-collage__item:nth-child(1) { aspect-ratio: 1/1; }
.acm-collage__item:nth-child(2) { aspect-ratio: 1/1; margin-top: 2.2rem; }
.acm-collage__item:nth-child(3) { aspect-ratio: 1/1; margin-top: -1.4rem; }
.acm-collage__item:nth-child(4) { aspect-ratio: 1/1; margin-top: 0.8rem; }
.acm-collage__cap {
  grid-column: 1 / -1;
  margin-top: 0.6rem;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  /* Opacita' piu' alta del consueto: la didascalia cade sul filmato in
     movimento e deve restare leggibile anche quando passa un nastro
     chiaro (misurato: 4,4:1 a 0,55 -> 5,5:1 a 0,68). */
  color: rgba(255,255,255,0.68);
}

/* ─── STRISCIA PROVE ──────────────────────────────────────────────────── */
.acm-proofbar { border-top: 1px solid var(--acm-line-dark); border-bottom: 1px solid var(--acm-line-dark); }
.acm-proofbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  padding-block: 1.6rem;
}
.acm-proofbar__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  max-width: 34ch;
  line-height: 1.6;
}
.acm-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem 2.2rem; }
.acm-logos img {
  height: 26px; width: auto;
  filter: grayscale(1) brightness(2.4);
  opacity: 0.62;
  transition: opacity .25s, filter .25s;
}
.acm-logos img:hover { opacity: 1; filter: grayscale(0) brightness(1); }

/* ─── MARQUEE DEI MARCHI ──────────────────────────────────────────────
   Lista scorrevole all'infinito. Il set è duplicato nel DOM per il
   loop continuo: la copia è aria-hidden, per non far leggere due volte
   gli stimi nomi. Si ferma al passaggio del mouse e con prefers-reduced-motion
   diventa una fila statica. */
.acm-marquee {
  position: relative;
  overflow: hidden;
  flex: 1 1 320px;
  min-width: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.acm-marquee__track {
  display: flex;
  align-items: center;
  gap: 2.6rem;
  width: max-content;
  animation: acm-marquee 38s linear infinite;
}
.acm-marquee__dup { display: flex; align-items: center; gap: 2.6rem; }
.acm-marquee img {
  height: 26px; width: auto;
  flex: none;
  filter: grayscale(1) brightness(2.2);
  opacity: 0.66;
  transition: opacity .3s, filter .3s;
}
.acm-marquee img:hover { opacity: 1; filter: grayscale(0) brightness(1); }
.acm-marquee:hover .acm-marquee__track { animation-play-state: paused; }

@keyframes acm-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ─── OFFERTA ─────────────────────────────────────────────────────────── */
.acm-offer__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.acm-offer__title { min-width: 0; }
.acm-offer__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(1.1rem, 2.4vw, 1.9rem);
  min-width: 0;
}

/* ─── IL GATTO ──────────────────────────────────────────────────────────
   Firma animata dello studio, di fianco al titolo "Quattro nuclei, un solo
   progetto". Il video e' quadrato (960x960) e ha gia' il canale alfa: si
   vede il gatto astronauta senza rettangolo di sfondo, e la planeta fucsia
   che porta con se' e' gia' un accento di palette.

   object-fit: contain per non tagliare la coda: nella finestra si vede
   tutto il soggetto. Il poster (un fotogramma leggero, ~30 KB) copre il
   tempo di attesa del download e i browser che non leggono il WebM. */
.acm-cat {
  margin: 0;
  width: clamp(128px, 14vw, 200px);
  flex: none;
}
.acm-cat__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: center center;
}
/* Il gatto galleggia piano: e' l'elemento "che si muove" della sezione.
   Solo translate (proprieta' indipendente): non tocca il transform del
   contenitore e si ferma con prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .acm-cat { animation: acm-float 7s cubic-bezier(.45,0,.55,1) infinite alternate; }
}
@keyframes acm-float {
  from { translate: 0 0; }
  to   { translate: 0 -11px; }
}
.acm-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--acm-line);
  border: 1px solid var(--acm-line);
  border-radius: var(--acm-radius);
  overflow: hidden;
}
.acm-card {
  background: var(--acm-surface);
  padding: 1.9rem 1.6rem 2.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-height: 100%;
}
/* Numerazione decorativa: il testo vive nel pseudo-elemento, quindi non e'
   contenuto testuale valutato dal contrasto (resta aria-hidden sul contenitore). */
.acm-card__num {
  font-family: var(--acm-display);
  font-size: 2.6rem;
  line-height: 1;
  color: rgba(0,0,0,0.16);
}
.acm-card__num::before { content: attr(data-num); }
.acm-card__tag {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--acm-primary);
}
/* Il titolo della card usa il display del sito (Special Gothic), in maiuscolo:
   è il reset dei heading a prevalere, non una scelta separata. */
.acm-card__title { font-size: 1.375rem; line-height: 1.04; font-weight: 400; }
.acm-card__text { font-size: 0.9375rem; color: var(--acm-ink); }
.acm-card__list { display: flex; flex-direction: column; gap: 0.4rem; margin-top: auto; padding-top: 0.6rem; }
.acm-card__list li {
  font-size: 0.875rem;
  color: var(--acm-ink);
  padding-left: 1.1rem;
  position: relative;
}
.acm-card__list li::before {
  content: '';
  position: absolute; left: 0; top: 0.62em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--acm-primary);
}
.acm-offer__foot {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--acm-line);
}
.acm-offer__foot p { font-size: 1.0625rem; max-width: 52ch; }
.acm-offer__foot strong { color: var(--acm-black); }

/* ─── CASI ────────────────────────────────────────────────────────────── */
.acm-cases { display: flex; flex-direction: column; gap: clamp(2.5rem, 5vw, 4.5rem); }
.acm-case {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 3.5vw, 3.5rem);
  align-items: stretch;
  background: #0B0B0B;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--acm-radius);
  overflow: hidden;
}
.acm-case:nth-child(even) .acm-case__media { order: 2; }
.acm-case__media { position: relative; background: #000; min-height: 280px; }
.acm-case__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.acm-case__body { padding: clamp(1.6rem, 3vw, 2.8rem); }
.acm-case__client {
  display: flex; align-items: center; gap: 0.85rem;
  margin-bottom: 1.1rem;
}
/* I loghi dei clienti sono neri su trasparente: sulla card scura vengono
   portati in bianco per restare leggibili. */
.acm-case__client img {
  height: 24px; width: auto; max-width: 140px;
  object-fit: contain; object-position: left center;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
.acm-case__sector {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--acm-primary-ink);
  margin-bottom: 0.7rem;
}
.acm-case__title { font-size: clamp(1.5rem, 2.6vw, 2.3rem); line-height: 1; margin-bottom: 1rem; }
.acm-case__text { color: var(--acm-ink-dark); font-size: 0.9688rem; max-width: 52ch; }
.acm-case__facts {
  margin-top: 1.4rem;
  display: grid;
  gap: 0.55rem;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.acm-case__facts div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 0.8rem; align-items: baseline; }
.acm-case__facts dt {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.acm-case__facts dd { margin: 0; font-size: 0.9375rem; color: rgba(255,255,255,0.86); }
.acm-case__link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: 1.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--acm-primary);
  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); gap: 0.75rem; }

/* ─── METODO ──────────────────────────────────────────────────────────── */
.acm-method__head { max-width: 68ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.acm-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  counter-reset: acmstep;
}
.acm-step { position: relative; padding-top: 1.6rem; border-top: 2px solid var(--acm-black); }
.acm-step::before {
  counter-increment: acmstep;
  content: '0' counter(acmstep);
  display: block;
  font-family: var(--acm-display);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--acm-primary);
  margin-bottom: 0.9rem;
}
.acm-step h3 { font-size: 1.25rem; text-transform: none; font-family: var(--acm-body); font-weight: 700; margin-bottom: 0.6rem; }
.acm-step p { font-size: 0.9375rem; color: var(--acm-ink); }
.acm-team {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.6rem 2.2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--acm-line);
}
.acm-team__faces { display: flex; }
.acm-team__faces img {
  width: 52px; height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--acm-surface);
  margin-left: -14px;
  background: var(--acm-surface2);
}
.acm-team__faces img:first-child { margin-left: 0; }
.acm-team__text { font-size: 0.9375rem; color: var(--acm-ink); max-width: 46ch; }
.acm-team__text strong { color: var(--acm-black); }

/* ─── FAQ ─────────────────────────────────────────────────────────────── */
.acm-faq { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.acm-faq__list { border-top: 1px solid var(--acm-line-dark); }
.acm-faq__item { border-bottom: 1px solid var(--acm-line-dark); }
.acm-faq__q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  text-align: left;
  padding: 1.35rem 0;
  font-size: 1.0625rem;
  font-weight: 700;
  font-family: var(--acm-body);
  color: var(--acm-white);
  transition: color .2s;
}
.acm-faq__q:hover { color: var(--acm-primary); }
.acm-faq__icon {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border: 1.5px solid rgba(255,255,255,0.28);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.9rem; line-height: 1;
  color: var(--acm-primary-ink);
  transition: transform .3s var(--acm-ease);
}
.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.4rem 0;
  font-size: 0.9688rem;
  color: var(--acm-ink-dark);
  max-width: 62ch;
}

/* ─── FORM ────────────────────────────────────────────────────────────── */
.acm-form { max-width: 820px; margin-inline: auto; }
.acm-form__head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.acm-form__head .acm-h2 { font-size: clamp(2rem, 5vw, 4rem); }
.acm-form__head .acm-lede { margin-inline: auto; color: #FFFFFF; }
.acm-formpanel {
  background: #0B0B0B;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--acm-radius);
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
}
.acm-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
.acm-field { display: flex; flex-direction: column; gap: 0.45rem; }
.acm-field--full { grid-column: 1 / -1; }
.acm-field label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255,255,255,0.68);
}
.acm-field label .acm-req { color: var(--acm-primary-ink); }
.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.42);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  color: var(--acm-white);
  font-family: var(--acm-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  transition: border-color .2s, background-color .2s;
  -webkit-appearance: none;
  appearance: none;
}
.acm-field textarea { resize: vertical; min-height: 118px; }
.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.05);
}
.acm-field input[aria-invalid="true"], .acm-field textarea[aria-invalid="true"] { border-color: #ff6b6b; }
.acm-field__error {
  font-size: 0.8125rem;
  color: #ff9d9d;
  min-height: 0;
}
.acm-check {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.62);
  line-height: 1.5;
}
.acm-check input {
  flex-shrink: 0;
  width: 18px; height: 18px;
  margin-top: 2px;
  accent-color: var(--acm-primary);
}
.acm-check a { text-decoration: underline; text-underline-offset: 2px; }
.acm-form__submit { margin-top: 1.6rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
/* Sul fucsia il bianco traslucido scende sotto 4.5:1: qui il testo e' pieno. */
.acm-form__note { font-size: 0.8125rem; color: #FFFFFF; max-width: 40ch; }
.acm-form__preview {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin-bottom: 1.6rem;
  padding: 0.9rem 1.1rem;
  border: 1px dashed rgba(219,0,90,0.6);
  border-radius: 12px;
  background: rgba(219,0,90,0.07);
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.8);
  line-height: 1.55;
}
.acm-form__preview strong { color: #fff; }
.acm-form__preview code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.78em;
  color: #ff8ab8;
  word-break: break-all;
}
.acm-form__success {
  text-align: center;
  padding: clamp(1.5rem, 4vw, 2.5rem) 0;
}
.acm-form__success h3 { font-size: 1.75rem; text-transform: none; font-family: var(--acm-body); font-weight: 700; margin-bottom: 0.7rem; }
.acm-form__success p { color: var(--acm-ink-dark); font-size: 0.9688rem; max-width: 46ch; margin-inline: auto; }
.acm-form__success .acm-btn { margin-top: 1.6rem; }

/* ─── FOOTER ──────────────────────────────────────────────────────────── */
.acm-footer { background: var(--acm-black); padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid rgba(255,255,255,0.08); }
.acm-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  align-items: center;
  justify-content: space-between;
}
.acm-footer p { font-size: 0.8125rem; color: rgba(255,255,255,0.55); }
.acm-footer a { color: rgba(255,255,255,0.68); text-decoration: underline; text-underline-offset: 3px; }
.acm-footer a:hover { color: var(--acm-primary); }
.acm-footer nav { display: flex; flex-wrap: wrap; gap: 1.2rem; font-size: 0.8125rem; }
/* I link del footer sono elementi di navigazione, non testo inline: portano il
   padding per raggiungere i 24px minimi di WCAG 2.5.8 (Target Size AA). */
.acm-footer nav a { display: inline-flex; align-items: center; min-height: 24px; }

/* ─── 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; }
  /* Le parole dei titoli restano visibili: nessuna animazione, nessuna
     attesa, nessun testo che sparisce. */
  .acm-js .acm-split .acm-w__i { opacity: 1 !important; translate: none !important; }
}

/* ─── MOVIMENTO: testo e marcatori nei punti strategici ─────────────────
   Tre livelli, tutti dentro prefers-reduced-motion:no-preference, con
   fallback statico e nessuna animazione sul percorso critico:

   1. I titoli si aprono parola per parola: e' la stessa idea della
      sequenza d'ingresso della hero, ma allo scroll. Il JS splitta il
      titolo in parole (la struttura <em>/<b> viene conservata e il testo
      accessibile resta in .acm-sr), il CSS le alza in sequenza.
   2. I marcatori delle card (i pallini fucsia) e i numeri 01-04 entrano
      con uno scarto per card e per voce di elenco.
   3. I quattro passaggi del metodo entrano 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; }
  }

  /* Scarto per card (indice della card) e per voce dell'elenco. */
  .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:nth-child(4) { --acm-ci: 3; }
  .acm-js .acm-cards.is-in .acm-card__list li:nth-child(1) { --acm-li: 0; }
  .acm-js .acm-cards.is-in .acm-card__list li:nth-child(2) { --acm-li: 1; }
  .acm-js .acm-cards.is-in .acm-card__list li:nth-child(3) { --acm-li: 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-cards.is-in .acm-card__list li::before {
    animation: acm-marker .5s cubic-bezier(.25, .8, .35, 1)
      calc(var(--acm-ci, 0) * .09s + var(--acm-li, 0) * .06s) backwards;
  }

  /* I quattro passaggi del metodo entrano uno dopo l'altro. */
  .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:nth-child(4) { --acm-si: 3; }
  .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,6 s. Il titolo si apre riga per riga
   (clip-path), il resto sale in sequenza. Tutto dentro
   prefers-reduced-motion:no-preference, con fallback statico.

   Regola: si animano solo proprietà indipendenti (translate, scale,
   opacity, clip-path) e mai la scorciatoia `transform`, per non
   sovrascrivere le trasformazioni di layout.

   Il selettore è html:not(.acm-entered): quando il JS ritira l'ingresso
   aggiungendo la classe, le animazioni non si ripetono più. */
@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;
  }

  @keyframes acm-wipe {
    from { clip-path: inset(-.78em 0 calc(100% + .78em) 0); translate: 0 var(--acm-rise); }
    to   { clip-path: inset(-.78em 0 -.78em 0); translate: 0 0; }
  }
  @keyframes acm-lift {
    from { opacity: 0; translate: 0 var(--acm-rise); }
    to   { opacity: 1; translate: 0 0; }
  }
  @keyframes acm-settle {
    from { opacity: 0; translate: 0 calc(var(--acm-rise) * .7); scale: .985; }
    to   { opacity: 1; translate: 0 0; scale: 1; }
  }

  html:not(.acm-entered) .acm-ent--eyebrow { animation: acm-lift .60s var(--acm-ent-soft) .10s backwards; }
  html:not(.acm-entered) .acm-hero__title .acm-line:nth-child(1) { animation: acm-wipe .95s var(--acm-ent-line) .22s backwards; }
  html:not(.acm-entered) .acm-hero__title .acm-line:nth-child(2) { animation: acm-wipe .95s var(--acm-ent-line) .34s backwards; }
  html:not(.acm-entered) .acm-ent--sub    { animation: acm-lift .70s var(--acm-ent-soft) .52s backwards; }
  html:not(.acm-entered) .acm-ent--cta    { animation: acm-lift .80s var(--acm-ent-line) .64s backwards; }
  html:not(.acm-entered) .acm-ent--micro  { animation: acm-lift .60s var(--acm-ent-soft) .74s backwards; }
  html:not(.acm-entered) .acm-ent--c1     { animation: acm-settle .70s var(--acm-ent-soft) .30s backwards; }
  html:not(.acm-entered) .acm-ent--c2     { animation: acm-settle .70s var(--acm-ent-soft) .40s backwards; }
  html:not(.acm-entered) .acm-ent--c3     { animation: acm-settle .70s var(--acm-ent-soft) .50s backwards; }
  html:not(.acm-entered) .acm-ent--c4     { animation: acm-settle .70s var(--acm-ent-soft) .60s backwards; }
}

/* ─── RESPONSIVE ──────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .acm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acm-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
  .acm-faq { grid-template-columns: 1fr; }
  .acm-offer__head { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 900px) {
  .acm-hero__split { grid-template-columns: 1fr; }
  .acm-hero__copy { max-width: 640px; }
  .acm-collage { max-width: 520px; }
  .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: 760px) {
  .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 rgba(255,255,255,0.1);
  }
  .acm-nav.is-open { transform: translateY(0); }
  .acm-nav a { padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 1rem; }
  .acm-burger { display: inline-flex; }
  .acm-header__cta { display: none; }
  .acm-cards { grid-template-columns: 1fr; }
  .acm-steps { grid-template-columns: 1fr; }
  .acm-form__grid { grid-template-columns: 1fr; }
  .acm-case__facts div { grid-template-columns: 1fr; gap: 0.15rem; }
  .acm-proofbar__inner { flex-direction: column; align-items: flex-start; }
  .acm-marquee { width: 100%; flex: none; }
  .acm-collage__item:nth-child(2) { margin-top: 1.1rem; }
  .acm-collage__item:nth-child(3) { margin-top: -0.5rem; }

  /* Su schermo stretto il filmato viene meno ingrandito. Il footage e'
     in 3:2 e il contenitore e' verticale: l'object-fit cover mostra
     gia' solo una fetta stretta della sorgente, e con la scala da
     desktop (1.32) si vedeva un campo piatto. Con un ingrandimento
     minore la struttura dei nastri resta leggibile. */
  .acm-hero__video { transform: scale(1.08); }

  /* La vela su schermo stretto copre tutta la larghezza: l'alone
     radiale di desktop nasce per la colonna di sinistra, mentre qui
     il testo occupa l'intera larghezza. La fascia di protezione
     scende piu' in basso, fino alla fine del blocco di testo. */
  .acm-hero__veil {
    background:
      linear-gradient(180deg,
        rgba(3, 7, 18, 0) 0%,
        rgba(3, 7, 18, .88) 6%,
        rgba(3, 7, 18, .93) 30%,
        rgba(3, 7, 18, .86) 48%,
        rgba(3, 7, 18, .34) 60%,
        rgba(3, 7, 18, 0) 70%),
      radial-gradient(130% 40% at 50% 34%,
        rgba(3, 7, 18, .90) 0%,
        rgba(3, 7, 18, .74) 52%,
        rgba(3, 7, 18, 0) 100%);
  }
}

@media (max-width: 480px) {
  .acm-hero__title { font-size: clamp(1.95rem, 8.6vw, 2.8rem); }
  .acm-collage { gap: 0.6rem; }
  .acm-btn { width: 100%; }
  .acm-btnrow { width: 100%; }
  .acm-team__faces img { width: 44px; height: 44px; margin-left: -11px; }
}

/* Il marquee si ferma: la fila dei loghi resta leggibile in posizione. */
@media (prefers-reduced-motion: reduce) {
  .acm-marquee__track { animation: none; }
  .acm-marquee { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
  .acm-marquee__dup { display: none; }
}