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

/* === Base sezioni servizi (con bg svg) === */
#servizi-branding,
#servizi-web,
#servizi-content,
#servizi-adv,
#servizi-eventi,
#servizi-non-convenzionale,
#servizi-tradizionali{
  position: relative;
  overflow: clip; /* o hidden se preferisci massima compatibilità */
}

/* testo sempre sopra */
#servizi-branding .contenitore,
#servizi-web .contenitore,
#servizi-content .contenitore,
#servizi-adv .contenitore,
#servizi-eventi .contenitore,
#servizi-non-convenzionale .contenitore,
#servizi-tradizionali .contenitore{
  position: relative;
  z-index: 1;
}

/* bg svg */
#servizi-branding .bg-svg,
#servizi-web .bg-svg,
#servizi-content .bg-svg,
#servizi-adv .bg-svg,
#servizi-eventi .bg-svg,
#servizi-non-convenzionale .bg-svg,
#servizi-tradizionali .bg-svg{
  position: absolute;
  bottom: clamp(-70px, -4vw, -24px);  /* “taglio” fuori sezione */
  z-index: 0;
  pointer-events: none;
  opacity: .10;                      /* tweak */
  filter: saturate(1.05);
}

/* dimensione svg */
#servizi-branding .bg-svg svg,
#servizi-web .bg-svg svg,
#servizi-content .bg-svg svg,
#servizi-adv .bg-svg svg,
#servizi-eventi .bg-svg svg,
#servizi-non-convenzionale .bg-svg svg,
#servizi-tradizionali .bg-svg svg{
  display: block;
  width: clamp(220px, 22vw, 420px);
  height: auto;
  transform-origin: 50% 50%;
  color: var(--arancione); /* visto che usi fill="currentColor" */
}

/* === Alternanza posizione + rotazione === */
/* Destra */
#servizi-branding .bg-svg,
#servizi-content .bg-svg,
#servizi-eventi .bg-svg,
#servizi-tradizionali .bg-svg{
  right: clamp(-60px, -3vw, -16px);
}
#servizi-branding .bg-svg svg,
#servizi-content .bg-svg svg,
#servizi-eventi .bg-svg svg,
#servizi-tradizionali .bg-svg svg{
  transform: rotate(-10deg);
}

/* Sinistra */
#servizi-web .bg-svg,
#servizi-adv .bg-svg,
#servizi-non-convenzionale .bg-svg{
  left: clamp(-60px, -3vw, -16px);
}
#servizi-web .bg-svg svg,
#servizi-adv .bg-svg svg,
#servizi-non-convenzionale .bg-svg svg{
  transform: rotate(10deg);
}

/* Mobile: ancora più “leggera” */
@media (max-width: 768px){
  #servizi-branding .bg-svg,
  #servizi-web .bg-svg,
  #servizi-content .bg-svg,
  #servizi-adv .bg-svg,
  #servizi-eventi .bg-svg,
  #servizi-non-convenzionale .bg-svg,
  #servizi-tradizionali .bg-svg{
    opacity: .06;
    bottom: -60px;
  }

  #servizi-branding .bg-svg svg,
  #servizi-web .bg-svg svg,
  #servizi-content .bg-svg svg,
  #servizi-adv .bg-svg svg,
  #servizi-eventi .bg-svg svg,
  #servizi-non-convenzionale .bg-svg svg,
  #servizi-tradizionali .bg-svg svg{
    width: 240px;
  }
}

/* Desktop-only: restringi la colonna testo alternando padding */
@media (min-width: 1024px){
  /* base: un po’ di respiro */
  /*
  #servizi-branding .contenuto,
  #servizi-web .contenuto,
  #servizi-content .contenuto,
  #servizi-adv .contenuto,
  #servizi-eventi .contenuto,
  #servizi-non-convenzionale .contenuto,
  #servizi-tradizionali .contenuto{
    max-width: 980px;
  }
*/
  /* quando bg è a destra: spingo il testo un po’ a sinistra */
  #servizi-branding .contenuto,
  #servizi-content .contenuto,
  #servizi-eventi .contenuto,
  #servizi-tradizionali .contenuto{
    padding-right: clamp(140px, 10vw, 260px);
    padding-left: 0;
  }

  /* quando bg è a sinistra: spingo il testo un po’ a destra */
  #servizi-web .contenuto,
  #servizi-adv .contenuto,
  #servizi-non-convenzionale .contenuto{
    padding-left: clamp(140px, 10vw, 260px);
    padding-right: 0;
  }
}


/* Link CTA in fondo ai testi (solo pagina servizi) */
section[id^="servizi-"] .contenitore .contenuto .link{
  text-align: right;
  padding-top: 0.7em;
}

section[id^="servizi-"] .contenitore .contenuto .link a{
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color 0.25s ease;
  text-align: right;
  font-size: 0.8em;
}

section[id^="servizi-"] .contenitore .contenuto .link a .iconArrowUpDx{
  transition: transform 0.25s ease;
}

section[id^="servizi-"] .contenitore .contenuto .link a:hover,
section[id^="servizi-"] .contenitore .contenuto .link a:focus-visible{
  color: var(--arancione);
}

section[id^="servizi-"] .contenitore .contenuto .link a:hover .iconArrowUpDx,
section[id^="servizi-"] .contenitore .contenuto .link a:focus-visible .iconArrowUpDx{
  transform: rotate(45deg);
}
/* 👇 DIMENSIONE ICONA (QUESTO MANCAVA) */
section[id^="servizi-"] .contenitore .contenuto .link a svg{
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}