/*--START SEZIONE METODO HOMEPAGE --*/

/* ---------- 0. RESET ----------
   Obbligatorio: il componente usa width:100% insieme al padding.
   Senza border-box, se il tema non lo imposta globalmente, la card
   diventa larga 100% + padding e sfonda il margine della sezione. */
.adp, .adp *, .adp *::before, .adp *::after{ box-sizing: border-box; }

/* ---------- 1. TOKEN ---------- */
.adp{
  /* unico colore pieno del progetto */
  --adp-ink:  #0C0E24;

  /* gradiente di brand: plum a sinistra, arancio a destra */
  --adp-g1:   #8F4958;
  --adp-g2:   #F26002;
  --adp-grad: linear-gradient(90deg, var(--adp-g1) 30%, var(--adp-g2) 100%);

  /* ellisse sfocata dentro la card (Ellipse_7.svg) */
  --adp-blob: linear-gradient(129deg, #151796 0%, #1722EC 41.7%, #56437A 67.1%, #F26002 100%);

  /* tipografia */
  --adp-sans:  "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --adp-serif: "Instrument Serif", Georgia, serif;
  /* Akzidenz è un font Berthold, va caricato dal tema o da Adobe Fonts.
     Se non è disponibile si scende su questi condensed di fallback. */
  --adp-condensed: "Akzidenz-Grotesk BQ Condensed", "Akzidenz-Grotesk Next Cond",
                   "Archivo Narrow", "Oswald", "Arial Narrow", var(--adp-sans);

  /* unità di scala: vale 1px sull'artboard da 1276px e scende in proporzione.
     Tutti i corpi display sono espressi in multipli di questa. */
  --adp-u: clamp(0.56px, 0.07837vw, 1px);

  /* ---- interlinee ----
     Sono RAPPORTI, non px: restano corrette a qualsiasi corpo.
     Accanto, fra parentesi, il valore Figma da cui derivano.
     Alcune sono volutamente più larghe della grafica: a 1.0 il corsivo
     Instrument Serif taglia ascendenti e discendenti. Ritocca qui. */
  --adp-lh-lead:    1.25;   /* 30/24  */
  --adp-lh-title:   1.06;   /* 54/54 = 1, un filo di aria per gli accenti */
  --adp-lh-italic:  1.25;   /* 60/60 in Figma → serve 75/60 per non tagliare */
  --adp-lh-stat:    0.95;   /* 56/60  */
  --adp-lh-desc:    1.25;   /* 20/16  */
  --adp-lh-caption: 1.5;    /* 24/16  */

  --adp-gap:  calc(26 * var(--adp-u));
  --adp-mark: max(40px, calc(50 * var(--adp-u)));
  --adp-pad:  max(18px, calc(24 * var(--adp-u)));  /* padding interno card */
  --adp-rail: clamp(60px, 6vw, 78px);              /* rail → contenuto */

  position: relative;
  isolation: isolate;
  padding: clamp(48px, 7vw, 96px) clamp(20px, 4vw, 40px);
  font-family: var(--adp-sans);
  color: var(--adp-ink);
  -webkit-font-smoothing: antialiased;
  overflow: clip;
}

.adp__inner{ position:relative; z-index:1; max-width:1276px; margin-inline:auto; }

/* testo in gradiente, con fallback a colore pieno */
.adp__g{ color: var(--adp-g2); background: var(--adp-grad);
         -webkit-background-clip:text; background-clip:text; }
@supports (-webkit-background-clip:text) or (background-clip:text){ .adp__g{ color: transparent; } }

/* ---------- 2. TESTA E CODA ---------- */
.adp__intro, .adp__outro{ text-align:center; position:relative; z-index:2; }

/* Manrope 600 · 24/30 · -4% */
.adp__lead{
  margin:0 auto; max-width:27ch;
  font-size: max(19px, calc(24 * var(--adp-u)));
  line-height: var(--adp-lh-lead); font-weight:600; letter-spacing:-.04em;
}
/* il tema stila gli <em>: qui serve solo evidenziare col gradiente,
   il peso e il carattere devono restare quelli del titolo */
.adp__lead em{
  font-style: normal !important;
  font-family: inherit !important;
  font-weight: 600 !important;
}

/* Manrope 600 · 24/30 · 0% */
.adp__done{
  margin:0;
  font-size: max(19px, calc(24 * var(--adp-u)));
  line-height: var(--adp-lh-lead); font-weight:600; letter-spacing:0;
}

/* START / FINISH — Akzidenz Cond 700 · 24/24 · -4% */
.adp__pill{
  display:inline-flex; align-items:center; gap:8px;
  margin:24px 0 0; height:36px; padding:0 15px;
  border-radius:18px; position:relative; isolation:isolate;
}
.adp__pill::before{
  content:""; position:absolute; inset:0; z-index:-1;
  border-radius:inherit; background: var(--adp-grad); opacity:.1;
}
.adp__pill svg{ width:20px; height:20px; flex:none; }
.adp__pill-label{
  font-family: var(--adp-condensed);
  font-size:24px; line-height:1; font-weight:700;
  letter-spacing:-.04em; text-transform:uppercase;
}
.adp__pill--finish{ margin:0 0 24px; }

.adp-flag-cloth{ fill: var(--adp-g2); }
.adp-flag-base { fill: var(--adp-g1); }

.adp__outro{ margin-top: clamp(44px, 5vw, 72px); }

/* ---------- 3. TRACCIATO ---------- */
.adp__path{ position:absolute; inset:0; z-index:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.adp__path-track,
.adp__path-progress{ fill:none; stroke-width:2; stroke-dasharray:6 6; }
.adp__path-track{ stroke: var(--adp-ink); opacity:.28; }
.adp__path-progress{ stroke: var(--adp-g2); } /* il JS lo sostituisce col gradiente */
.adp__path-mask{ fill:none; stroke:#fff; stroke-width:16; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- 4. STEP ---------- */
.adp__steps{ list-style:none; margin: clamp(26px,3.5vw,40px) 0 0; padding:0; position:relative; z-index:1; }

/* Due sole colonne: testo | (card + cta).
   285 e 584 = 351 card + 26 gap + 207 bottone, come in Figma. */
.adp__step{
  position:relative;
  display:grid;
  grid-template-columns: minmax(0,285fr) minmax(0,584fr);
  align-items:center;
  column-gap: var(--adp-gap);
  padding-block: clamp(28px, 3vw, 40px);
  padding-inline: calc(var(--adp-mark) + var(--adp-rail)) calc(var(--adp-mark) + var(--adp-rail) - 30px);
}
.adp__step--right{
  grid-template-columns: minmax(0,584fr) minmax(0,285fr);
  padding-inline: calc(var(--adp-mark) + var(--adp-rail) - 30px) calc(var(--adp-mark) + var(--adp-rail));
}

/* Piazzamento ESPLICITO, non `order`.
   `order` cambia solo l'ordine di riempimento: gli item finivano comunque
   nei track 1-2-3 nell'ordine sbagliato, e il testo cadeva nel track largo. */
/* `grid-row:1` e' obbligatorio, non decorativo: negli step specchiati il
   testo sta in colonna 2 ma viene prima nel DOM, e l'auto-placement sparse
   manda a capo l'item successivo se la sua colonna e' minore di quella del
   cursore. Senza, la card finirebbe in una seconda riga implicita. */
.adp__col-text { grid-column:1; grid-row:1; min-width:0; }
.adp__col-media{ grid-column:2; grid-row:1; min-width:0; }
.adp__step--right .adp__col-media{ grid-column:1; }
.adp__step--right .adp__col-text { grid-column:2; }

/* card e cta nello stesso contenitore: così i bordi inferiori
   restano allineati anche se la colonna di testo diventa più alta */
.adp__col-media{ display:flex; align-items:flex-end; gap: var(--adp-gap); }
.adp__step--right .adp__col-media{ flex-direction: row-reverse; }

.adp__markers{
  position:absolute; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:7px; align-items:center;
}
.adp__step--left  .adp__markers{ left:0; }
.adp__step--right .adp__markers{ right:0; }

.adp__marker{ width:var(--adp-mark); height:var(--adp-mark); display:grid; place-items:center; position:relative; }
.adp__marker-core{
  position:absolute; inset:0; border-radius:50%;
  background: var(--adp-grad);
  transform: scale(.36);
  transition: transform .45s cubic-bezier(.34,1.45,.5,1);
}
.adp__marker svg{
  position:relative; width:40%; height:40%;
  fill:none; stroke:#fff; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
  opacity:0; transition: opacity .2s .1s ease;
}
.adp__marker--check svg path{
  stroke-dasharray:22; stroke-dashoffset:22;
  transition: stroke-dashoffset .5s .16s cubic-bezier(.65,0,.35,1);
}
.adp__marker--loop svg{ transition-delay:.34s; }

.adp__step.is-on .adp__marker-core{ transform: scale(1); }
.adp__step.is-on .adp__marker svg{ opacity:1; }
.adp__step.is-on .adp__marker--check svg path{ stroke-dashoffset:0; }

.adp__marker-number{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--adp-sans);
  font-size:max(16px, calc(20 * var(--adp-u)));
  line-height:1;
  font-weight:700;
  color:#fff;
  opacity:0;
  transform:scale(.65);
  transition:
    opacity .2s .12s ease,
    transform .4s .12s cubic-bezier(.34,1.45,.5,1);
}

.adp__step.is-on .adp__marker-number{
  opacity:1;
  transform:scale(1);
}

.adp__card-text{
  display:flex;
  align-items:flex-start;
}

.adp__note{
  margin-left:10px;
  margin-top:8px;

  font-size:12px;
  line-height:1;
  font-weight:400;
  letter-spacing:0;
  color:#000;
  text-decoration:underline;
}

/* ---------- 5. CONTENUTI ---------- */
/* Manrope 600 · 12/12 · uppercase — testo scuro, sfondo gradiente al 10% */
.adp__badge{
  display:inline-flex; align-items:center; height:28px; padding:0 13px;
  border-radius:14px; position:relative; isolation:isolate;
  font-size:12px; line-height:1; font-weight:600;
  letter-spacing:0; text-transform:uppercase; white-space:nowrap;
  color: var(--adp-ink);
}
.adp__badge::before{
  content:""; position:absolute; inset:0; z-index:-1;
  border-radius:inherit; background: var(--adp-grad); opacity:.1;
}

/* Manrope 500 · 54/54 · -4% + Instrument Serif italic 60/60 · -4% */
/* !important obbligatorio: e' un <h3> e le regole h1-h6 del tema
   hanno la meglio su una singola classe. */
.adp__title{
  margin: calc(16 * var(--adp-u)) 0 calc(6 * var(--adp-u));
  font-family: var(--adp-sans) !important;
  font-size: max(30px, calc(54 * var(--adp-u))) !important;
  line-height: var(--adp-lh-title) !important;
  font-weight: 500 !important;
  letter-spacing: -.04em !important;
}
/* il corsivo fa eccezione: mantiene il suo carattere e le sue misure,
   protette a loro volta perche' l'ereditarieta' non basta contro il tema */
.adp__title em{
  display:block;
  font-family: var(--adp-serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: max(34px, calc(60 * var(--adp-u))) !important;
  line-height: var(--adp-lh-italic) !important;
  letter-spacing: -.04em !important;
  /* recupera metà dell'interlinea in eccesso, così il corsivo non si
     stacca da "AI Data": l'aria in più resta tutta sotto, dove serve */
  margin-top: calc((1 - var(--adp-lh-italic)) * .5em);
}

/* Manrope 600 · 16/20 */
.adp__desc{ margin:0; font-size:16px; line-height: var(--adp-lh-desc); font-weight:600; letter-spacing:0; }

.adp__card{
  flex:1 1 0; min-width:0;
  position:relative; overflow:hidden;
  border-radius:10px; background:#fff;
  padding: var(--adp-pad);
  min-height: max(150px, calc(195 * var(--adp-u)));
  display:flex; flex-direction:column; justify-content:space-between; gap:20px;
  box-shadow: 0 0 14px 0 rgba(0,0,0,.15);
}
/* Ellipse_7: cerchio r=109 in (218,-3) con blur gaussiano 55 */
.adp__card::before{
  content:""; position:absolute; z-index:0;
  width: calc(218 * var(--adp-u)); height: calc(218 * var(--adp-u));
  right: calc(24 * var(--adp-u)); top: calc(-112 * var(--adp-u));
  border-radius:50%;
  background: var(--adp-blob); opacity:.15;
  filter: blur(calc(55 * var(--adp-u)));
}
.adp__stat, .adp__caption{ position:relative; z-index:1; }

/* Manrope 800 · 60/56 · -8% ; percentuale in apice, spaziatura 0 */
.adp__stat{
  margin:0;
  font-size: max(40px, calc(60 * var(--adp-u)));
  line-height: var(--adp-lh-stat); font-weight:800; letter-spacing:-.08em;
}
.adp__stat sup {
	letter-spacing: normal;
}
/*.adp__stat sup{
  font-size:.52em; line-height:0; letter-spacing:0;
  position:relative; top:-.68em; vertical-align:baseline;
}*/

/* Manrope 400 · 16/24 */
.adp__caption{ margin:0; font-size:16px; line-height: var(--adp-lh-caption); font-weight:400; letter-spacing:0; }

/* Manrope 700 · 18 · line-height 100% */
.adp__col-cta{ flex:0 0 auto; display:flex; }
.adp__cta{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:57px; padding:0 30px; border-radius:28.5px;
  background: var(--adp-grad); color:#fff !important;
  font-family: var(--adp-sans); font-size:18px; line-height:1; font-weight:700;
  letter-spacing:0; text-decoration:none; white-space:nowrap;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.adp__cta:hover, .adp__cta:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -14px rgba(242,96,2,.7);
  filter: saturate(1.06);
  color:#fff !important;
}
.adp__cta:focus-visible{ outline:2px solid var(--adp-ink); outline-offset:3px; }

/* ---------- 6. INGRESSO ANIMATO ---------- */
.adp.is-js .adp__col-text,
.adp.is-js .adp__card,
.adp.is-js .adp__col-cta{
  opacity:0; transform: translateY(20px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,.8,.3,1);
}
.adp.is-js .adp__step.is-on .adp__col-text,
.adp.is-js .adp__step.is-on .adp__card,
.adp.is-js .adp__step.is-on .adp__col-cta{ opacity:1; transform:none; }
.adp.is-js .adp__step.is-on .adp__card  { transition-delay:.10s; }
.adp.is-js .adp__step.is-on .adp__col-cta{ transition-delay:.20s; }

/* ---------- 7. MOBILE ---------- */
@media (max-width: 1100px){
  .adp{ --adp-rail:22px; --adp-gap:20px; padding-inline:20px; }
  .adp__step,
  .adp__step--right{
    grid-template-columns: minmax(0,1fr);
    row-gap:20px;
    padding-inline: calc(var(--adp-mark) + var(--adp-rail)) 0;
  }
  /* su mobile servono davvero due righe: si rimette l'auto-placement */
  .adp__col-text, .adp__col-media,
  .adp__step--right .adp__col-text,
  .adp__step--right .adp__col-media{ grid-column:1; grid-row:auto; }
  .adp__col-media,
  .adp__step--right .adp__col-media{
    flex-direction:column; align-items:stretch; gap:20px;
    /* fra 1100 e ~700px senza questo tetto la card diventa larghissima
       e bassa. Alza o togli il valore se la vuoi a piena larghezza. */
    max-width:560px;
  }
  .adp__col-cta{ align-items:flex-start; }
  /* in colonna l'asse principale diventa verticale: `flex:1 1 0` ereditato
     dal desktop imponeva flex-basis 0 sull'ALTEZZA e, con min-height:0,
     la card collassava schiacciando numero e testo. */
  .adp__card{ flex:0 0 auto; align-self:stretch; }
  .adp__step--right .adp__markers{ right:auto; left:0; }
  .adp__title{ margin:14px 0 10px; }
  .adp__card{ min-height:0; }
  .adp__card::before{ width:200px; height:200px; right:20px; top:-104px; filter:blur(52px); }
  .adp__stat{ font-size:44px; }
  .adp__cta{ min-height:52px; font-size:17px; }
  .adp__pill-label{ font-size:21px; }
}

/* ---------- 8. ACCESSIBILITÀ ---------- */
@media (prefers-reduced-motion: reduce){
  .adp.is-js .adp__col-text,
  .adp.is-js .adp__card,
  .adp.is-js .adp__col-cta{ opacity:1; transform:none; transition:none; }
  .adp__marker-core{ transform:scale(1); transition:none; }
  .adp__marker svg{ opacity:1; }
  .adp__marker--check svg path{ stroke-dashoffset:0; transition:none; }
  .adp__cta{ transition:none; }
}

/*--END SEZIONE METODO --*/

/*--START SEZIONE METODO ORIZZONTALE (.adp--h) --
  Va caricato DOPO il CSS "SEZIONE METODO HOMEPAGE": lo estende, non lo
  sostituisce. Sotto il breakpoint non c'è una sola regola, quindi .adp--h
  è identico all'ADP della homepage (zig-zag sopra 1100px, mobile sotto).

  BREAKPOINT: 1400px. È l'unico punto da toccare se vuoi abbassarlo.
  A 1400 le colonne sono ~256px (1280 / 5); sotto i ~1280px la CTA e il
  "Dal 20% al 6%" non ci stanno più con un corpo leggibile. */

@media (min-width: 1400px){

  /* ---------- 1. TOKEN ---------- */
  .adp--h{
    /* unità di scala: 1px a 1700 di viewport, 0.82 a 1400 */
    --adp-hu: clamp(.8px, calc(100vw / 1700), 1px);

    --adp-h-lead:   52px;   /* distanza linee orizzontali ↔ colonne (letta dal JS) */
    --adp-h-corner: 32px;   /* raggio delle curve (letto dal JS) */
    --adp-h-pad:    clamp(28px, 2.6vw, 48px);           /* bordo colonna → contenuto */
    --adp-h-edge:   calc(var(--adp-mark) / 2 + 32px);   /* linea → contenuto, in verticale */
    --adp-pad:      max(16px, calc(20 * var(--adp-hu)));

    /* il contenitore del sito (1700 - 2×60) fa già da margine */
    padding-inline: 0;
  }
  .adp--h .adp__inner{ max-width:none; }

  /* ---------- 2. GRIGLIA ----------
     Una colonna per step, quante sono (auto-flow column), e due righe
     condivise: testo | card + cta. Gli step usano `subgrid`, così le card
     partono tutte alla stessa quota e hanno la stessa altezza anche se
     le descrizioni vanno su un numero diverso di righe. */
  .adp--h .adp__steps{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(0,1fr);
    grid-template-rows:auto auto;
    row-gap: calc(30 * var(--adp-hu));
    /* 1px: la linea sul bordo esterno non viene tagliata da overflow:clip */
    margin: calc(var(--adp-h-lead) + 80px) 1px 0;
  }

  .adp--h .adp__step{
    grid-row: span 2;
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: subgrid;
    align-items: start;
    padding: var(--adp-h-edge) var(--adp-h-pad);
  }

  /* specificità (0,3,0): batte i piazzamenti espliciti del desktop */
  .adp--h .adp__step .adp__col-text{
    grid-column:1; grid-row:1;
    container-type: inline-size;
  }
  .adp--h .adp__step .adp__col-media{
    grid-column:1; grid-row:2;
    align-self: stretch;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(22 * var(--adp-hu));
  }

  /* ---------- 3. MARKER ----------
     Centrati sul bordo dello step: sotto per --left, sopra per --right.
     Il JS legge dove stanno e fa passare la linea da lì. */
  .adp--h .adp__step .adp__markers{ left:50%; right:auto; }
  .adp--h .adp__step--left .adp__markers{
    top:auto; bottom:0; transform: translate(-50%, 50%);
  }
  .adp--h .adp__step--right .adp__markers{
    top:0; bottom:auto; transform: translate(-50%, -50%);
  }

  /* ---------- 4. TIPOGRAFIA ----------
     Corpi ridotti rispetto al verticale. Titolo e numero hanno anche un
     tetto in cqi (larghezza della colonna / della card), così "Integration"
     o "Dal 20% al 6%" non escono mai dalla colonna. La prima dichiarazione
     è il fallback per i browser senza container query. */
  .adp--h .adp__badge{ height:24px; padding:0 11px; font-size:11px; }

  .adp--h .adp__title{
    margin: calc(14 * var(--adp-hu)) 0 calc(14 * var(--adp-hu));
    font-size: calc(42 * var(--adp-hu)) !important;
    font-size: min(calc(42 * var(--adp-hu)), 19cqi) !important;
  }
  .adp--h .adp__title em{
    font-size: calc(46 * var(--adp-hu)) !important;
    font-size: min(calc(46 * var(--adp-hu)), 21cqi) !important;
  }

  .adp--h .adp__desc{
    font-size: max(13px, calc(15 * var(--adp-hu)));
    line-height: 1.35;
    max-width: 30ch;
  }

  /* ---------- 5. CARD E CTA ---------- */
  .adp--h .adp__card{
    /* riempie la riga del subgrid: tutte le card alte uguali */
    flex: 1 0 auto;
    align-self: stretch;
    min-height: calc(160 * var(--adp-hu));
    justify-content: flex-start;
    gap: calc(22 * var(--adp-hu));
    container-type: inline-size;
  }

  /* numero su una riga sola, come in grafica: apici più piccoli
     (%, "Dal", "al") e corpo agganciato alla larghezza della card.
     "Dal 20% al 6%" è il caso peggiore, ~4.4em: da qui il 20cqi. */
  .adp--h .adp__stat{
    white-space: nowrap;
    font-size: calc(44 * var(--adp-hu));
    font-size: min(calc(44 * var(--adp-hu)), 20cqi);
  }
  .adp--h .adp__stat sup{ font-size:.6em; line-height:0; vertical-align:.7em; }
  .adp--h .adp__note{ margin-left:6px; margin-top:4px; font-size:11px; }

  .adp--h .adp__caption{
    font-size: max(12.5px, calc(14 * var(--adp-hu)));
    line-height: 1.45;
  }

  .adp--h .adp__cta{
    min-height: max(38px, calc(42 * var(--adp-hu)));
    padding: 0 calc(22 * var(--adp-hu));
    font-size: max(14px, calc(15 * var(--adp-hu)));
    max-width: 100%;
  }

  /* ---------- 6. CODA ----------
     Come da grafica: prima il testo, poi la pill FINISH.
     Il JS chiude il tracciato sopra il primo dei due. */
  .adp--h .adp__outro{
    display:flex; flex-direction:column; align-items:center;
    margin-top: calc(var(--adp-h-lead) + 80px);
  }
  .adp--h .adp__done{ order:-1; }
  .adp--h .adp__pill--finish{ margin: 22px 0 0; }
}

/* senza subgrid le card non si allineano fra colonne: si limita il danno
   dando al blocco testo un'altezza minima comune */
@media (min-width: 1400px){
  @supports not (grid-template-rows: subgrid){
    .adp--h .adp__step{ grid-template-rows: auto 1fr; }
    .adp--h .adp__step .adp__col-text{ min-height: 15.5em; }
  }
}

/*--END SEZIONE METODO ORIZZONTALE --*/


/*--START SEZIONE TIMELINE CONSULENZE --*/

.dw-timeline{
  --dw-line: 2px;
  --dw-dot: 30px;
  --dw-tick: 18px;
  --dw-orange: #e2703f;
  --dw-space: 60px;     /* distanza card ← → centro timeline */
  --dw-gap: -10px;      /* stacco freccia dalla card */
  --dw-arrow-w: 30px;
  --dw-arrow-h: 30px;
  --dw-side: 15px;      /* posizione timeline sotto 1024 */
  --dw-card-gap: 5px;  /* spazio tra titolo e descrizione */
  --dw-progress: 0;
  position: relative;
}
.dw-timeline__col{ position: relative; }

/* binario */
.dw-rail{
  position:absolute; left:50%; transform:translateX(-50%);
  top: var(--dw-top, 100px); bottom: var(--dw-bottom, 100px);
  width: var(--dw-line);
  background: rgba(255,255,255,.85);
  z-index:1;
}
.dw-rail__fill{
  position:absolute; inset:0;
  background: var(--dw-orange);
  transform: scaleY(var(--dw-progress));
  transform-origin: top;
}

/* pallino */
.dw-step{ position: relative; overflow: visible; }
.dw-step::before,
.dw-step::after{
  content:""; position:absolute; left:50%; top:50%;
  transform: translate(-50%,-50%);
}
.dw-step::before{
  width: var(--dw-dot); height: var(--dw-dot);
  border-radius:50%;
  background:#fff;
  border:1px solid rgba(255,255,255,.6);
  z-index:3;
  transition: background .4s ease, border-color .4s ease;
}
.dw-step.is-done::before{
  background: linear-gradient(135deg,#8a4a55,#e2703f);
  border-color: transparent;
}
/* check */
.dw-step::after{
  width: var(--dw-tick); height: var(--dw-tick);
  background-color:#9aa0b5;
  -webkit-mask: var(--dw-tick-img) no-repeat center/contain;
          mask: var(--dw-tick-img) no-repeat center/contain;
  z-index:4;
  transition: background-color .4s ease;
}
.dw-step.is-done::after{ background-color:#fff; }

.dw-timeline{
  --dw-tick-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 14L8.5 17.5L19 6.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --dw-arrow-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 33 37'%3E%3Cpath d='M30 12.9372C34 15.2466 34 21.0201 30 23.3295L9 35.4538C5 37.7632 0 34.8765 0 30.2577L0 6.00895C0 1.39014 5 -1.49661 9 0.812792L30 12.9372Z' fill='white'/%3E%3C/svg%3E");
}

/* card */
.dw-card{ overflow: visible; }
.dw-card > .vc_column-inner{ position: relative; }
.dw-step--left  .dw-card > .vc_column-inner{ padding-right: var(--dw-space); }
.dw-step--right .dw-card > .vc_column-inner{ padding-left:  var(--dw-space); }

.dw-card > .vc_column-inner > .wpb_wrapper{
  display:flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--dw-card-gap);
  background:rgba(255, 255, 255, 0.1);
  border:1px solid rgba(255, 255, 255, 0.3);
  border-radius:14px;
  padding:26px 28px;
}
/* default: affiancati 33 / 67 */
.dw-card__head,
.dw-card__body{
  flex: 1 1 100%;
  min-width: 0;
  margin: 0 !important;
}

/* freccetta */
.dw-card > .vc_column-inner::after{
  content:""; position:absolute; top:50%;
  width: var(--dw-arrow-w); height: var(--dw-arrow-h);
  background: var(--dw-arrow-img) no-repeat center/contain;
  z-index:2;
}
.dw-step--left .dw-card > .vc_column-inner::after{
  right: calc(var(--dw-space) - var(--dw-gap) - var(--dw-arrow-w));
  transform: translateY(-50%);
}
.dw-step--right .dw-card > .vc_column-inner::after{
  left: calc(var(--dw-space) - var(--dw-gap) - var(--dw-arrow-w));
  transform: translateY(-50%) scaleX(-1);
}

/* ---- sotto 1024: timeline a sinistra, card a destra ---- */
@media (max-width: 1023px){
  .dw-rail{ left: var(--dw-side); transform:none; }
  .dw-step::before,
  .dw-step::after{ left: var(--dw-side); }

  /* annulla larghezza e offset di WPBakery */
  .dw-timeline .dw-card{
    width:100% !important;
    margin-left:0 !important;
    left:auto !important; right:auto !important;
  }
  .dw-step--left  .dw-card > .vc_column-inner,
  .dw-step--right .dw-card > .vc_column-inner{
    padding-left: calc(var(--dw-side) + var(--dw-dot)/2 + 24px);
    padding-right: 0;
  }
  .dw-card > .vc_column-inner::after{ display:none; }
}

@media (max-width: 767px){
  .dw-card > .vc_column-inner > .wpb_wrapper{ display:block; }
  .dw-card__head{ margin-bottom:14px !important; }
  .dw-card__head, .dw-card__body{ flex: 1 1 100%; }
}

/*--END SEZIONE TIMELINE CONSULENZE --*/


/*--START SEZIONE TOPBAR --*/

/* Azzera tutti i contenitori WPBakery/Salient attorno alla top bar */
.tmi-topbar {
    /* Allineamento al .container di Salient: max-width 1700px, padding 60px */
    --tmi-gutter: max(60px, calc((100% - 1700px) / 2 + 60px));
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 43px;
    margin-bottom: 0px !important;
    padding: 8px calc(var(--tmi-gutter) + 40px) 8px var(--tmi-gutter);
    background: #FF7300;
    color: #0C0E24;
    box-sizing: border-box;
  }
  .tmi-topbar__inner {
    display: flex;
    align-items: center;
    gap: 8px 24px;
  }
  .tmi-topbar__text {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    color: #0C0E24;
  }
  .tmi-topbar .tmi-topbar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 26px;
    padding: 0 14px;
    border: 1px solid #0C0E24;
    border-radius: 13px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: #0C0E24 !important;
    text-decoration: none !important;
    background: transparent;
    white-space: nowrap;
    box-sizing: border-box;
    transition: background .2s, color .2s;
  }
  .tmi-topbar .tmi-topbar__btn:hover,
  .tmi-topbar .tmi-topbar__btn:focus-visible {
    background: #0C0E24;
    color: #FFFFFF !important;
  }
  .tmi-topbar__btn-icon {
    display: none;
  }
  .tmi-topbar .tmi-topbar__close {
    position: absolute;
    top: 50%;
    right: calc(var(--tmi-gutter) - 10px); /* la X visibile si allinea al bordo del container */
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    color: #0C0E24;
    cursor: pointer;
    transition: background .2s;
  }
  .tmi-topbar .tmi-topbar__close:hover {
    background: rgba(12, 14, 36, .1);
  }

	/* Barra chiusa: nasconde la global section */
	#header-outer .nectar_hook_before_secondary_header.tmi-closed {
	  display: none !important;
	}

  /* Tablet e mobile: la CTA diventa icona */
  @media (max-width: 999px) {
    .tmi-topbar {
      min-height: 40px;
      padding: 8px 56px 8px 21px;
    }
    .tmi-topbar__inner {
      gap: 10px;
    }
    .tmi-topbar__text {
      font-size: 14px;
    }
    .tmi-topbar .tmi-topbar__btn {
      width: 24px;
      height: 24px;
      padding: 0;
      border-radius: 50%;
    }
    .tmi-topbar__btn-label {
      display: none;
    }
    .tmi-topbar__btn-icon {
      display: block;
    }
    .tmi-topbar .tmi-topbar__close {
      right: 15px;
    }
	#header-outer:has(.nectar_hook_before_secondary_header.tmi-closed) {
    	padding-top: 12px !important;
  	}
  }

/*--END SEZIONE TOPBAR --*/