/* Autotrasporti Marconi — riferimento: pallex.it. Sfondo scuro quasi nero su
   tutto il sito (non un gradiente rosso: "leggeva" come una slide, non come un
   sito), foto a piena pagina con velo scuro per far risaltare il testo, testo
   grande e libero SENZA card/vetro — il rosso resta solo un accento (bottoni,
   dettagli), non un colore dominante. */

:root {
  --red: #8B0000;
  --red2: #BA1010;
  --red-deep: #200A0A;
  --red-deep2: #3B1210;
  --gold: #B8860B;
  --gold2: #D2A63A;
  --bg: #0B0B0D;
  --bg2: #14100F;
  --ink: #F3EEE7;
  --muted: rgba(243,238,231,.62);
  --line: rgba(255,255,255,.14);
  --header-h: 96px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* NIENTE "scroll-behavior: smooth" qui: lo scroll orizzontale della pellicola
   è già animato in modo fluido da GSAP (scrub 1:1 sullo scroll nativo); se il
   browser aggiunge la SUA animazione smooth sopra a quella, le due si accavallano
   e il riaggancio a fine scroll può restare a metà tra due slide per centinaia
   di millisecondi, mostrando un pezzo della slide successiva. Dove serve uno
   scroll animato in modo intenzionale (link nel menu) lo si richiede caso per
   caso in main.js con { behavior: "smooth" }, mai come default globale. */

body {
  font-family: Inter, system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 74px;
}

/* HEADER */
header.site-header {
  position: sticky;
  top: 0;
  height: var(--header-h);
  display: grid;
  grid-template-columns: 260px 1fr 220px;
  align-items: center;
  padding: 0 74px;
  background: linear-gradient(135deg, var(--red), var(--red2));
  border-bottom: 1px solid rgba(0,0,0,.15);
  z-index: 200;
}

.logo { width: max-content; line-height: .78; }
.logo img { height: 54px; width: auto; display: block; }

.topnav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 15px;
  font-weight: 650;
}

.topnav a { position: relative; padding: 12px 0; color: rgba(255,255,255,.8); }
.topnav a.active { color: #fff; }
.topnav a.active:after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 2px;
  background: var(--gold2);
}

.sep { width: 1px; height: 18px; background: rgba(255,255,255,.3); }

.btn-gold {
  min-height: 48px;
  padding: 0 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  color: #fff;
  font-weight: 800;
  box-shadow: 0 14px 25px rgba(0,0,0,.28);
  border: 0;
  cursor: pointer;
  font: inherit;
  transition: transform .28s ease, box-shadow .28s ease, filter .28s ease;
}

.btn-gold:hover {
  transform: translateY(-3px);
  filter: brightness(1.06);
  box-shadow: 0 18px 34px rgba(0,0,0,.34), 0 0 0 4px rgba(210,166,58,.14);
}

.btn-gold:active { transform: translateY(-1px) scale(.99); }

.btn-outline {
  min-height: 48px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--gold);
  font-weight: 800;
  border: 1px solid var(--gold2);
  border-radius: 8px;
  background: rgba(255,255,255,.9);
  transition: transform .28s ease, box-shadow .28s ease, background .28s ease;
}

.btn-outline:hover {
  transform: translateY(-3px);
  background: #fff;
  box-shadow: 0 16px 30px rgba(0,0,0,.24);
}

/* CTA persistente in header: riquadro oro elegante, vetro smerigliato sopra al
   rosso della header (qui il blur è sicuro: un solo elemento fisso, nessun
   rischio del bug di Chromium visto con tante card sovrapposte nel track). */
.btn-cta {
  min-height: 48px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 8px;
  background: var(--gold2);
  border: 1.5px solid var(--gold2);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  font: inherit;
  box-shadow: 0 4px 16px rgba(0,0,0,.35), 0 0 0 3px rgba(210,166,58,.18);
  transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
  justify-self: end;
}

.btn-cta:hover {
  background: var(--gold);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,.4), 0 0 0 5px rgba(210,166,58,.25);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}

/* PELLICOLA — scroll verticale nativo che pilota una traslazione orizzontale (GSAP ScrollTrigger).
   Il footer sta DENTRO .stage, sotto al track: così resta fermo e visibile su
   ogni slide mentre il track scorre in orizzontale sopra di lui (è il track a
   restringersi di conseguenza, non lo stage). */
.stage {
  position: relative;
  height: calc(100vh - var(--header-h));
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Livello di sfondo condiviso, FERMO dietro al track che invece scorre in
   orizzontale: le foto non scorrono più insieme al testo, restano ferme e si
   dissolvono l'una nell'altra a schermo intero mentre si scrolla (rif.
   pallex.it — "la foto sparisce e ne appare un'altra", non un taglio netto).
   L'animazione di dissolvenza viene pilotata da GSAP in js/main.js. */
.bg-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.bg-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
}
.bg-slide:first-child { opacity: 1; }
.bg-slide video { width: 100%; height: 100%; object-fit: cover; display: block; }
.bg-slide:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,11,13,.55) 0%, rgba(11,11,13,.75) 55%, rgba(11,11,13,.92) 100%);
}
/* sulla foto dei contatti (con l'insegna dell'azienda sull'edificio) il velo è
   più coperto: deve restare solo un'eco dietro al modulo, non leggibile */
.bg-slide--dark:after {
  background: linear-gradient(180deg, rgba(11,11,13,.82) 0%, rgba(11,11,13,.9) 55%, rgba(11,11,13,.96) 100%);
}

.track { display: flex; flex: 1 1 auto; min-height: 0; position: relative; z-index: 1; }

.track > section {
  width: 100vw;
  flex: 0 0 100vw;
  height: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* nessuno sfondo qui: la foto/il colore di base vivono nel .bg-layer fermo
     dietro al track (vedi sopra) */
  background: none;
}

.track > section:not(.hero):not(.statement) {
  align-items: center;
  justify-content: center;
  text-align: center;
}
.track > section:not(.hero):not(.statement) > * {
  max-width: 1320px;
  width: 100%;
  position: relative;
  z-index: 1;
}
/* i paragrafi con una larghezza massima propria (style="max-width:...") vanno
   centrati anche come blocco, non solo il testo dentro */
.track > section:not(.hero):not(.statement) p {
  margin-left: auto;
  margin-right: auto;
}

/* SECTIONS */
section {
  padding: 52px 74px;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--gold2);
  font-weight: 900;
  font-size: 15px;
  margin-bottom: 16px;
}

.kicker:before { content: ""; width: 30px; height: 2px; background: var(--gold2); }

h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-weight: 900; letter-spacing: -.045em; line-height: .98; }

/* Testi grandi, come in pallex.it: titoli più imponenti di prima. */
h2 {
  font-size: clamp(44px, 4.9vw, 74px);
  color: var(--ink);
  margin-bottom: 18px;
}

h3 { color: var(--ink); }

p { color: rgba(243,238,231,.82); font-size: clamp(17px, 1.05vw, 19px); line-height: 1.62; }
.lead { font-size: clamp(22px, 1.55vw, 26px); font-weight: 600; color: var(--ink); }

/* HERO (home) — quando c'è una foto/video di sfondo il testo resta centrato in
   orizzontale ma ancorato in BASSO, non centrato in verticale: vale come regola
   anche per gli sviluppi futuri con sfondi fotografici.
   Nota: qui dentro flex-direction è "column" (ereditato da ".track > section",
   più specifico di ".hero"), quindi l'asse principale (justify-content) è
   quello VERTICALE e l'asse trasversale (align-items) è quello ORIZZONTALE:
   esattamente l'opposto di un flex "row" — occhio a non invertirli di nuovo.
   Selettore ".track > section.hero" (non solo ".hero"): stessa specificità di
   ".track > section" di base, altrimenti quella vince e sovrascrive silenziosamente
   questo justify-content, ricentrando il contenuto invece di ancorarlo in basso. */
.track > section.hero {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  overflow: hidden;
  padding: 40px 74px 70px;
}

/* la foto/video di sfondo della hero vive ora in .bg-slide[data-bg="s-home"]
   dentro .bg-layer (fermo dietro al track, con dissolvenza pilotata da GSAP) */
.bg-slide[data-bg="s-home"]:after {
  background: linear-gradient(100deg, rgba(10,4,4,.68) 0%, rgba(40,14,12,.4) 35%, rgba(20,8,8,.12) 65%, rgba(10,4,4,0) 100%);
}

.hero-inner { position: relative; z-index: 2; max-width: 760px; min-width: 0; margin: 0 auto; }

.hero .lead {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
  color: rgba(255,255,255,.92);
  font-size: clamp(20px, 1.35vw, 22px);
  line-height: 1.45;
}
.hero .stat b { font-size: 26px; width: 100px; min-width: 100px; height: 60px; border-radius: 12px; }
.hero .stat span { color: rgba(255,255,255,.72); font-size: 13.5px; max-width: 190px; line-height: 1.4; }
.hero .stats { justify-content: center; gap: 34px; flex-wrap: nowrap; }
.hero .stat { gap: 16px; }

.hero .actions .btn-gold,
.hero .actions .btn-outline {
  min-height: 58px;
  padding: 0 34px;
  font-size: 18px;
  gap: 14px;
  border-radius: 10px;
}

.actions { display: flex; justify-content: center; gap: 16px; margin-top: 20px; flex-wrap: wrap; }
.hero .actions, .statement .actions { justify-content: center; }

/* GRID / SPLIT LAYOUTS */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .9fr);
  gap: 48px;
  align-items: stretch;
}

.split > .photo { height: 100%; }

/* Blocchi testo con sfondo semi trasparente e blur: il contenuto resta dentro
   la fotografia di sfondo, ma non sembra appoggiato direttamente sull'immagine. */
.copy {
  max-width: 560px;
  height: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.copy,
.statement-inner {
  position: relative;
  overflow: hidden;
  padding: clamp(22px, 3vw, 36px);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(30,20,10,.42), rgba(11,11,13,.3));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 0 60px rgba(210,166,58,.06),
    0 24px 70px rgba(0,0,0,.28);
  backdrop-filter: blur(26px) saturate(1.5);
  -webkit-backdrop-filter: blur(26px) saturate(1.5);
  transition: border-color .35s ease, box-shadow .35s ease;
}

.copy:hover,
.statement-inner:hover {
  border-color: rgba(210,166,58,.48);
}

/* Riflesso diagonale per accentuare l'effetto vetro */
.copy:before,
.statement-inner:before {
  content: "";
  position: absolute;
  inset: -40% -20%;
  background: linear-gradient(115deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 68%, rgba(210,166,58,.1) 100%);
  pointer-events: none;
  z-index: 0;
}

.copy > *,
.statement-inner > * { position: relative; z-index: 1; }

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin: 20px 0 20px;
}

.stat { display: flex; align-items: center; gap: 12px; text-align: left; }
.stat b {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  min-width: 68px;
  height: 42px;
  padding: 0 10px;
  border: 1.5px solid var(--gold2);
  border-radius: 10px;
  color: var(--gold2);
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  flex-shrink: 0;
}
.stat span { display: block; max-width: 170px; font-size: 12.5px; line-height: 1.35; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

.photo {
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0,0,0,.2);
  cursor: zoom-in;
  box-shadow: 0 30px 60px -8px rgba(0,0,0,.42), 0 10px 22px -6px rgba(0,0,0,.28);
  transition: transform .38s ease, box-shadow .38s ease, filter .38s ease;
}

.photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.photo:hover {
  box-shadow: 0 28px 74px rgba(0,0,0,.34);
}
.photo:hover img { transform: scale(1.055); }

/* Lightbox: ogni foto (e ogni foto di flotta) si ingrandisce al click */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20,8,8,.86);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
  padding: 40px;
  cursor: zoom-out;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  transform: scale(.94);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.lightbox.open img { transform: scale(1); }

.map-embed {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
}

.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

.photo-stack { display: grid; gap: 14px; height: 100%; }
/* stessa altezza del blocco di testo affiancato (.copy): con .split in
   align-items:stretch la riga della grid è già alta quanto il testo, qui
   basta riempirla invece di forzare un aspect-ratio indipendente */
.photo.tall, .photo-stack .photo.tall {
  width: 100%;
  height: 100%;
  justify-self: stretch;
}
.photo-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(300px, 480px));
  justify-content: center;
  gap: clamp(24px, 2.4vw, 38px);
  max-width: 1060px;
  margin-left: auto;
  margin-right: auto;
}
.photo-row .photo {
  /* altezza legata al vh (non solo alla larghezza via aspect-ratio): su schermi
     larghi ma non altissimi (es. monitor ultrawide) la foto non deve crescere
     fino a "spingere" il resto del contenuto fuori dallo slide */
  height: clamp(180px, 28vh, 320px);
}

/* CARDS / GRID SERVIZI — nessuno sfondo pieno: solo un filo per separare, come "appesi" sul gradiente */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 24px;
}

/* Variante a 2 righe da 4, per griglie con esattamente 8 elementi (es. Servizi) */
@media (min-width: 900px) {
  .services-grid.grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Il collasso "Scopri di più" era gestito solo nel media query mobile stretto:
   su desktop la sezione mostrava sempre tutte le card (anche le --extra),
   traboccando in altezza e sovrapponendosi al footer fisso durante lo scroll. */
.services-grid.is-collapsed .card--extra { display: none; }

/* Niente card/vetro: solo un sottile confine in basso, come una lista che
   fluttua sullo sfondo scuro (rif. pallex.it). */
.card {
  min-height: 100px;
  border-bottom: 1px solid var(--line);
  padding: 0 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  transition: transform .32s ease, border-color .32s ease, background .32s ease, box-shadow .32s ease;
}

a.card { cursor: pointer; }

.card:hover { transform: translateY(-7px); border-color: rgba(210,166,58,.45); }
.card:hover .ico { transform: scale(1.1) rotate(-6deg); }

.ico {
  width: 42px; height: 42px;
  border: 1.5px solid var(--gold2);
  color: var(--gold2);
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 18px;
  flex-shrink: 0;
  transition: transform .3s ease;
}

.card h3 { font-size: 20px; line-height: 1.18; margin: 0 0 8px; }
.card p { font-size: 16px; line-height: 1.5; margin: 0; }

#s-servizi .services-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 22px);
  max-width: 1260px;
  margin: 10px auto 0;
}

/* Con tutte le 8 card espanse ("Scopri di più") il contenuto puo' superare
   l'altezza fissa della sezione: invece di tagliarlo o farlo sconfinare sul
   footer, in quel caso la sezione diventa scrollabile verticalmente al suo interno. */
#s-servizi:has(.services-grid:not(.is-collapsed)) {
  overflow-y: auto;
  justify-content: flex-start;
  padding-top: 28px;
  padding-bottom: 28px;
}
#s-servizi .card {
  position: relative;
  overflow: hidden;
  min-height: 108px;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(11,11,13,.34), rgba(64,28,20,.18));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 20px 60px rgba(0,0,0,.18);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  transition: transform .32s ease, border-color .32s ease, background .32s ease, box-shadow .32s ease;
}
#s-servizi .card .ico {
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  color: var(--gold2);
  font-size: 15px;
  letter-spacing: .16em;
  line-height: 1;
}
#s-servizi .card:after {
  content: "";
  position: absolute;
  inset: auto 16px 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold2), transparent);
  opacity: 0;
  transform: scaleX(.45);
  transition: opacity .35s ease, transform .35s ease;
}
#s-servizi .card:hover {
  transform: translateY(-9px);
  border-color: rgba(210,166,58,.48);
  background: linear-gradient(135deg, rgba(15,14,14,.48), rgba(120,36,26,.2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 32px 86px rgba(0,0,0,.28);
}
#s-servizi .card:hover:after { opacity: 1; transform: scaleX(1); }
#s-servizi .card:hover .ico { transform: translateY(-2px); color: #ffd968; }
.services-actions { margin-top: auto; margin-bottom: auto; }
.services-more-btn { display: flex; justify-content: center; width: 100%; margin: 10px 0 0; font: inherit; cursor: pointer; }
.services-more-btn span { transition: transform .28s ease; }
.services-more-btn.is-open span { transform: rotate(180deg); }

.wide-strip {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 260px 1fr 180px;
  gap: 20px;
  align-items: center;
  padding: 14px 0 0;
}

.wide-strip-title { color: var(--ink); font-size: 22px; line-height: 1.08; font-weight: 900; }

.benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.benefits b { display: block; font-size: 13px; color: var(--ink); }
.benefits span { display: block; font-size: 12px; color: var(--muted); line-height: 1.3; }

/* FLEET CARDS */
.fleet-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  max-width: 1080px;
  margin: 12px auto 0;
}

/* Niente scatola: resta solo la foto (arrotondata, quella è un'immagine, non
   una "card"); il testo sotto fluttua libero. */
.fleet-card {
  transition: transform .3s ease;
}

.fleet-card:hover { transform: translateY(-6px); }

.fleet-img { height: clamp(220px, 36vh, 320px); position: relative; overflow: hidden; border-radius: 12px; background: rgba(0,0,0,.2); cursor: zoom-in; }
.fleet-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.fleet-card:hover .fleet-img img { transform: scale(1.08); }

.fleet-body { padding: 12px 4px 0; }
.fleet-body h3 { color: var(--ink); font-size: 18px; text-transform: uppercase; margin: 0 0 10px; }
.fleet-body ul { list-style: none; padding: 0; margin: 0; font-size: 15px; line-height: 1.65; color: rgba(243,238,231,.76); }
.fleet-body li:before { content: "\2713"; color: var(--gold2); font-weight: 900; margin-right: 8px; }

.badges-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.badge {
  text-align: center;
  border-top: 1px solid var(--line);
  padding: 16px 8px 0;
  transition: transform .32s ease, border-color .32s ease, color .32s ease;
}
.badge:hover { transform: translateY(-7px); border-color: rgba(210,166,58,.62); }
.badge .ico { transition: transform .3s ease; }
.badge:hover .ico { transform: scale(1.15) rotate(-6deg); }
.badge .ico { border-color: var(--gold2); color: var(--gold2); margin: 0 auto 6px; }
.badge b { display: block; font-size: 17px; color: var(--ink); }
.badge span { font-size: 14px; color: var(--muted); }

/* LOGISTICA */
.mini-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.mini {
  min-height: 96px;
  padding: 16px 8px 0;
  border-top: 1px solid var(--line);
  text-align: center;
  transition: transform .3s ease;
}

.mini:hover { transform: translateY(-4px); }

.mini .ico { width: 30px; height: 30px; margin: 0 auto 7px; font-size: 13px; }
.mini:hover .ico { transform: scale(1.12) rotate(-6deg); }
.mini b { display: block; font-size: 14px; margin-bottom: 4px; color: var(--ink); }
.mini p { font-size: 12px; line-height: 1.35; margin: 0; }

.process-title {
  margin-top: 14px;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gold2);
  font-weight: 900;
}

/* linea temporale: gli step si alternano sopra/sotto la linea (01 sopra, 02 sotto, ecc.),
   agganciati al confine tra le due righe della grid — non a un top fisso in px, così
   resta preciso anche se l'altezza del contenuto cambia. */
.process {
  position: relative;
  margin-top: 8px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: auto auto;
  column-gap: 20px;
  row-gap: 0;
  padding: 30px 0;
}

/* linea che collega gli step: parte spenta e si "disegna" in scrub con lo scroll (vedi main.js) */
.process-track {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: start;
  margin-top: -1px;
  height: 2px;
  background: rgba(255,255,255,.14);
  z-index: 0;
}
.process-track .process-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--gold2), var(--gold));
  transform: scaleX(0);
  transform-origin: left center;
}

.step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.step-num { color: var(--gold2); font-size: 38px; font-weight: 900; }
.step b { display: block; font-size: 18px; color: var(--ink); margin-bottom: 3px; }
.step span { display: block; font-size: 14px; color: var(--muted); line-height: 1.4; }

/* alterna sopra/sotto: dispari (01, 03, 05) sopra la linea, pari (02, 04) sotto */
.step-up { grid-row: 1; align-self: end; padding-bottom: 26px; }
.step-down { grid-row: 2; align-self: start; padding-top: 26px; }
.step:nth-child(2) { grid-column: 1; }
.step:nth-child(3) { grid-column: 2; }
.step:nth-child(4) { grid-column: 3; }
.step:nth-child(5) { grid-column: 4; }
.step:nth-child(6) { grid-column: 5; }

/* pallino nel punto in cui ogni step "aggancia" la linea */
.step-up:before, .step-down:before {
  content: "";
  position: absolute;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold2);
  transform: translateX(-50%);
  z-index: 2;
}
.step-up:before { bottom: -4px; }
.step-down:before { top: -4px; }

/* VALORI: pochi concetti, grandi e leggibili. */
.track > section.values-slide {
  align-items: flex-start;
  text-align: left;
}

.track > section.values-slide p {
  margin-left: 0;
  margin-right: 0;
}

.values-slide h2 {
  max-width: 1080px;
  font-size: clamp(50px, 5.5vw, 78px);
  margin-bottom: 18px;
}

.values-lead {
  max-width: 680px;
  margin-bottom: 34px;
  color: rgba(255,255,255,.86);
  font-size: clamp(22px, 1.5vw, 26px);
}

.value-pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 1.8vw, 28px);
  max-width: 1260px;
}

.value-pillars article {
  position: relative;
  min-height: 226px;
  padding: 24px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(135deg, rgba(11,11,13,.34), rgba(64,28,20,.18));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 20px 60px rgba(0,0,0,.18);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  overflow: hidden;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease, background .35s ease;
}

.value-pillars article:after {
  content: "";
  position: absolute;
  inset: auto 20px 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold2), transparent);
  opacity: 0;
  transform: scaleX(.45);
  transition: opacity .35s ease, transform .35s ease;
}

.value-pillars article:hover {
  transform: translateY(-10px);
  border-color: rgba(210,166,58,.48);
  background: linear-gradient(135deg, rgba(15,14,14,.48), rgba(120,36,26,.2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 32px 86px rgba(0,0,0,.28);
}

.value-pillars article:hover:after {
  opacity: 1;
  transform: scaleX(1);
}

.value-pillars span {
  display: block;
  color: var(--gold2);
  font-size: clamp(38px, 4.8vw, 68px);
  line-height: .82;
  font-weight: 900;
  letter-spacing: -.03em;
  margin-bottom: 22px;
}

.value-pillars h3 {
  font-size: 25px;
  line-height: 1.05;
  margin-bottom: 10px;
}

.value-pillars p {
  color: rgba(255,255,255,.76);
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
}

#s-officina > p {
  max-width: 760px !important;
  font-size: clamp(20px, 1.35vw, 23px);
  line-height: 1.5;
}

#s-officina .photo-row {
  margin-top: clamp(10px, 2vh, 28px) !important;
}

/* PERSONE e OFFICINA: 3 foto affiancate invece delle 2 di base */
#s-persone .photo-row,
#s-officina .photo-row {
  grid-template-columns: repeat(3, minmax(220px, 340px));
}

#s-officina .badges-row {
  max-width: 1180px;
  margin: clamp(8px, 1.6vh, 26px) auto 0 !important;
  gap: clamp(18px, 2vw, 30px);
}

#s-officina .badge b { font-size: 18px; }
#s-officina .badge span { font-size: 15px; }

/* SLIDE DENSA (valori + certificazioni + sicurezza + clienti): tutto più compatto per stare in un solo schermo */
.value-groups.dense { display: grid; gap: 10px; margin-top: 4px; }
.value-groups .group-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gold2);
  font-weight: 900;
  margin: 0 0 6px;
}
.value-groups.dense .services-grid,
.value-groups.dense .badges-row,
.value-groups.dense .mini-grid { margin-top: 0; gap: 8px; }
.value-groups.dense .card { padding: 0 0 8px; min-height: 78px; gap: 6px; }
.value-groups.dense .card .ico { width: 28px; height: 28px; font-size: 12px; border-radius: 8px; }
.value-groups.dense .card h3 { font-size: 12.5px; margin-bottom: 3px; }
.value-groups.dense .card p { font-size: 10.5px; line-height: 1.25; }
.value-groups.dense .mini { min-height: 64px; padding: 8px 6px; }
.value-groups.dense .badge { padding: 8px 6px; border-radius: 9px; }
.value-groups.dense .badge .ico { width: 24px; height: 24px; font-size: 11px; margin-bottom: 3px; }
.value-groups.dense .badge b { font-size: 11.5px; }
.value-groups.dense .badge span { font-size: 9.5px; }

/* effetto in più sulle card de "I nostri valori": un alone dorato dietro l'icona al passaggio */
.value-groups.dense .services-grid .card { position: relative; }
.value-groups.dense .services-grid .card:hover .ico {
  box-shadow: 0 0 0 7px rgba(210,166,58,.16);
}

.clients-line { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: baseline; }
.clients-line b { font-size: 14px; color: var(--ink); }
.clients-line span { font-size: 12px; color: var(--muted); }

/* STATEMENT — slide a piena pagina con foto di sfondo e testo senza box, "appeso nel nulla".
   Stesso discorso della hero: qui flex-direction è "column" (da ".track > section"),
   quindi justify-content è l'asse verticale (in basso) e align-items quello
   orizzontale (centrato) — non il contrario. Selettore ".track > section.statement"
   per la stessa ragione di ".track > section.hero" sopra (specificità). */
.track > section.statement {
  position: relative;
  min-height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  overflow: hidden;
  color: #fff;
  padding-bottom: 84px;
}

.statement-inner { position: relative; z-index: 2; max-width: 720px; }
.statement .kicker { justify-content: center; }
.statement h2 { color: #fff; }
.statement p { color: rgba(255,255,255,.85); }
.statement .actions { justify-content: center; }

.benefits-float { display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; margin: 20px 0 24px; }
.benefits-float div { min-width: 130px; }
.benefits-float b { display: block; color: #fff; font-size: 14px; margin-bottom: 4px; }
.benefits-float span { display: block; color: rgba(255,255,255,.72); font-size: 11px; line-height: 1.3; }

/* LAVORA CON NOI */
.job-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 24px;
}

.job {
  border-top: 1px solid var(--line);
  padding: 20px 0 0;
  min-height: 130px;
  transition: transform .3s ease;
}
.job:hover { transform: translateY(-6px); }
.job h3 { color: var(--ink); font-size: 18px; text-transform: uppercase; margin: 0 0 8px; }
.job p { color: rgba(243,238,231,.72); font-size: 15px; line-height: 1.45; }
.job a { color: var(--gold2); font-size: 12px; font-weight: 800; }

/* CONTATTI */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.contact-card {
  min-height: 200px;
  border-top: 1px solid var(--line);
  padding: 20px 0 0;
}

/* La card col form resta leggermente segnata (serve capire dove cliccare per scrivere) */
.contact-grid + .contact-card {
  border-top: 0;
  padding: 0;
}

.contact-card h3 { color: var(--ink); text-transform: uppercase; font-size: 13px; letter-spacing: .02em; margin: 0 0 16px; }

.contact-row { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 18px; }
.round {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(210,166,58,.14);
  color: var(--gold2);
  display: grid; place-items: center;
  font-weight: 900;
}
.contact-row b { color: var(--ink); display: block; margin-bottom: 2px; }
.contact-row span { color: var(--muted); font-size: 13px; }

.contact-banner {
  margin-top: 26px;
  min-height: 76px;
  border-top: 1px solid var(--gold2);
  color: #fff;
  display: grid;
  grid-template-columns: 1.2fr 1.1fr .9fr;
  gap: 20px;
  align-items: center;
  padding: 18px 0 0;
}

.contact-banner b { font-size: 19px; line-height: 1.15; color: var(--ink); }
.contact-banner p { color: rgba(243,238,231,.75); margin: 0; font-size: 13px; }

.white-outline {
  border: 1px solid var(--gold2);
  color: var(--gold2);
  border-radius: 8px;
  padding: 12px 16px;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}

input, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 13px;
  margin-bottom: 10px;
  outline: none;
  font: inherit;
  background: rgba(255,255,255,.05);
  color: var(--ink);
}

input::placeholder, textarea::placeholder { color: rgba(244,238,231,.4); }
textarea { height: 84px; resize: none; }

/* FOOTER — compatto: sta dentro .stage su ogni slide (vedi .track sopra), quindi
   deve restare basso in altezza pur mostrando tutte le info per intero. */
footer.site-footer {
  position: relative;
  z-index: 2;
  background: linear-gradient(135deg, var(--red), var(--red2));
  color: rgba(255,255,255,.8);
  padding: 18px 74px 10px;
  flex-shrink: 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.2);
}

.footer-grid h4 {
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 6px;
}

.footer-grid a, .footer-grid p {
  display: block;
  color: rgba(255,255,255,.75);
  font-size: 12.5px;
  line-height: 1.5;
  margin: 0;
}

.footer-grid a:hover { color: var(--gold2); }

.footer-logo img { height: 48px; width: auto; }
.footer-logo p { margin-top: 6px; max-width: 320px; line-height: 1.45; }

/* colonna "Il sito": link impilati in verticale */
.footer-grid > div:nth-child(2) { display: flex; flex-direction: column; }
.footer-grid > div:nth-child(2) .footer-links { display: flex; flex-direction: column; gap: 6px; }
.footer-grid > div:nth-child(2) .footer-links a { display: inline-block; }

.footer-legal {
  margin-top: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.footer-legal a { font-size: 11px; color: rgba(255,255,255,.6); }
.footer-legal a:hover { color: var(--gold2); }
.footer-legal .sep { width: 1px; height: 10px; background: rgba(255,255,255,.3); }

/* PAGINE DI SISTEMA (legali, 404, grazie...) — fuori dalla pellicola, contenuto semplice */
.legal-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 72px 24px 100px;
}
.legal-page h1 { font-size: clamp(30px, 4vw, 46px); color: var(--ink); margin-bottom: 8px; }
.legal-page .legal-updated { color: var(--muted); font-size: 13px; margin-bottom: 34px; }
.legal-page h2 { font-size: 20px; margin: 30px 0 12px; }
.legal-page p, .legal-page li { color: rgba(243,238,231,.75); line-height: 1.7; }
.legal-page ul { padding-left: 20px; }

/* RESPONSIVE */

/* Il menu in header (6 voci + CTA) smette di starci su una riga già prima che
   serva disattivare lo scroll orizzontale: qui passa a hamburger, indipendentemente
   dalla pellicola orizzontale che sotto i 900px resta comunque attiva. */
@media (max-width: 1279px) {
  .container { padding: 0 24px; }
  header.site-header {
    grid-template-columns: 1fr auto;
    padding: 16px 24px;
    height: auto;
  }
  .topnav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--red-deep);
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 24px 20px;
    border-bottom: 1px solid rgba(255,255,255,.15);
  }
  .topnav.open { display: flex; }
  .topnav a { color: rgba(255,255,255,.85); }
  .topnav a.active { color: var(--gold2); }
  .topnav a.active:after { background: var(--gold2); }
  .btn-cta { display: none; }
  .nav-toggle { display: flex; }
  .sep { display: none; }
}

/* Schermi desktop "corti" (es. 1366x768): il footer fisso dentro ogni slide
   deve restringersi ulteriormente, altrimenti resta troppo poco spazio per il
   contenuto della slide sopra di lui. */
@media (max-height: 780px) and (min-width: 900px) {
  footer.site-footer { padding: 10px 74px 6px; }
  .footer-grid { gap: 14px; padding-bottom: 8px; }
  .footer-grid h4 { margin-bottom: 4px; }
  .footer-grid a, .footer-grid p { font-size: 11px; line-height: 1.35; }
  .footer-logo img { height: 34px; }
  .footer-logo p { margin-top: 4px; }
  .footer-legal { padding-top: 6px; }
  .track > section:not(.hero):not(.statement) { padding-top: clamp(10px, 2.2vh, 24px); }
  .value-groups.dense { gap: 6px; }
  .value-groups.dense .card { min-height: 64px; }
  .value-groups.dense .mini { min-height: 52px; }
  .values-slide h2 { font-size: clamp(42px, 5vw, 66px); }
  .values-lead { margin-bottom: 18px; }
  .value-pillars article { min-height: 160px; padding: 18px; }
  .value-pillars span { font-size: 42px; margin-bottom: 14px; }
  .value-pillars h3 { font-size: 20px; }
  .value-pillars p { font-size: 14.5px; }
  #s-servizi .services-grid { gap: 10px; margin-top: 10px; }
  #s-servizi .card { min-height: 104px; padding: 12px 16px; }
  #s-servizi .card h3 { font-size: 17px; }
  #s-servizi .card p { font-size: 14px; }
  .photo.tall, .photo-stack .photo.tall, .split > .photo { height: auto; aspect-ratio: 4 / 3; }
  .fleet-img { height: clamp(180px, 30vh, 260px); }
  .photo-row .photo { height: clamp(140px, 20vh, 200px); }
  #s-officina .photo-row { margin-top: 8px !important; }
  #s-officina .badges-row { margin-top: 8px !important; }
}

@media (max-width: 899px) {
  /* sotto i 900px lo scroll orizzontale si disattiva: torna tutto verticale.
     Il .bg-layer fermo con dissolvenza GSAP (foto di sfondo per ogni slide che
     cambiano mentre scrolli in orizzontale) è un effetto solo desktop. Su
     mobile teniamo il primo sfondo (il video della hero) dietro alla hero;
     per le altre sezioni la stessa foto usata sul desktop viene applicata
     direttamente sulla sezione (vedi --section-bg impostata in js/main.js),
     con lo stesso velo scuro per la leggibilità del testo. */
  .bg-layer {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: calc(100vh - var(--header-h));
    overflow: hidden;
    z-index: 0;
  }
  .bg-layer .bg-slide { display: none; }
  .bg-layer .bg-slide:first-child { display: block; opacity: 1; }
  .stage { height: auto; overflow: visible; }
  .track { display: block; height: auto; }
  .track > section {
    width: 100%;
    flex: none;
    height: auto;
    overflow: visible;
    padding-bottom: 80px;
    display: block;
  }
  .track > section:not(.hero) {
    background-image: var(--section-bg, none);
    background-size: cover;
    background-position: center;
  }
  .track > section:not(.hero):before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, rgba(11,11,13,.55) 0%, rgba(11,11,13,.75) 55%, rgba(11,11,13,.92) 100%);
  }
  .track > section.section-bg-dark:before {
    background: linear-gradient(180deg, rgba(11,11,13,.82) 0%, rgba(11,11,13,.9) 55%, rgba(11,11,13,.96) 100%);
  }

  section { padding: 48px 24px; }
  .track > section.hero { padding: 40px 24px 64px; }
  .track > section.statement { padding: 48px 24px; }
  .benefits-float { gap: 18px; }
  .actions { gap: 12px; }
  .actions .btn-gold, .actions .btn-outline { width: 100%; }
  .split, .contact-grid { grid-template-columns: 1fr; }
  .wide-strip, .contact-banner { grid-template-columns: 1fr; }
  .process {
    display: block;
    row-gap: 0;
    padding: 0;
  }
  .step-up, .step-down {
    grid-row: auto;
    align-self: auto;
    padding-bottom: 0;
    padding-top: 0;
    margin-bottom: 28px;
  }
  .step-up:last-child, .step-down:last-child { margin-bottom: 0; }
  .step-up:before, .step-down:before { display: none; }
  .process-track {
    position: absolute;
    grid-column: auto;
    grid-row: auto;
    margin-top: 0;
    left: 50%;
    right: auto;
    top: 12px;
    bottom: 12px;
    height: auto;
    width: 2px;
    transform: translateX(-50%);
  }
  .process-track .process-fill {
    transform: scaleY(0);
    transform-origin: top center;
    background: linear-gradient(180deg, var(--gold2), var(--gold));
  }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  footer.site-footer { padding: 40px 24px 20px; }
  .copy, .statement-inner { padding: 22px; border-radius: 18px; height: auto; }
  .photo-stack { height: auto; }
  .photo.tall, .photo-stack .photo.tall, .split > .photo { height: auto; aspect-ratio: 4 / 3; }
  .values-slide h2 { font-size: clamp(40px, 12vw, 64px); }
  .value-pillars { grid-template-columns: 1fr; }
  .value-pillars article { min-height: auto; }
  #s-servizi .services-grid { grid-template-columns: 1fr; max-width: 560px; }
  #s-servizi .card { min-height: auto; }
  #s-servizi .services-grid.is-collapsed .card--extra { display: none; }
  .services-more-btn { display: flex; justify-content: center; width: 100%; margin: 4px 0 0; }
  .services-actions { margin-top: 28px; margin-bottom: 0; }
  .benefits { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); justify-content: center; text-align: center; }
  .benefits b { font-size: 16px; }
  .benefits span { font-size: 13px; }
  .photo-row { grid-template-columns: 1fr; max-width: 520px; }
  .photo-row .photo { height: auto; aspect-ratio: 4 / 3; }
  .fleet-img { height: clamp(240px, 48vw, 340px); }
}

@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
}