/* Transizione di colore tra le sezioni: fondo e testo seguono la sezione attiva (flow.js). */
.color-stage{position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--flow-bg)}
.color-stage>i{position:absolute;inset:0;opacity:0;will-change:opacity}
.flow-on body{background:transparent}
.flow-on main>section{background-color:transparent!important;color:var(--flow-fg)!important}
.flow-on .hero::before{opacity:.9}
.flow-on .inline-people img{border-color:transparent}
/* Il viola dell'hero si spegne prima del bordo, così non si taglia. */
.hero::before{-webkit-mask-image:linear-gradient(#000 62%,transparent 100%);mask-image:linear-gradient(#000 62%,transparent 100%)}
/* I bottoni pieni/contornati seguono anche loro i colori del fondo. */
.flow-on main .pill.dark{background:var(--flow-fg);color:var(--flow-bg)}
.flow-on main .pill.outline{border-color:var(--flow-fg);color:var(--flow-fg);background:transparent}
/* Gli accenti della sezione agenzie (cyan su blu) sfumano verso il colore del testo insieme al fondo:
   nel passaggio al bianco non restano chiari sul chiaro. */
.agency{--section-accent:var(--agency-accent)}
.flow-on .agency h2 em,.flow-on .agency-stat strong,.flow-on .agency-copy li>span{color:var(--flow-accent)}
.flow-on .agency .pill.light{background:var(--flow-accent);color:var(--flow-bg)}