/* ============================================================

   MM Officine Politecniche — style.css

   Direzione: industrial utilitarian, precisione da disegno tecnico

   ============================================================ */



@font-face {

  font-family: "Archivo";

  font-style: normal;

  font-weight: 400 800;

  font-display: swap;

  src: url("../assets/fonts/archivo-latin-variable.woff2") format("woff2");

}

@font-face {

  font-family: "IBM Plex Mono";

  font-style: normal;

  font-weight: 400;

  font-display: swap;

  src: url("../assets/fonts/ibm-plex-mono-latin-400.woff2") format("woff2");

}

@font-face {

  font-family: "IBM Plex Mono";

  font-style: normal;

  font-weight: 500;

  font-display: swap;

  src: url("../assets/fonts/ibm-plex-mono-latin-500.woff2") format("woff2");

}



:root {

  --blue: #1060a8;          /* blu MM campionato dal logo */

  --blue-deep: #0a4478;

  --blue-ink: #08304f;

  --ink: #181b1f;           /* antracite */

  --ink-2: #23272d;

  --steel: #5f6771;

  --line: #d8dce1;

  --line-dark: #33383f;

  --paper: #f4f5f6;

  --white: #ffffff;

  --safety: #e8641c;        /* arancio segnaletica, solo CTA/marcatori */

  --font-display: "Archivo", sans-serif;

  --font-mono: "IBM Plex Mono", monospace;

  --header-h: 88px;

  --header-h-small: 64px;

  --pad: clamp(20px, 5vw, 72px);

  --radius: 2px;

}



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



html { scroll-behavior: smooth; }



body {

  font-family: var(--font-display);

  font-size: 16px;

  line-height: 1.65;

  color: var(--ink);

  background: var(--white);

  -webkit-font-smoothing: antialiased;

}



img { max-width: 100%; display: block; }



a { color: inherit; text-decoration: none; }



/* ---- Lingua: il body porta lang-it, lang-en, lang-fr o lang-de ---- */

[data-lang] { display: none !important; }

.lang-it [data-lang="it"],

.lang-en [data-lang="en"],

.lang-fr [data-lang="fr"],

.lang-de [data-lang="de"] { display: revert !important; }



/* ---- Tipografia ---- */

h1, h2, h3, h4 {

  font-family: var(--font-display);

  font-weight: 800;

  line-height: 1.08;

  letter-spacing: -0.015em;

  text-wrap: balance;

}



h1 { font-size: clamp(2.1rem, 5.4vw, 4.2rem); }

h2 { font-size: clamp(1.7rem, 3.6vw, 2.7rem); }

h3 { font-size: clamp(1.15rem, 2vw, 1.45rem); }



p { max-width: 68ch; }



.lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.6; color: var(--ink-2); }



/* etichetta tecnica monospace — l'ancora visiva del sito */

.kicker {

  font-family: var(--font-mono);

  font-size: 0.78rem;

  font-weight: 500;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: var(--blue);

  display: flex;

  align-items: center;

  gap: 14px;

  margin-bottom: 18px;

}

.kicker::before {

  content: "";

  width: 34px;

  height: 2px;

  background: var(--safety);

  flex: none;

}

.kicker.on-dark { color: #9ec7ec; }



/* variante grande: etichetta di sezione promossa a titolo, centrata */

.kicker-lg {

  font-family: var(--font-display);

  font-size: clamp(1.6rem, 3.2vw, 2.4rem);

  font-weight: 800;

  letter-spacing: -0.01em;

  text-transform: none;

  margin-bottom: 20px;

  justify-content: center;

  text-align: center;

}

.kicker-lg::before { height: 4px; width: 44px; }

/* quando l'etichetta sta da sola sopra il contenuto della sezione (non dentro la colonna di testo) */

.section-kicker { margin-bottom: clamp(32px, 5vw, 52px); }



/* variante ingrandita ma senza ricentrare: resta nella sua posizione originale */

.kicker-big {

  font-family: var(--font-display);

  font-size: clamp(1.25rem, 2.2vw, 1.6rem);

  font-weight: 800;

  letter-spacing: -0.01em;

  text-transform: none;

}



/* ---- Layout ---- */

.wrap { max-width: 1280px; margin: 0 auto; padding-inline: var(--pad); }



section { padding-block: clamp(64px, 9vw, 128px); }



.section-head { max-width: 780px; margin-bottom: clamp(32px, 5vw, 56px); }



/* ---- Header ---- */

.site-header {

  position: fixed;

  inset: 0 0 auto 0;

  z-index: 100;

  height: var(--header-h);

  display: flex;

  align-items: center;

  background: rgba(255, 255, 255, 0.96);

  backdrop-filter: blur(8px);

  border-bottom: 1px solid var(--line);

  transition: height 0.3s ease, box-shadow 0.3s ease;

}

.site-header.scrolled {

  height: var(--header-h-small);

  box-shadow: 0 2px 18px rgba(24, 27, 31, 0.08);

}

.site-header .wrap {

  width: 100%;

  max-width: 1520px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 24px;

}

.brand { flex-shrink: 0; }

.brand img { height: 54px; width: auto; max-width: none; transition: height 0.3s ease; }

.site-header.scrolled .brand img { height: 42px; }



.main-nav { display: flex; align-items: center; gap: clamp(10px, 1.3vw, 24px); flex-wrap: nowrap; }

.main-nav a {

  font-size: clamp(0.82rem, 0.85vw + 0.5rem, 0.92rem);

  font-weight: 600;

  letter-spacing: 0.01em;

  color: var(--ink-2);

  padding: 6px 2px;

  border-bottom: 2px solid transparent;

  transition: color 0.2s, border-color 0.2s;

  white-space: nowrap;

}

.main-nav a:hover { color: var(--blue); }

.main-nav a.active { color: var(--blue); border-bottom-color: var(--safety); }



.lang-toggle {

  position: relative;

  font-family: var(--font-mono);

  font-size: 0.8rem;

  display: flex;

  gap: 2px;

  padding: 3px;

  border: 1px solid var(--line);

  border-radius: 999px;

}

/* pillola che scivola dietro il bottone attivo */

.lang-toggle-slider {

  position: absolute;

  z-index: 0;

  top: 3px;

  left: 3px;

  width: calc(25% - 3px);

  height: calc(100% - 6px);

  border-radius: 999px;

  background: var(--blue);

  transition: transform 0.32s cubic-bezier(0.65, 0, 0.35, 1);

}

.lang-toggle button {

  position: relative;

  z-index: 1;

  flex: 1;

  font: inherit;

  padding: 7px 10px;

  border: 0;

  border-radius: 999px;

  background: transparent;

  color: var(--steel);

  cursor: pointer;

  transition: color 0.32s ease;

  white-space: nowrap;

}

.lang-toggle button.active { color: var(--white); }



/* toggle lingua duplicato dentro il menu hamburger: nascosto finché non si passa al layout mobile */

.lang-toggle--mobile { display: none; }



@media (max-width: 480px) {

  .lang-toggle { font-size: 0.72rem; }

  .lang-toggle button { padding: 6px 7px; }

}



.nav-burger {

  display: none;

  flex-direction: column;

  gap: 5px;

  background: none;

  border: 0;

  padding: 8px;

  cursor: pointer;

}

.nav-burger span {

  width: 24px;

  height: 2px;

  background: var(--ink);

  transition: transform 0.25s, opacity 0.25s;

}

.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }

.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }

.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }



/* ---- Hero: testo su sfondo scuro pieno a sinistra, foto in scorrimento a destra (stile Cavotec) ---- */

.hero {

  position: relative;

  min-height: 100vh;

  display: flex;

  align-items: center;

  padding: 0;

  padding-top: calc(var(--header-h) + clamp(12px, 2vw, 28px));

  background: linear-gradient(135deg, #0d3d70 0%, #1372c4 50%, #0d3d70 100%);

  color: var(--white);

  text-align: left;

  overflow: hidden;

}

/* effetto lucido: copre tutta la hero ma resta dietro al livello di testo/foto (vedi main.js) */

.hero::after {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 1;

  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.3), transparent 68%);

  opacity: 0;

  transition: opacity 0.35s ease;

  pointer-events: none;

}

.hero:hover::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {

  .hero::after { display: none; }

}

.hero-flex {

  position: relative;

  z-index: 2;

  width: 100%;

  padding-block: clamp(40px, 6vw, 72px);

  display: flex;

  align-items: center;

  gap: clamp(28px, 5vw, 64px);

}

.hero-text-col { flex: 1 1 46%; min-width: 0; }

.hero-text-inner { position: relative; z-index: 1; }

/* linee di sfondo statiche su tutta la hero, dietro testo e foto (stile Cavotec, in SVG puro) */

.hero-bg-lines {

  position: absolute;

  inset: 0;

  z-index: 0;

  width: 100%;

  height: 100%;

  pointer-events: none;

  opacity: 0.75;

  filter: drop-shadow(0 0 5px rgba(110, 175, 235, 0.35));

}

.hero-bg-lines path {

  fill: none;

  stroke: rgba(255, 255, 255, 0.75);

  stroke-width: 2.2;

  stroke-linecap: round;

  stroke-dasharray: 4 17;

}

.hero-bg-lines path:nth-child(1) { stroke: rgba(110, 179, 230, 0.95); }

.hero-bg-lines path:nth-child(3) { stroke: rgba(232, 130, 45, 0.8); }

.hero-bg-lines path:nth-child(5) { stroke: rgba(110, 179, 230, 0.8); }

.hero-bg-lines path:nth-child(7) { stroke: rgba(232, 130, 45, 0.55); }

.hero h1 { max-width: 15ch; margin-bottom: 22px; overflow-wrap: break-word; }

@media (max-width: 480px) {

  .hero h1 { max-width: none; }

}

.hero .lead { color: rgba(255, 255, 255, 0.72); max-width: 46ch; }

.hero-cta { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 14px; margin-top: 34px; }



/* colonna foto: due strisce che scorrono verso l'alto in continuo, a cascata, senza sovrapporsi al testo */

.hero-marquee-wrap {

  flex: 1 1 50%;

  display: flex;

  gap: 14px;

  height: min(78vh, 640px);

  overflow: hidden;

  border-radius: 20px;

}

.hero-marquee-col { flex: 1; min-width: 0; overflow: hidden; position: relative; }

.hero-marquee-track {

  display: flex;

  flex-direction: column;

  gap: 14px;

  width: 100%;

  animation: hero-marquee-up var(--dur, 40s) linear infinite;

  will-change: transform;

}

.hero-marquee-track img {

  width: 100%;

  aspect-ratio: 3 / 4;

  object-fit: cover;

  display: block;

  flex: none;

  border-radius: 18px 0 18px 0;

}

@keyframes hero-marquee-up {

  from { transform: translateY(0); }

  to { transform: translateY(-50%); }

}

@media (prefers-reduced-motion: reduce) {

  .hero-marquee-track, .hero-marquee-h-track { animation: none; }

}



/* mobile: un'unica riga orizzontale al posto delle colonne verticali (occupa meno spazio) */

.hero-marquee-h { display: none; }

.hero-marquee-h-track {

  display: flex;

  gap: 10px;

  height: 100%;

  width: max-content;

  animation: hero-marquee-left var(--dur-h, 200s) linear infinite;

  will-change: transform;

}

.hero-marquee-h-track img {

  height: 100%;

  width: auto;

  aspect-ratio: 4 / 3;

  object-fit: cover;

  flex: none;

  border-radius: 14px 0 14px 0;

}

@keyframes hero-marquee-left {

  from { transform: translateX(0); }

  to { transform: translateX(-50%); }

}



/* ---- Galleria Industria 4.0: colonna immagine più ampia, foto a scorrimento verticale ---- */

.split.media-wide { grid-template-columns: 3fr 2fr; }

.split-media.vscroll { height: min(70vh, 560px); overflow: hidden; }

.tracc-vtrack {

  display: flex;

  flex-direction: column;

  gap: 14px;

  animation: hero-marquee-up 26s linear infinite;

  will-change: transform;

}

.tracc-vtrack img { flex: none; }

@media (prefers-reduced-motion: reduce) {

  .tracc-vtrack { animation: none; }

}

@media (max-width: 960px) {

  .split.media-wide { grid-template-columns: 1fr; }

  .split-media.vscroll { height: min(60vh, 420px); }

}

@media (max-width: 860px) {

  .hero-flex { flex-direction: column; align-items: stretch; }

  .hero-text-col { flex: none; }

  .hero-marquee-wrap { display: none; }

  .hero-marquee-h {

    display: block;

    overflow: hidden;

    height: 160px;

    border-radius: 14px;

  }

  /* pulsanti affiancati su una riga sola: risparmia spazio verticale per la striscia foto */

  .hero-cta {

    flex-wrap: nowrap;

    gap: 10px;

  }

  .hero-cta .btn {

    padding: 12px 16px;

    font-size: 0.88rem;

    white-space: nowrap;

  }

}



/* riga meta in stile cartiglio sotto la hero */

.hero-meta {

  margin-top: clamp(36px, 5vw, 60px);

  padding-top: 18px;

  border-top: 1px solid rgba(255, 255, 255, 0.28);

  display: flex;

  flex-wrap: wrap;

  gap: 10px 36px;

  font-family: var(--font-mono);

  font-size: 0.74rem;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.72);

}



/* header di pagina interna */

.page-head {

  position: relative;

  padding-top: calc(var(--header-h) + clamp(48px, 8vw, 96px));

  padding-bottom: clamp(40px, 6vw, 72px);

  background: var(--ink);

  color: var(--white);

  isolation: isolate;

  overflow: hidden;

}

.page-head.has-img img.head-bg {

  position: absolute;

  inset: 0;

  z-index: -2;

  width: 100%;

  height: 100%;

  object-fit: cover;

  opacity: 0.38;

}

.page-head::after {

  content: "";

  position: absolute;

  inset: 0;

  z-index: -1;

  background: linear-gradient(to top, rgba(13, 16, 20, 0.85), rgba(13, 16, 20, 0.35));

}

.page-head:not(.has-img)::after { background: linear-gradient(120deg, rgba(16, 96, 168, 0.22), transparent 60%); }

.page-head h1 { max-width: 20ch; }

.page-head .lead { color: rgba(255, 255, 255, 0.82); margin-top: 18px; }



/* ---- Bottoni ---- */

.btn {

  position: relative;

  overflow: hidden;

  display: inline-flex;

  align-items: center;

  gap: 10px;

  font-family: var(--font-display);

  font-size: 0.95rem;

  font-weight: 700;

  letter-spacing: 0.01em;

  padding: 14px 28px;

  border-radius: 999px;

  border: 1px solid transparent;

  cursor: pointer;

  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.15s, box-shadow 0.25s;

}

.btn:active { transform: translateY(1px); }

.btn:hover { box-shadow: 0 8px 24px rgba(13, 16, 20, 0.18); }

/* riflesso lucido che attraversa il pulsante all'hover */

.btn::after {

  content: "";

  position: absolute;

  top: 0;

  left: -80%;

  width: 55%;

  height: 100%;

  background: linear-gradient(105deg,

    transparent 0%,

    rgba(255, 255, 255, 0.05) 30%,

    rgba(255, 255, 255, 0.45) 50%,

    rgba(255, 255, 255, 0.05) 70%,

    transparent 100%);

  transform: skewX(-20deg);

  pointer-events: none;

}

.btn:hover::after { animation: btn-shine 0.7s ease forwards; }

@keyframes btn-shine {

  from { left: -80%; }

  to { left: 130%; }

}

.btn-primary { background: var(--blue); color: var(--white); }

.btn-primary:hover { background: var(--safety); }

.btn-ghost { border-color: rgba(255, 255, 255, 0.55); color: var(--white); }

.btn-ghost:hover { border-color: var(--safety); color: var(--safety); }

.btn-ghost.on-light { border-color: var(--ink); color: var(--ink); }

.btn-ghost.on-light:hover { border-color: var(--blue); color: var(--blue); }

.btn .arrow { font-family: var(--font-mono); }



/* ---- Banda numeri chiave ---- */

.stats-band { background: linear-gradient(135deg, #0d3d70 0%, #1372c4 50%, #0d3d70 100%); color: var(--white); }

.stats-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));

  border-left: 1px solid var(--line-dark);

}

.stat {

  padding: clamp(22px, 3vw, 40px) clamp(18px, 2.4vw, 34px);

  border-right: 1px solid var(--line-dark);

}

.stat .num {

  font-family: var(--font-display);

  font-size: clamp(2.5rem, 4.6vw, 4rem);

  font-weight: 800;

  letter-spacing: -0.03em;

  line-height: 1;

  color: var(--white);

}

.stat .num sup { font-size: 0.45em; color: var(--safety); font-weight: 700; }

.stat .label {

  margin-top: 10px;

  font-family: var(--font-mono);

  font-size: 0.72rem;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: #9aa3ad;

}



/* ---- Loghi clienti ---- */

.clients { background: var(--paper); border-block: 1px solid var(--line); padding-block: clamp(36px, 5vw, 56px); }

.clients-row {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: space-between;

  gap: 22px 44px;

}

.client-logo {

  display: flex;

  align-items: center;

  height: 42px;

}

.client-logo img {

  height: 100%;

  width: auto;

  max-width: 170px;

  object-fit: contain;

  transition: transform 0.25s;

}

.client-logo:hover img { transform: scale(1.05); }

/* Cavotec fornisce solo la versione bianca: riquadro scuro per renderla leggibile */

.client-logo.on-dark {

  background: var(--ink);

  padding: 9px 16px;

  border-radius: 6px;

}



/* ---- Card portfolio ---- */

.cards-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

  gap: clamp(16px, 2.4vw, 28px);

}

.card {

  position: relative;

  overflow: hidden;

  border-radius: var(--radius);

  background: var(--ink);

  aspect-ratio: 4 / 3;

  cursor: default;

}

.card.tall { aspect-ratio: 3 / 4; }

.card img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.4s;

}

.card:hover img { transform: scale(1.05); }

.card .caption {

  position: absolute;

  inset: auto 0 0 0;

  padding: 44px 18px 16px;

  background: linear-gradient(to top, rgba(13, 16, 20, 0.88), transparent);

  color: var(--white);

  font-size: 0.95rem;

  font-weight: 600;

  line-height: 1.35;

}

.card .caption .tag {

  display: block;

  font-family: var(--font-mono);

  font-weight: 400;

  font-size: 0.66rem;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  color: #f0a678;

  margin-bottom: 6px;

}

/* crocini da disegno tecnico sugli angoli, visibili all'hover */

.card::before, .card::after {

  content: "+";

  position: absolute;

  z-index: 2;

  font-family: var(--font-mono);

  font-size: 15px;

  color: var(--safety);

  opacity: 0;

  transition: opacity 0.3s;

  pointer-events: none;

}

.card::before { top: 8px; left: 12px; }

.card::after { top: 8px; right: 12px; }

.card:hover::before, .card:hover::after { opacity: 1; }



/* filtri portfolio */

.filter-bar {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-bottom: clamp(28px, 4vw, 44px);

}

.filter-bar button {

  font-family: var(--font-mono);

  font-size: 0.78rem;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  padding: 9px 20px;

  background: transparent;

  color: var(--steel);

  border: 1px solid var(--line);

  border-radius: 999px;

  cursor: pointer;

  transition: all 0.2s;

}

.filter-bar button:hover { border-color: var(--blue); color: var(--blue); }

.filter-bar button.active { background: var(--blue); border-color: var(--blue); color: var(--white); }

.card.is-hidden { display: none; }



/* ---- Sezioni split media/testo ---- */

.split {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: clamp(28px, 5vw, 72px);

  align-items: center;

}

.split.reverse > .split-media, .split.reverse > .split-carousel { order: 2; }

.split-media { position: relative; }

.split-media img {

  width: 100%;

  aspect-ratio: 4 / 3;

  object-fit: cover;

  border-radius: var(--radius);

}

/* cornice tecnica sfalsata dietro l'immagine */

.split-media::before {

  content: "";

  position: absolute;

  inset: 18px -18px -18px 18px;

  border: 1px solid var(--line);

  border-radius: var(--radius);

  z-index: -1;

}

.split.reverse .split-media::before { inset: 18px 18px -18px -18px; }

/* foto a scorrimento (crossfade) al posto di un'unica immagine statica */

.split-media.slideshow { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); }

.split-media.slideshow img {

  position: absolute;

  inset: 0;

  aspect-ratio: auto;

  opacity: 0;

  transform-origin: center;

  animation: split-crossfade 11s infinite;

  will-change: transform, opacity;

}

.split-media.slideshow img:nth-child(1) { animation-delay: 0s; }

.split-media.slideshow img:nth-child(2) { animation-delay: 5.5s; }

@keyframes split-crossfade {

  0% { opacity: 1; transform: scale(1); }

  42% { opacity: 1; transform: scale(1.06); }

  50% { opacity: 0; transform: scale(1.08); }

  92% { opacity: 0; transform: scale(1.08); }

  100% { opacity: 1; transform: scale(1); }

}

@media (prefers-reduced-motion: reduce) {

  .split-media.slideshow img { animation: none; opacity: 0; }

  .split-media.slideshow img:first-child { opacity: 1; }

}

/* carosello a scorrimento con frecce e aura luminosa azzurra */

.split-carousel { position: relative; }

.split-carousel::before {

  content: "";

  position: absolute;

  inset: -30px;

  background: radial-gradient(closest-side, rgba(16, 96, 168, .6), rgba(16, 96, 168, 0) 72%);

  filter: blur(26px);

  z-index: -1;

  animation: carousel-glow-pulse 6s ease-in-out infinite;

}

@keyframes carousel-glow-pulse {

  0%, 100% { opacity: .7; transform: scale(1); }

  50% { opacity: 1; transform: scale(1.08); }

}

.split-carousel-inner {

  position: relative;

  aspect-ratio: 4 / 3;

  overflow: hidden;

  border-radius: var(--radius);

  box-shadow: 0 30px 60px -28px rgba(8, 48, 79, .45);

}

.split-carousel-track {

  display: flex;

  width: 100%;

  height: 100%;

  transition: transform .65s cubic-bezier(.65, 0, .35, 1);

  will-change: transform;

}

.split-carousel-track img {

  flex: none;

  width: 100%;

  height: 100%;

  object-fit: cover;

  transform: scale(1);

}

.split-carousel-track img.is-active {

  animation: carousel-kenburns 9s ease-in-out infinite;

  will-change: transform;

}

@keyframes carousel-kenburns {

  0%, 100% { transform: scale(1); }

  50% { transform: scale(1.09); }

}

@media (prefers-reduced-motion: reduce) {

  .split-carousel::before { animation: none; }

  .split-carousel-track img { animation: none; }

}

.carousel-arrow {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  width: 42px;

  height: 42px;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 1px solid rgba(255, 255, 255, .55);

  border-radius: 50%;

  background: rgba(8, 20, 32, .4);

  color: var(--white);

  cursor: pointer;

  z-index: 2;

  transition: background .2s, border-color .2s, transform .2s;

}

.carousel-arrow:hover { background: var(--blue); border-color: var(--blue); }

.carousel-arrow svg { width: 20px; height: 20px; }

.carousel-arrow--prev { left: 14px; }

.carousel-arrow--next { right: 14px; }

@media (max-width: 640px) {

  .carousel-arrow { width: 36px; height: 36px; }

}

.split-body h2 { margin-bottom: 18px; }

.split-body p + p { margin-top: 14px; }



/* ---- Liste tecniche ---- */

.tech-list { list-style: none; margin-top: 22px; display: grid; gap: 10px; }

.tech-list li { display: flex; gap: 12px; align-items: baseline; }

.tech-list li::before {

  content: "—";

  font-family: var(--font-mono);

  color: var(--safety);

  flex: none;

}



.spec-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));

  gap: 1px;

  background: var(--line);

  border: 1px solid var(--line);

  margin-top: 30px;

}

.spec-cell { background: var(--white); padding: 20px 22px; }

.spec-cell .mono {

  font-family: var(--font-mono);

  font-size: 0.68rem;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: var(--blue);

  display: block;

  margin-bottom: 8px;

}

.spec-cell strong { font-weight: 700; }

.spec-cell p { font-size: 0.9rem; color: var(--steel); margin-top: 6px; }



/* ---- Card responsabilità (sicurezza / sostenibilità) ---- */

.resp-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

  gap: clamp(20px, 3vw, 32px);

  margin-top: 36px;

}

.resp-card {

  background: var(--white);

  border-radius: 14px;

  padding: clamp(28px, 3vw, 40px);

  border-top: 4px solid var(--accent, var(--blue));

  box-shadow: 0 10px 28px rgba(24, 27, 31, 0.08);

  transition: transform 0.25s ease, box-shadow 0.25s ease;

}

.resp-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(24, 27, 31, 0.14); }

.resp-card--blue { --accent: var(--blue); }

.resp-card--orange { --accent: var(--safety); }

.resp-card .mono {

  display: inline-flex;

  align-items: center;

  gap: 9px;

  font-family: var(--font-mono);

  font-size: 0.74rem;

  font-weight: 500;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: var(--accent, var(--blue));

  margin-bottom: 16px;

}

.resp-card .mono::before {

  content: "";

  width: 9px;

  height: 9px;

  border-radius: 999px;

  background: var(--accent, var(--blue));

  flex: none;

}

.resp-card strong { display: block; font-size: 1.25rem; font-weight: 800; margin-bottom: 14px; }

.resp-card p { font-size: 0.94rem; color: var(--steel); line-height: 1.65; }



/* ---- Card lavorazioni (griglia processi) ---- */

.proc-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));

  gap: 18px;

  margin-top: 36px;

}

.proc-card {

  background: var(--white);

  border-radius: 12px;

  padding: 24px 22px;

  box-shadow: 0 8px 22px rgba(24, 27, 31, 0.06);

  border: 1px solid var(--line);

  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;

}

.proc-card:hover {

  transform: translateY(-5px);

  box-shadow: 0 16px 34px rgba(24, 27, 31, 0.12);

  border-color: var(--safety);

}

.proc-icon {

  height: 56px;

  width: auto;

  margin-bottom: 18px;

  transition: transform 0.25s ease;

}

.proc-card:hover .proc-icon { transform: scale(1.08); }

.proc-card strong { display: block; font-size: 1.05rem; font-weight: 800; margin-bottom: 6px; }

.proc-card p { font-size: 0.86rem; color: var(--steel); }



/* ---- Blocco certificazioni ---- */

.cert-strip {

  background: var(--paper);

  border-block: 1px solid var(--line);

}

.cert-strip .inner {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: clamp(24px, 4vw, 56px);

}

.cert-strip img { max-height: 130px; width: auto; }



.cert-card {

  border-radius: 14px;

  border-top: 3px solid var(--accent, var(--blue));

  padding: clamp(22px, 3vw, 36px);

  background: var(--white);

  box-shadow: 0 10px 28px rgba(24, 27, 31, 0.08);

  transition: transform 0.25s ease, box-shadow 0.25s ease;

}

.cert-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(24, 27, 31, 0.14); }

.cert-card + .cert-card { margin-top: 22px; }

.cert-card--blue { --accent: var(--blue); }

.cert-card--orange { --accent: var(--safety); }

.cert-card h3 { margin-top: 0; margin-bottom: 10px; }

.cert-card .norm {

  font-family: var(--font-mono);

  font-size: 0.74rem;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: var(--accent, var(--blue));

  display: inline-flex;

  align-items: center;

  gap: 9px;

  margin-bottom: 12px;

}

.cert-card .norm::before {

  content: "";

  width: 9px;

  height: 9px;

  border-radius: 50%;

  background: var(--accent, var(--blue));

  flex: none;

}

.download-link {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  margin-top: 16px;

  font-family: var(--font-mono);

  font-size: 0.8rem;

  color: var(--blue);

  border-bottom: 1px solid currentColor;

  padding-bottom: 2px;

  transition: color 0.2s;

}

.download-link:hover { color: var(--safety); }



/* ---- CTA finale ---- */

.cta-final {

  background: linear-gradient(135deg, var(--blue-ink), var(--blue-deep) 55%, var(--blue));

  color: var(--white);

  text-align: left;

}

.cta-final .wrap {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: space-between;

  gap: 28px;

}

.cta-final h2 { max-width: 22ch; }

.cta-final p { color: rgba(255, 255, 255, 0.8); margin-top: 12px; }



/* ---- Contatti ---- */

.contact-grid {

  display: grid;

  grid-template-columns: minmax(300px, 460px) 1fr;

  gap: clamp(28px, 5vw, 64px);

}

.contact-col { display: flex; flex-direction: column; }

.contact-block {

  background: var(--white);

  border-radius: 14px;

  border-top: 3px solid var(--accent, var(--blue));

  padding: clamp(20px, 2.6vw, 28px);

  box-shadow: 0 10px 28px rgba(24, 27, 31, 0.08);

  transition: transform 0.25s ease, box-shadow 0.25s ease;

}

.contact-block:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(24, 27, 31, 0.14); }

.contact-block + .contact-block { margin-top: 20px; }

.contact-block--blue { --accent: var(--blue); }

.contact-block--orange { --accent: var(--safety); }

.contact-field + .contact-field { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }

.contact-block .mono-label {

  font-family: var(--font-mono);

  font-size: 0.7rem;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  color: var(--accent, var(--blue));

  display: inline-flex;

  align-items: center;

  gap: 9px;

  margin-bottom: 8px;

}

.contact-block .mono-label::before {

  content: "";

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: var(--accent, var(--blue));

  flex: none;

}

.contact-block a.big {

  font-size: clamp(1.05rem, 1.8vw, 1.3rem);

  font-weight: 700;

  color: var(--blue);

  transition: color 0.2s;

}

.contact-block a.big:hover { color: var(--safety); }

.contact-block a.big--email { font-size: clamp(0.95rem, 1.5vw, 1.1rem); }

.map-frame {

  width: 100%;

  height: 100%;

  min-height: 320px;

  border: 1px solid var(--line);

  border-radius: var(--radius);

  filter: grayscale(0.2);

}



/* ---- Footer ---- */

.site-footer {

  background: var(--ink);

  color: #aab2bb;

  padding-block: clamp(48px, 6vw, 72px) 28px;

  font-size: 0.92rem;

}

.footer-grid {

  display: grid;

  grid-template-columns: 2fr 1fr 1fr 1.4fr;

  gap: clamp(28px, 4vw, 56px);

  padding-bottom: 40px;

  border-bottom: 1px solid var(--line-dark);

}

.site-footer img.f-logo { height: 78px; width: auto; margin-bottom: 18px; opacity: 0.95; }

.site-footer h4 {

  font-family: var(--font-mono);

  font-size: 0.72rem;

  font-weight: 500;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  color: #7c858f;

  margin-bottom: 16px;

}

.site-footer ul { list-style: none; display: grid; gap: 9px; }

.site-footer a:hover { color: var(--white); }

.footer-bottom {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  gap: 12px;

  padding-top: 22px;

  font-family: var(--font-display);

  font-size: 0.85rem;

  font-weight: 500;

  letter-spacing: 0.01em;

  color: #737c86;

}

.footer-bottom a {

  color: #6fb3e6;

  text-decoration: underline;

  text-underline-offset: 3px;

  transition: color 0.2s;

}

.footer-bottom a:hover { color: var(--safety); }



/* ---- Reveal on scroll ---- */

.reveal {

  opacity: 0;

  transform: translateY(26px);

  transition: opacity 0.7s ease, transform 0.7s ease;

}

.reveal.visible { opacity: 1; transform: none; }

.reveal[data-delay="1"] { transition-delay: 0.1s; }

.reveal[data-delay="2"] { transition-delay: 0.2s; }

.reveal[data-delay="3"] { transition-delay: 0.3s; }



@media (prefers-reduced-motion: reduce) {

  html { scroll-behavior: auto; }

  .reveal { opacity: 1; transform: none; transition: none; }

  .card img, .site-header { transition: none; }

  .btn:hover::after { animation: none; }

}



/* ---- Responsive ---- */

@media (max-width: 960px) {

  .split, .split.reverse { grid-template-columns: 1fr; }

  .split.reverse > .split-media, .split.reverse > .split-carousel { order: 0; }

  .split-media::before { display: none; }

  .footer-grid { grid-template-columns: 1fr 1fr; }

  .contact-grid { grid-template-columns: 1fr; }

  .map-frame { height: auto; min-height: 0; aspect-ratio: 4 / 3; }

}



@media (max-width: 820px) {

  .main-nav {

    position: fixed;

    top: var(--header-h-small);

    right: 0;

    left: 0;

    flex-direction: column;

    align-items: stretch;

    gap: 0;

    background: var(--white);

    border-bottom: 1px solid var(--line);

    padding: 8px 0 14px;

    transform: translateY(-130%);

    transition: transform 0.3s ease;

    z-index: 90;

  }

  .site-header { height: var(--header-h-small); }

  .brand img { height: 40px; }

  .main-nav.open { transform: none; box-shadow: 0 18px 30px rgba(24, 27, 31, 0.12); }

  .main-nav a { padding: 13px var(--pad); border-bottom: 0; }

  .lang-toggle--header { display: none; }

  .lang-toggle--mobile {

    display: flex;

    margin: 10px var(--pad) 0;

  }

  .main-nav a.active { border-left: 3px solid var(--safety); background: var(--paper); }

  .nav-burger { display: flex; }

  .hero { min-height: 0; align-items: stretch; padding-top: var(--header-h-small); }

  .stats-grid { grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-dark); }

}



@media (max-width: 520px) {

  .footer-grid { grid-template-columns: 1fr; }

  .stats-grid { grid-template-columns: 1fr 1fr; }

  .cards-grid { grid-template-columns: 1fr; }

}



/* ---- Lightbox: foto a schermo intero ---- */

.cards-grid .card { cursor: zoom-in; }

.lightbox {

  position: fixed;

  inset: 0;

  z-index: 300;

  display: flex;

  align-items: center;

  justify-content: center;

  background: rgba(8, 10, 13, 0.94);

  opacity: 0;

  visibility: hidden;

  transition: opacity 0.3s ease;

  padding: clamp(20px, 5vw, 56px);

}

.lightbox.open { opacity: 1; visibility: visible; }

.lightbox-figure {

  max-width: min(1100px, 92vw);

  max-height: 88vh;

  display: flex;

  flex-direction: column;

  align-items: center;

}

.lightbox-img {

  max-width: 100%;

  max-height: 78vh;

  width: auto;

  height: auto;

  object-fit: contain;

  border-radius: 4px;

  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);

}

.lightbox-caption {

  margin-top: 18px;

  color: var(--white);

  font-size: 0.95rem;

  text-align: center;

  max-width: 70ch;

}

.lightbox-close,

.lightbox-nav {

  position: absolute;

  border-radius: 999px;

  border: 1px solid rgba(255, 255, 255, 0.4);

  background: rgba(255, 255, 255, 0.08);

  color: var(--white);

  line-height: 1;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: background 0.2s, transform 0.2s, border-color 0.2s;

}

.lightbox-close {

  top: clamp(14px, 3vw, 26px);

  right: clamp(14px, 3vw, 26px);

  width: 44px;

  height: 44px;

  font-size: 28px;

}

.lightbox-close:hover { background: var(--safety); border-color: var(--safety); }

.lightbox-nav {

  top: 50%;

  transform: translateY(-50%);

  width: 52px;

  height: 52px;

  font-size: 28px;

}

.lightbox-nav:hover { background: var(--blue); border-color: var(--blue); transform: translateY(-50%) scale(1.06); }

.lightbox-prev { left: clamp(10px, 3vw, 26px); }

.lightbox-next { right: clamp(10px, 3vw, 26px); }

@media (max-width: 640px) {

  .lightbox-nav { width: 40px; height: 40px; font-size: 22px; }

  .lightbox-close { width: 38px; height: 38px; font-size: 22px; }

}



/* ---- Legal pages (privacy / cookie policy) ---- */

.legal-content { max-width: 74ch; }

.legal-content h2 { margin-top: 48px; font-size: clamp(1.3rem, 2.2vw, 1.6rem); }

.legal-content h2:first-child { margin-top: 0; }

.legal-content h3 { margin-top: 28px; font-size: 1.05rem; }

.legal-content p { color: var(--steel); margin-top: 12px; }

.legal-content ul, .legal-content ol { margin-top: 12px; padding-left: 22px; }

.legal-content li { color: var(--steel); margin-top: 8px; }

.legal-content a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }

.legal-content strong { color: var(--ink); }

.legal-content .updated { font-family: var(--font-mono); font-size: 0.85rem; color: var(--steel); margin-bottom: 8px; display: block; }



/* ---- Cookie banner ---- */

.cookie-banner {

  position: fixed;

  left: 20px;

  right: 20px;

  bottom: 20px;

  z-index: 999;

  max-width: 640px;

  margin: 0 auto;

  background: var(--ink);

  color: var(--white);

  border-radius: 4px;

  padding: 20px 24px;

  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 16px 20px;

  transform: translateY(140%);

  opacity: 0;

  transition: transform 0.4s ease, opacity 0.4s ease;

}

.cookie-banner.visible { transform: translateY(0); opacity: 1; }

.cookie-banner p { font-size: 0.88rem; line-height: 1.5; color: rgba(255, 255, 255, 0.85); flex: 1 1 320px; margin: 0; }

.cookie-banner a { color: var(--white); text-decoration: underline; text-underline-offset: 2px; }

.cookie-banner .btn { flex-shrink: 0; padding: 10px 22px; font-size: 0.88rem; }

@media (max-width: 560px) {

  .cookie-banner { left: 12px; right: 12px; bottom: 12px; padding: 16px 18px; }

}