#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%;
  }
}


/* ===== Servizi: editoriale, no box, no grid ===== */

#servizio .servizio-header{
  margin-bottom: var(--space-l, 2rem);
}

#servizio .lista-servizi{
  display: flex;
  flex-direction: column;
  gap: var(--space-xl, 3rem);
}

/* Riga servizio */
#servizio .servizio{
  display: flex;
  flex-direction: column;
  gap: var(--space-m, 1rem);

  padding: var(--space-m, 1rem) 0;
  border-top: 1px solid var(--border, rgba(0,0,0,.12));
}

#servizio .servizio:first-child{
  border-top: 0;
  padding-top: 0;
}

/* Copy */
#servizio .servizio-copy h3{
  margin: 0 0 .35rem 0;
  display: inline-flex;
  align-items: baseline;
  gap: .55rem;

  font-weight: 800;
  font-size: clamp(18px, 12px + 1.8vw, 40px);
  line-height: 1.05;
}

/* Numero dentro H3 */
#servizio .servizio-num{
  font-weight: 800;
  letter-spacing: .06em;
  opacity: .35;
  font-size: .75em; /* segue la scala dell'h3 */
  transform: translateY(-.02em);
}

/* Testo */
#servizio .servizio-copy p{
  margin: 0;
  max-width: 62ch;
  opacity: .9;
  line-height: 1.55;
}

/* Media: niente box, solo area “aria” */
#servizio .servizio-media{
  display: flex;
  align-items: center;
  justify-content: center;

  /* dà respiro al visual senza sembrare un riquadro */
  min-height: clamp(140px, 18vw, 240px);
}

/* SVG watermark */
#servizio .servizio-svg{
  width: clamp(140px, 18vw, 280px);
  height: auto;
  opacity: .14;
  pointer-events: none;
}


#servizio .servizio,
#servizio .servizio-num,
#servizio .servizio-svg{
  will-change: transform, opacity;
}

/* Desktop: due colonne con flex + alternanza */
@media (min-width: 1024px){
  #servizio .servizio{
    flex-direction: row;
    align-items: center;
    gap: var(--space-xl, 3rem);
    padding: var(--space-l, 2rem) 0;
  }

  #servizio .servizio-copy{ flex: 1 1 52%; }
  #servizio .servizio-media{ flex: 1 1 48%; }

  /* alternanza: pari = media prima, copy dopo */
  #servizio .servizio:nth-child(even) .servizio-media{ order: 1; }
  #servizio .servizio:nth-child(even) .servizio-copy{ order: 2; }

  #servizio .servizio:nth-child(odd) .servizio-copy{ order: 1; }
  #servizio .servizio:nth-child(odd) .servizio-media{ order: 2; }

  #servizio .servizio-copy p{ max-width: 54ch; }
}

/* Hover sobrio (facoltativo) */
@media (hover: hover){
  #servizio .servizio-svg{
    transition: transform .18s ease, opacity .18s ease;
  }
  #servizio .servizio:hover .servizio-svg{
    transform: translateY(-2px);
    opacity: .18;
  }
}