/* FurboLab Global Styles & Layouts */

/* ---------------------------------
   GLOBAL TYPOGRAPHY & LAYOUTS
--------------------------------- */
body {
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-light);
  font-size: 1rem;
}

h1, h2, h3, h4 {
  font-family: var(--font-headings);
  color: var(--color-dark);
  font-weight: 700;
}

p {
  line-height: 1.65;
  margin-bottom: 1.25rem;
}

p:last-child {
  margin-bottom: 0;
}

/* ---------------------------------
   CONTAINERS & SECTIONS
--------------------------------- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-md);
  width: 100%;
}

.section {
  padding: var(--spacing-4xl) 0;
  position: relative;
}

.section-dark {
  background-color: var(--color-dark);
  color: white;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4 {
  color: white;
}

.section-gray {
  background-color: var(--color-gray-100);
}

.section-header {
  max-width: 700px;
  margin: 0 auto var(--spacing-2xl) auto;
  text-align: center;
}

.section-header.text-left {
  text-align: left;
  margin-left: 0;
}

.section-tagline {
  font-family: var(--font-headings);
  font-size: 0.88rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-primary);
  letter-spacing: 2px;
  margin-bottom: var(--spacing-sm);
  display: block;
}

.section-tagline-sec {
  color: var(--color-primary);
}

.section-title {
  font-size: 2.25rem;
  line-height: 1.2;
  margin-bottom: var(--spacing-md);
  letter-spacing: -0.5px;
}

@media (max-width: 767px) {
  .section-title {
    font-size: 1.85rem;
  }
  .section {
    padding: var(--spacing-3xl) 0;
  }
}

.section-desc {
  font-size: 1.1rem;
  color: var(--color-text-light);
  line-height: 1.6;
}

.section-dark .section-desc {
  color: rgba(255, 255, 255, 0.7);
}

/* ---------------------------------
   HERO LAYOUT
--------------------------------- */
.hero-scroll-container {
  height: 400vh;
  position: relative;
  background-color: var(--color-dark);
}

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 0 var(--spacing-3xl) 0;
  background-color: var(--color-dark);
  color: white;
  overflow: hidden;
}

.hero-static-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  background-color: var(--color-light);
}

.hero-overlay-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(6,19,29,0.85) 0%, rgba(6,19,29,0.4) 50%, rgba(6,19,29,0.1) 100%);
  z-index: 2;
}

.hero-container {
  position: relative;
  z-index: 3;
  width: 100%;
}

.hero-content {
  max-width: 800px;
  text-align: left;
}

.scroll-indicator {
  position: absolute;
  bottom: var(--spacing-lg);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
  font-weight: 500;
  animation: scroll-indicator-bounce 2s infinite;
  pointer-events: none;
}

.scroll-indicator svg {
  display: block;
}

@keyframes scroll-indicator-bounce {
  0%, 20%, 50%, 80%, 100% { transform: translate(-50%, 0); }
  40% { transform: translate(-50%, -8px); }
  60% { transform: translate(-50%, -4px); }
}

.hero-tagline {
  font-family: var(--font-headings);
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-primary);
  letter-spacing: 3px;
  margin-bottom: var(--spacing-md);
  display: block;
}

.hero-title {
  font-size: 3.5rem;
  line-height: 1.15;
  color: white;
  margin-bottom: var(--spacing-md);
  letter-spacing: -1px;
}

@media (max-width: 991px) {
  .hero-title {
    font-size: 2.85rem;
  }
}

@media (max-width: 767px) {
  .hero {
    min-height: 80vh;
    padding: 100px 0 var(--spacing-2xl) 0;
  }
  .hero-title {
    font-size: 2.15rem;
  }
}

.hero-subtitle {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin-bottom: var(--spacing-xl);
  font-weight: 400;
}

@media (max-width: 767px) {
  .hero-subtitle {
    font-size: 1.05rem;
  }
}

.hero-bullets-list {
  list-style: none;
  padding: 0;
  margin: var(--spacing-md) 0 var(--spacing-xl) 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.hero-bullets-list li {
  font-family: var(--font-headings);
  font-weight: 500;
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  letter-spacing: 0.5px;
}

.hero-bullets-list li::before {
  content: '•';
  color: var(--color-primary); /* Brand Orange bullet */
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
}

@media (max-width: 767px) {
  .hero-bullets-list li {
    font-size: 1.05rem;
  }
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

/* ---------------------------------
   BEYOND BORDERS SECTION
--------------------------------- */
.section-beyond-borders {
  background-color: #ffffff;
  padding: 10rem 0; /* Aumentato ulteriormente per dare ancora più distacco */
  border-bottom: 1px solid var(--color-border);
}

/* 10rem sopra e sotto sono giusti su desktop, dove la sezione e' larga e il
   respiro si legge come eleganza. Su uno schermo stretto diventano 160px di
   bianco tra lo slider e la prima frase: sembra che la pagina sia finita. */
@media (max-width: 767px) {
  .section-beyond-borders {
    padding: var(--spacing-3xl) 0;
  }
}

.beyond-borders-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  align-items: center;
  text-align: center;
}

@media (min-width: 768px) {
  .beyond-borders-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    text-align: left;
    width: 100%;
  }
}

.beyond-borders-title {
  font-family: var(--font-headings);
  font-weight: 800;
  font-size: 4.8rem;
  line-height: 0.78; /* Tighter line height so white text is closer to gradient as requested */
  letter-spacing: -0.03em;
  margin: 0;
  text-align: left;
}

@media (min-width: 768px) {
  .beyond-borders-title {
    font-size: 6.8rem;
  }
}

.beyond-borders-title .beyond-orange {
  background: linear-gradient(180deg, var(--color-primary) 0%, rgba(6, 19, 29, 0.95) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
}

.beyond-borders-title .beyond-white {
  color: #ffffff;
  display: block;
}

.beyond-borders-text-hero {
  font-family: var(--font-body);
  color: rgba(255, 255, 255, 0.95);
  font-size: 1.3rem;
  line-height: 1.4;
  margin: var(--spacing-md) 0 0 0;
  font-weight: 400;
  text-align: left;
  max-width: 650px;
}

@media (min-width: 768px) {
  .beyond-borders-text-hero {
    font-size: 1.75rem;
    line-height: 1.35;
  }
}

/* White background section elements */
.beyond-borders-title-dark {
  font-family: var(--font-headings);
  font-weight: 800;
  font-size: 3.2rem;
  line-height: 0.85;
  letter-spacing: -0.03em;
  margin: 0;
}

@media (min-width: 768px) {
  .beyond-borders-title-dark {
    font-size: 4.2rem;
  }
}

.beyond-borders-title-dark .title-dark-orange {
  color: var(--color-primary);
  display: block;
}

.beyond-borders-title-dark .title-dark-blue {
  color: #06131d;
  display: block;
}

.beyond-borders-content-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.beyond-borders-bullets-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--spacing-sm) 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.beyond-borders-bullets-list li {
  font-family: var(--font-headings);
  font-weight: 500;
  font-size: 1.35rem; /* Aumentato da 1.2rem */
  line-height: 1.35;
  color: #06131d;
  /* Niente display:flex qui. Con il flex il <strong> e il testo che lo segue
     diventavano due elementi separati: su schermi stretti il testo andava a
     capo come blocco a se', incolonnato accanto alla parola in arancione
     invece di proseguire la frase. Il pallino sta fuori dal flusso in
     posizione assoluta, cosi' la riga resta un testo unico che va a capo
     normalmente e le righe successive restano allineate sotto la prima. */
  position: relative;
  padding-left: 1.4em;
  letter-spacing: 0.5px;
  text-align: left;
}

.beyond-borders-bullets-list li strong {
  color: var(--color-primary); /* Testo in grassetto colorato in arancione */
  font-weight: 700;
}

.beyond-borders-bullets-list li::before {
  content: '\2022';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 1.5rem;
  /* Allineato alla prima riga del testo, non al centro del blocco */
  line-height: 1.2;
}

.beyond-borders-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  justify-content: center;
}

@media (min-width: 768px) {
  .beyond-borders-actions {
    justify-content: flex-start;
  }
}

/* La sezione "approccio sartoriale" ha come sfondo una foto di officina, piena
   di dettagli e di zone chiare: il tratto sottile delle icone e il testo bianco
   ci si perdevano dentro. Un alone scuro li stacca dal fondo senza dover
   scurire tutta la foto.

   Sulle icone si usa drop-shadow e non box-shadow, perche' drop-shadow segue il
   canale alfa del PNG: l'ombra abbraccia il disegno invece di disegnare un
   rettangolo dietro l'icona. Due passaggi: uno stretto e denso che fa da
   contorno, uno largo e morbido che fa da bagliore. */
.icona-valore {
  filter:
    drop-shadow(0 0 4px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 16px rgba(0, 0, 0, 0.7));
}

/* Sul testo l'equivalente e' text-shadow, che segue la sagoma delle lettere.
   Restano valori bassi: deve leggersi come profondita', non come sfocatura. */
.pillars-section .card-title,
.pillars-section .card-text,
.pillars-section .section-title,
.pillars-section .section-desc,
.pillars-section .section-tagline {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.55),
    0 0 14px rgba(0, 0, 0, 0.6);
}

/* ─────────────────────────────────────────────────────────────────────────────
   PORTFOLIO VUOTO

   Finche' non c'e' nemmeno un progetto pubblicato, js/portfolio-count.js mette
   la classe "senza-progetti" su <html> e il sito smette di parlare di
   portfolio: via la voce dal menu, via il link dal footer, via la sezione dei
   lavori in home. Mandare qualcuno su una pagina vuota e' peggio che non
   offrirgli il link.

   Lo script sta nell'head, quindi la classe c'e' gia' alla prima pittura:
   niente voce che compare e sparisce sotto gli occhi.

   Appena si pubblica un progetto la dashboard riscrive il conteggio e tutto
   ricompare da solo, senza toccare nessun file a mano.
   ───────────────────────────────────────────────────────────────────────── */
.senza-progetti .nav-menu a[href="progetti.html"],
.senza-progetti .footer-links a[href="progetti.html"],
.senza-progetti .sezione-progetti {
  display: none;
}

/* Nel footer i link stanno in <li>: nascondere solo la <a> lascerebbe un
   elemento di lista vuoto, cioe' un buco nella colonna. */
.senza-progetti .footer-links li:has(> a[href="progetti.html"]) {
  display: none;
}

/* ---------------------------------
   SUPPLIER STRIP / LOGOS — INFINITE MARQUEE
--------------------------------- */
.logo-strip-container {
  overflow: hidden;
  padding: var(--spacing-lg) 0;
  /* Fade ai bordi sinistro e destro */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
}

/* Traccia scorrevole — contiene due copie dei loghi per loop seamless */
.logo-strip-track {
  display: flex;
  align-items: center;
  gap: var(--spacing-xl);
  width: max-content;
  animation: logo-marquee 28s linear infinite;
  will-change: transform;
}

/* Le due righe si muovono in direzioni opposte: da fermo si legge come un
   nastro solo, in movimento si capisce che sono due elenchi distinti e
   l'occhio non prova a incolonnare i loghi. */
.logo-strip-track--giu {
  animation-name: logo-marquee-indietro;
  /* Sfalsatura: il ritardo negativo fa partire la riga a un quarto del ciclo
     invece che dall'inizio, cosi' i riquadri delle due file non si allineano
     mai in verticale. Va usato il ritardo e non un margine iniziale, che
     spezzerebbe il ciclo: la ripetizione senza stacchi si regge sul fatto che
     il -50% cade esattamente sulla seconda copia. */
  animation-delay: -7s;
}

.logo-strip-track + .logo-strip-track {
  margin-top: var(--spacing-md);
}

/* Pausa al hover dell'intera striscia */
.logo-strip-container:hover .logo-strip-track {
  animation-play-state: paused;
}

@keyframes logo-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes logo-marquee-indietro {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* Chi ha chiesto meno animazioni al sistema vede le due righe ferme, con i
   loghi comunque tutti leggibili scorrendo la pagina. */
@media (prefers-reduced-motion: reduce) {
  .logo-strip-track { animation: none; }
}

.logo-box {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--global-radius, 3px);
  height: 80px;
  min-width: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md) var(--spacing-lg);
  flex-shrink: 0;
  transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  color: var(--color-text-light);
  font-family: var(--font-headings);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  user-select: none;
}

.logo-box:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-hover);
  box-shadow: var(--shadow-sm);
}

/* Riquadro solo sui segnaposto. La cornice serve a dare una forma a una casella
   vuota; attorno a un marchio vero diventa rumore e fa a pugni con il suo
   fondo. */
.logo-box.is-logo,
.logo-box.is-logo:hover {
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* Larghezza FISSA, non minima. Con il solo min-width il riquadro si allargava
   per contenere il logo, e i marchi molto orizzontali (Dometic, 7,5:1) uscivano
   a 344px mentre altri stavano in 110: la fila sembrava composta a caso.
   Con lo stesso rettangolo per tutti, ogni marchio occupa lo stesso spazio e
   l'occhio legge una griglia regolare. */
.logo-box.is-logo {
  width: 180px;
  min-width: 180px;
  padding: 0 var(--spacing-md);
}

/* Loghi veri dei fornitori: si adattano al riquadro senza deformarsi, qualunque
   siano le proporzioni del file. I marchi hanno forme molto diverse (larghi e
   bassi, quadrati), quindi si vincolano entrambi i lati e si lascia decidere a
   object-fit. */
.logo-box img {
  /* Niente loading="lazy" su questi loghi: il nastro scorre per trasformazione
     CSS, quindi il browser non si accorge che un riquadro sta entrando in
     vista e lascerebbe il posto vuoto a meta' ciclo. Sono file da pochi KB. */
  max-width: 100%;
  /* Tetto in altezza piu' basso del riquadro: senza, i marchi quasi quadrati
     riempivano tutti gli 80px e schiacciavano otticamente quelli orizzontali,
     che per forma non possono mai arrivarci. */
  max-height: 46px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ---------------------------------
   PROCESS OF WORK TIMELINE
--------------------------------- */
.process-container {
  display: flex;
  position: relative;
  justify-content: space-between;
  gap: var(--spacing-md);
  margin-top: var(--spacing-2xl);
}

.process-container::before {
  content: '';
  position: absolute;
  top: 30px;
  left: 5%;
  width: 90%;
  height: 2px;
  background-color: var(--color-border);
  z-index: 1;
}

.process-step {
  flex: 1;
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.process-number {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--color-surface);
  border: 3px solid var(--color-border);
  color: var(--color-dark);
  font-family: var(--font-headings);
  font-weight: 700;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-md);
  transition: var(--transition-smooth);
}

/* Nessun effetto al passaggio del mouse sui passi della procedura: non sono
   cliccabili, quindi evidenziarli suggeriva un'interazione che non esiste.
   Su mobile, dove il "hover" resta appiccicato dopo il tocco, era anche
   peggio: un numero restava acceso senza motivo. */

.process-title {
  font-family: var(--font-headings);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-dark);
  margin-bottom: var(--spacing-xs);
}

.process-desc {
  font-size: 0.82rem;
  color: var(--color-text-light);
  line-height: 1.4;
  padding: 0 var(--spacing-sm);
}

@media (max-width: 991px) {
  .process-container {
    flex-direction: column;
    gap: var(--spacing-xl);
  }
  .process-container::before {
    top: 5%;
    left: 30px;
    width: 2px;
    height: 90%;
  }
  /* Con flex-direction: row il numero, il titolo e il testo diventavano tre
     elementi affiancati: il titolo finiva a sinistra e la descrizione gli si
     appiccicava di fianco sulla stessa riga. Con la griglia il numero occupa
     una colonna sua alta quanto serve, e titolo e testo si incolonnano. */
  .process-step {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "numero titolo"
      "numero testo";
    column-gap: var(--spacing-lg);
    align-items: start;
    text-align: left;
  }
  .process-number {
    grid-area: numero;
    margin-bottom: 0;
    margin-right: 0;
    flex-shrink: 0;
  }
  .process-title {
    grid-area: titolo;
    align-self: center;
  }
  .process-desc {
    grid-area: testo;
    padding: 0;
  }
}

/* ---------------------------------
   VEHICLES SUPPORTED STRIP
--------------------------------- */
.vehicles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-lg);
  margin-top: var(--spacing-xl);
}

@media (max-width: 767px) {
  .vehicles-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.vehicle-box {
  background-color: transparent;
  border: none;
  padding: var(--spacing-md);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: var(--transition-smooth);
}

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

.vehicle-icon {
  width: 96px;
  height: 96px;
  color: var(--color-primary);
  margin-bottom: var(--spacing-md);
}

.vehicle-title {
  font-family: var(--font-headings);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-dark);
}

/* ---------------------------------
   FOOTER
--------------------------------- */
.footer {
  background-color: var(--color-dark);
  color: rgba(255, 255, 255, 0.7);
  padding: var(--spacing-3xl) 0 var(--spacing-xl) 0;
  border-top: 4px solid var(--color-primary);
  font-size: 0.9rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--spacing-3xl);
  margin-bottom: var(--spacing-2xl);
  align-items: end;
}

@media (max-width: 991px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }
}

.footer-logo {
  height: 46px;
  margin-bottom: var(--spacing-md);
}

.footer-logo img {
  height: 100%;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1); /* make it all white for footer */
}

.footer-payoff {
  font-family: var(--font-headings);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--color-primary);
  margin-bottom: var(--spacing-lg);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.footer-contact-info {
  margin-top: var(--spacing-md);
  font-size: 0.88rem;
  line-height: 1.6;
}

.footer-contact-info p {
  margin-bottom: var(--spacing-xs);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.footer-title {
  font-family: var(--font-headings);
  color: white;
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: var(--spacing-lg);
  position: relative;
  padding-bottom: var(--spacing-xs);
}

.footer-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 2px;
  background-color: var(--color-primary);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.footer-link {
  transition: var(--transition-fast);
  color: rgba(255, 255, 255, 0.7);
}

.footer-link:hover {
  color: white;
  transform: translateX(4px);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--spacing-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 767px) {
  .footer-bottom {
    flex-direction: column;
    gap: var(--spacing-sm);
    text-align: center;
  }
}

.footer-bottom a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: underline;
}

.footer-bottom a:hover {
  color: white;
}

/* Disclaimer "immagini modificate con IA": loghino sopra, testo sotto,
   agganciato alla riga di Privacy & Cookie Policy nel footer. */
.footer-ai-disclaimer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  margin: var(--spacing-xs) 0 0;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.35);
}

@media (max-width: 767px) {
  .footer-ai-disclaimer {
    justify-content: center;
  }
}

.footer-ai-disclaimer img {
  height: 10px;
  width: auto;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
  opacity: 0.6;
}

/* ---------------------------------
   LAYOUT HELPER UTILITIES
--------------------------------- */
.text-center { text-align: center; }
.text-right { text-align: right; }
.bold { font-weight: 700; }
.italic { font-style: italic; }

.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-dark { color: var(--color-dark); }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }

.py-sm { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); }
.py-md { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
.py-lg { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }
.py-xl { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }
.py-2xl { padding-top: var(--spacing-2xl); padding-bottom: var(--spacing-2xl); }

.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }
.mb-2xl { margin-bottom: var(--spacing-2xl); }

/* Grid systems */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-xl); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-xl); }

@media (max-width: 991px) {
  .grid-3 { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .grid-2 { grid-template-columns: 1fr; }
}

/* ---------------------------------
   ANIMATIONS & TRANSITIONS
--------------------------------- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-up {
  animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animation-delay-100 { animation-delay: 0.1s; }
.animation-delay-200 { animation-delay: 0.2s; }
.animation-delay-300 { animation-delay: 0.3s; }
.animation-delay-400 { animation-delay: 0.4s; }

/* ---------------------------------
   SERVICE DETAILS SECTIONS (EXPANDED)
--------------------------------- */
.service-detail-section {
  padding: 5rem 0;
  background-color: #ffffff;
  border-bottom: 1px solid var(--color-border);
}

.service-detail-section:nth-of-type(even) {
  background-color: var(--color-light); /* Alternating light background */
}

.service-detail-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 768px) {
  .service-detail-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5.5rem;
    align-items: center;
    width: 100%;
  }

  /* Alternating columns on desktop */
  .service-detail-section:nth-of-type(even) .service-detail-wrapper {
    direction: rtl;
  }
  .service-detail-section:nth-of-type(even) .service-detail-content-left {
    direction: ltr;
  }
  .service-detail-section:nth-of-type(even) .service-detail-image-right {
    direction: ltr;
  }
}

.service-detail-content-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.service-detail-title {
  font-family: var(--font-headings);
  font-weight: 800;
  font-size: 3.5rem; /* Ridotto da 3.8rem */
  line-height: 0.9;
  letter-spacing: -0.03em;
  margin: 0 0 var(--spacing-md) 0;
}

@media (min-width: 768px) {
  .service-detail-title {
    font-size: 4.6rem; /* Ridotto da 5.4rem */
  }
}

.service-detail-title span {
  display: block;
}

.service-detail-title .text-orange {
  color: var(--color-primary);
}

.service-detail-title .text-dark {
  color: #06131d;
}

.service-detail-text {
  font-family: var(--font-body);
  color: var(--color-text);
  font-size: 1.15rem;
  line-height: 1.6;
  margin: 0 0 var(--spacing-lg) 0;
}

.service-detail-image-right {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: var(--color-primary); /* Square orange placeholder */
  border-radius: var(--global-radius, 3px);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
}

@media (max-width: 767px) {
  /* Su mobile l'immagine precede sempre il testo, indipendentemente dall'alternanza desktop */
  .service-detail-image-right {
    order: -1;
  }
}

.service-detail-image-placeholder {
  color: white;
  font-family: var(--font-headings);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.8;
}

/* Transizione per zoom-in all'apparizione nel viewport delle immagini servizi */
.service-detail-image-right img {
  opacity: 0;
  transform: scale(0.92);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}
.service-detail-image-right img.zoom-in-active {
  opacity: 1;
  transform: scale(1.0);
}

/* Animazione sequenziale (staggered) delle mini icone */
.service-mini-icons img {
  opacity: 0;
  transform: translateY(15px) scale(0.85);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}
.service-mini-icons.icons-visible img {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.service-mini-icons img:nth-child(1) { transition-delay: 0.1s; }
.service-mini-icons img:nth-child(2) { transition-delay: 0.25s; }
.service-mini-icons img:nth-child(3) { transition-delay: 0.4s; }
.service-mini-icons img:nth-child(4) { transition-delay: 0.55s; }

/* Classi globali per animazione zoom-in all'apparizione nel viewport (utilizzabile in tutte le pagine) */
.zoom-in-entrance {
  opacity: 0;
  transform: scale(0.92);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}
.zoom-in-entrance.zoom-in-active {
  opacity: 1;
  transform: scale(1.0);
}

/* Animazione sequenziale (stagger) delle schede lavorazioni in allestimenti.html */
.stagger-cards-entrance .card {
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}
.stagger-cards-entrance.cards-visible .card {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.stagger-cards-entrance .card:nth-child(1) { transition-delay: 0.1s; }
.stagger-cards-entrance .card:nth-child(2) { transition-delay: 0.22s; }
.stagger-cards-entrance .card:nth-child(3) { transition-delay: 0.34s; }
.stagger-cards-entrance .card:nth-child(4) { transition-delay: 0.46s; }
.stagger-cards-entrance .card:nth-child(5) { transition-delay: 0.58s; }
.stagger-cards-entrance .card:nth-child(6) { transition-delay: 0.7s; }

/* Animazione sequenziale (stagger) delle sezioni pillars, veicoli e filosofia */
.stagger-item {
  opacity: 0;
  transform: translateY(20px);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}
.pillars-visible .stagger-item,
.stagger-visible .stagger-item {
  opacity: 1;
  transform: translateY(0);
}
.section-header .stagger-item:nth-child(1) { transition-delay: 0.1s; }
.section-header .stagger-item:nth-child(2) { transition-delay: 0.25s; }
.section-header .stagger-item:nth-child(3) { transition-delay: 0.4s; }

.grid-3 .stagger-item:nth-child(1) { transition-delay: 0.55s; }
.grid-3 .stagger-item:nth-child(2) { transition-delay: 0.7s; }
.grid-3 .stagger-item:nth-child(3) { transition-delay: 0.85s; }

/* Ritardi per la griglia veicoli */
.vehicles-grid .stagger-item:nth-child(1) { transition-delay: 0.15s; }
.vehicles-grid .stagger-item:nth-child(2) { transition-delay: 0.25s; }
.vehicles-grid .stagger-item:nth-child(3) { transition-delay: 0.35s; }
.vehicles-grid .stagger-item:nth-child(4) { transition-delay: 0.45s; }

/* Ritardi per i testi della filosofia */
.philosophy-text-wrap .stagger-item:nth-child(1) { transition-delay: 0.1s; }
.philosophy-text-wrap .stagger-item:nth-child(2) { transition-delay: 0.25s; }
.philosophy-text-wrap .stagger-item:nth-child(3) { transition-delay: 0.4s; }

/* Ritardi per i testi della bio in about.html */
.bio-text-wrap .stagger-item:nth-child(1) { transition-delay: 0.05s; }
.bio-text-wrap .stagger-item:nth-child(2) { transition-delay: 0.12s; }
.bio-text-wrap .stagger-item:nth-child(3) { transition-delay: 0.2s; }
.bio-text-wrap .stagger-item:nth-child(4) { transition-delay: 0.28s; }
.bio-text-wrap .stagger-item:nth-child(5) { transition-delay: 0.36s; }

/* Ritardi per la lista a destra della bio in about.html */
.bio-list-wrap .stagger-item:nth-child(1) { transition-delay: 0.1s; }
.bio-list-wrap .stagger-item:nth-child(2) { transition-delay: 0.18s; }
.bio-list-wrap .stagger-item:nth-child(3) { transition-delay: 0.26s; }
.bio-list-wrap .stagger-item:nth-child(4) { transition-delay: 0.34s; }
.bio-list-wrap .stagger-item:nth-child(5) { transition-delay: 0.42s; }

/* Ritardi per la intro della sezione Cos'è l'officina mobile */
.officina-intro-left .stagger-item:nth-child(1) { transition-delay: 0.1s; }
.officina-intro-left .stagger-item:nth-child(2) { transition-delay: 0.25s; }
.officina-intro-right .stagger-item:nth-child(1) { transition-delay: 0.4s; }
.officina-intro-right .stagger-item:nth-child(2) { transition-delay: 0.55s; }

/* Ritardi per la sezione Beyond Borders in homepage */
.beyond-borders-title-dark.stagger-item { transition-delay: 0.1s; }
.beyond-borders-content-right .stagger-item { transition-delay: 0.35s; }
.beyond-borders-bullets-list .stagger-item:nth-child(1) { transition-delay: 0.5s; }
.beyond-borders-bullets-list .stagger-item:nth-child(2) { transition-delay: 0.65s; }
.beyond-borders-bullets-list .stagger-item:nth-child(3) { transition-delay: 0.8s; }

/* Animazione sequenziale (stagger) delle tappe del processo in officina-mobile.html */
.stagger-process-entrance .process-step {
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}
.stagger-process-entrance.process-visible .process-step {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.stagger-process-entrance .process-step:nth-child(1) { transition-delay: 0.1s; }
.stagger-process-entrance .process-step:nth-child(2) { transition-delay: 0.22s; }
.stagger-process-entrance .process-step:nth-child(3) { transition-delay: 0.34s; }
.stagger-process-entrance .process-step:nth-child(4) { transition-delay: 0.46s; }
.stagger-process-entrance .process-step:nth-child(5) { transition-delay: 0.58s; }

/* Animazione sequenziale modulo contatti (testo prima, form dopo) */
.contact-stagger-wrap .info-col-animate {
  opacity: 0;
  transform: translateY(25px);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}
.contact-stagger-wrap .form-col-animate {
  opacity: 0;
  transform: translateY(25px);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s, opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
  will-change: transform, opacity;
}
.contact-stagger-wrap.contact-visible .info-col-animate,
.contact-stagger-wrap.contact-visible .form-col-animate {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------------------------
   OFFICINA MOBILE HERO REDESIGN
 --------------------------------- */
.hero-officina {
  position: relative;
  background-color: #ffffff;
  padding: 120px 0 var(--spacing-3xl) 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--color-border);
}

.hero-officina-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
  width: 100%;
}

@media (min-width: 992px) {
  .hero-officina-wrapper {
    grid-template-columns: 1fr 1.3fr;
    gap: 4.5rem;
  }
}

.hero-officina-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding-bottom: 5rem; /* Maintain vertical padding for text side */
}

@media (max-width: 991px) {
  .hero-officina-left {
    padding-bottom: 0;
  }
}

.hero-officina-title {
  font-family: var(--font-headings);
  font-weight: 800;
  font-size: 3.4rem;
  line-height: 0.85;
  letter-spacing: -0.03em;
  margin: 0 0 var(--spacing-md) 0;
}

@media (min-width: 992px) {
  .hero-officina-title {
    font-size: 5.2rem;
  }
}

.hero-officina-title .text-gradient {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
}

.hero-officina-title .text-dark {
  color: #06131d;
  display: block;
  font-size: 2.2rem;
}

@media (min-width: 992px) {
  .hero-officina-title .text-dark {
    font-size: 3.6rem;
  }
}

.hero-officina-desc {
  font-family: var(--font-body);
  color: var(--color-text);
  font-size: 1.2rem;
  line-height: 1.6;
  margin: 0 0 var(--spacing-xl) 0;
  max-width: 600px;
}

.hero-officina-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.btn-whatsapp-green {
  background-color: #25D366;
  color: white;
}

.btn-whatsapp-green:hover {
  background-color: #20ba5a;
  transform: translateY(-2px);
}

.hero-officina-right {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  align-self: flex-end;
  width: 100%;
}

@media (min-width: 992px) {
  .hero-officina-right {
    justify-content: flex-end;
    margin-right: -180px;
    margin-bottom: -20px;
    width: 120%;
  }

  .hero-officina-img {
    width: 110%;
    max-width: 950px;
  }
}

.hero-officina-img {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  transform-origin: bottom right;
}

.service-detail-image-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--global-radius, 8px);
}