h3{
  font-size: var(--space-l);
}
#intro{
  padding-top: 45vh;
  position: relative;
  overflow: clip;
}

#intro .bg-svg{
  position: absolute;
  top: -25px;
  left: -50px; /* ← questo crea il taglio */

  z-index: 0;
  pointer-events: none;
}


#intro .bg-svg svg{
  width: clamp(350px, 302px + 15vw, 590px);
  height: auto;

  transform: rotate(36deg); /* verso destra */
  transform-origin: 50% 50%;

  color: rgba(0,0,0,.18);
  filter: grayscale(1);
  opacity: .35;
}

#intro .contenitore{
  position: relative;
  z-index: 1;
}


#intro .contenitore header h1{
  font-size: clamp(22px, 7.2px + 4.625vw, 96px);
}

@media (max-width: 768px){
  #intro .bg-svg{
    opacity: .18;
    top: -60px;
    left: -60px;
  }

  #intro .bg-svg svg{
    width: 360px;
  }
}

/* desktop */
@media only screen and (min-width: 768px){
  #intro .contenitore .contenuto{
    padding-left: 30%;
  }
}

/*
#storia
#manifesto
#mission
#per-chi-lo-facciamo

#timeline
#valori
#cosa-facciamo
#metodo

*/

#storia,
#manifesto,
#mission,
#per-chi-lo-facciamo,
#timeline,
#valori,
#cosa-facciamo,
#metodo{
  position: relative;
  overflow: hidden;
}

#storia .contenitore,
#manifesto .contenitore,
#mission .contenitore,
#per-chi-lo-facciamo .contenitore,
#timeline .contenitore,
#valori .contenitore,
#cosa-facciamo .contenitore,
#metodo .contenitore{
  position: relative;
  z-index: 1;
}

#storia .bg-svg,
#manifesto .bg-svg,
#mission .bg-svg,
#per-chi-lo-facciamo .bg-svg,
#timeline .bg-svg,
#valori .bg-svg,
#cosa-facciamo .bg-svg,
#metodo .bg-svg{
  position: absolute;
  bottom: clamp(-70px, -4vw, -24px);
  z-index: 0;
  pointer-events: none;
  opacity: .25;
  filter: saturate(1.05);
}

#storia .bg-svg svg,
#manifesto .bg-svg svg,
#mission .bg-svg svg,
#per-chi-lo-facciamo .bg-svg svg,
#timeline .bg-svg svg,
#valori .bg-svg svg,
#cosa-facciamo .bg-svg svg,
#metodo .bg-svg svg{
  display: block;
  width: clamp(220px, 22vw, 420px);
  height: auto;
  transform-origin: 50% 50%;
  color: var(--arancione);
}

#storia .bg-svg,
#manifesto .bg-svg,
#mission .bg-svg,
#per-chi-lo-facciamo .bg-svg{
  right: clamp(-60px, -3vw, -16px);
}

#storia .bg-svg svg,
#manifesto .bg-svg svg,
#mission .bg-svg svg,
#per-chi-lo-facciamo .bg-svg svg{
  transform: rotate(-10deg);
}

#timeline .bg-svg,
#valori .bg-svg,
#cosa-facciamo .bg-svg,
#metodo .bg-svg{
  left: clamp(-60px, -3vw, -16px);
}

#timeline .bg-svg svg,
#valori .bg-svg svg,
#cosa-facciamo .bg-svg svg,
#metodo .bg-svg svg{
  transform: rotate(10deg);
}



@media (min-width: 1024px){
  #storia .contenuto,
  #manifesto .contenuto,
  #mission .contenuto,
  #per-chi-lo-facciamo .contenuto{
    padding-right: clamp(150px, -90px + 23.4375vw, 360px); /* 1024 → 1920 */
    padding-left: 0;
  }

  #servizi-web .contenuto,
  #servizi-adv .contenuto,
  #servizi-non-convenzionale .contenuto,
  #timeline .contenuto,
  #valori .contenuto,
  #cosa-facciamo .contenuto,
  #metodo .contenuto{
    padding-left: clamp(150px, -90px + 23.4375vw, 360px); /* 1024 → 1920 */
    padding-right: 0;
  }
}


.image-container {


  width: 100%;
  height: 100vh; /* Occupa tutta l'altezza dello schermo */
  display: flex; /* Attiva Flexbox */
  justify-content: center; /* Centra orizzontalmente */
  align-items: center;    /* Centra verticalmente */
  overflow: hidden;       /* Nasconde l'immagine quando esce dai bordi */

}
/*
.image {
  width: 50vw; 
  height: auto;
  object-fit: cover;
}
*/

.image {
    width: 50vw; /* o la tua misura iniziale */
    height: auto;
    display: block;
    will-change: transform; /* Aiuta la fluidità */
    transform-origin: center center; /* Si allarga partendo dal centro */
}

#storia ul,
#manifesto ul{
  list-style: none;
  display: grid;
  gap: var(--space-m);
  margin-block: var(--space-l);
  padding: 0;
  padding-left:  var(--space-l);
}

/* ogni item: riga con micro-linea laterale */
#storia ul > li,
#manifesto ul > li{
  padding-left: var(--space-xs);
  border-left: 3px solid color-mix(in srgb, var(--arancione) 50%, transparent);
}

#storia ul > li > div,
#manifesto ul > li > div{
  display: inline-flex;
  align-items: center;
  gap: var(--space-s);
  margin-bottom: var(--space-2xs);
}

#storia ul h3,
#manifesto ul h3{
  font-size: var(--M);
  line-height: 1.05;
  letter-spacing: -0.5px;
}

#storia ul .icon,
#manifesto ul .icon{
  width: 1.1em;
  height: 1.1em;
}

#timeline .contenuto{
  gap: var(--space-l);
}

#timeline article{
  padding-left: var(--space-m);
  padding-bottom: var(--space-l);
  border-left: 2px solid color-mix(in srgb, var(--arancione) 20%, transparent);
}


#timeline article:last-of-type{
  padding-bottom: 0;
  padding-left: var(--space-m);
}

#timeline h3{
  margin-bottom: var(--space-2xs);
  color: var(--arancione);
  letter-spacing: -0.5px;
}


.ops-way{
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: ops;
  display: grid;
  gap: var(--space-m);
}

.ops-way-step{
  padding-left: var(--space-m);
  border-left: 2px solid color-mix(in srgb, var(--arancione) 35%, transparent);
}

.ops-way-head{
  display: flex;
  align-items: baseline;
  gap: var(--space-s);
  margin-bottom: var(--space-2xs);
}

.ops-way-num{
  font-weight: 800;
  color: var(--arancione);
  letter-spacing: -0.5px;
  font-size: var(--M);
  line-height: 1;
}

.ops-way-step h3{
  font-size: var(--M);
  line-height: 1.05;
  letter-spacing: -0.5px;
}

.ops-way-step p.bold{
  margin-top: var(--space-2xs);
}