/* ==========================================================================================
   chi-sono.css — /chi-sono/ (agente storia)
   Eroe con biografia che disegna la sagoma (shape-outside) + raggi X, timeline col motore di
   inherited (carta fissa ritagliata da ogni tappa con clip-path), metodo, strumenti, voci, invito.
   ========================================================================================== */

/* ================================================================ EROE ================== */
.cs-eroe {
  --wf: min(82vw, 440px);
  --nome-fs: clamp(54px, 17vw, 112px);
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: calc(var(--testata-h) + 20px) var(--margine) 56px;
}
.cs-eroe__luce { position: absolute; inset: 0; z-index: -1; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 98%); mask-image: linear-gradient(to bottom, #000 55%, transparent 98%); } /* niente bordo netto in fondo alla hero */
.cs-eroe__luce i {
  position: absolute; left: 50%; border-radius: 50%;
  transform: translate(-50%, -50%);
}
.cs-eroe__luce i:nth-child(1) {
  top: calc(var(--testata-h) + 20px + 60px + var(--wf) * .42);
  width: calc(var(--wf) * 1.5); aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(105, 49, 170, .5), rgba(65, 37, 108, .22) 55%, rgba(65, 37, 108, 0));
  animation: mm-respira 16s ease-in-out infinite alternate;
}
.cs-eroe__luce i:nth-child(2) {
  top: 70%; width: 180vw; height: 90vw;
  background: radial-gradient(closest-side, rgba(35, 20, 61, .9), rgba(35, 20, 61, 0));
}
.cs-eroe__hud { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-bottom: 18px; }

.cs-eroe__palco { position: relative; display: flex; flex-direction: column; }
.cs-eroe__figura {
  position: relative; order: 1;
  width: var(--wf); aspect-ratio: 1023 / 1537; margin-inline: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 99%);
  mask-image: linear-gradient(to bottom, #000 76%, transparent 99%);
}
.cs-eroe__ritratto { width: 100%; height: 100%; }
.cs-raggi { position: absolute; inset: 0; pointer-events: none; }
.cs-raggi canvas { display: block; width: 100%; height: 100%; }

.cs-eroe__nome {
  order: 2; position: relative; z-index: 3;
  margin-top: calc(var(--nome-fs) * -1.25);
  font: var(--peso-display) var(--nome-fs)/.86 var(--font-display);
  letter-spacing: -.045em; text-transform: uppercase; text-align: center;
  color: var(--carta); pointer-events: none;
}
.cs-eroe__punto { color: var(--viola-luce); }
.cs-eroe__sparse { order: 3; display: grid; gap: 4px; margin-top: 22px; }
.cs-eroe__sparse--dx { order: 4; margin-top: 14px; }
.cs-eroe__invito { margin-top: 10px; max-width: 46ch; text-transform: none; letter-spacing: .02em; }

.cs-eroe__bio { order: 5; margin-top: 36px; display: grid; gap: 0; font-size: clamp(17px, 4.6vw, 19px); line-height: 1.5; color: var(--carta-2); }
.cs-eroe__bio p + p { margin-top: .7em; }
.cs-eroe__col--dx { margin-top: .7em; }
.cs-eroe__bio strong { color: var(--carta); font-weight: 500; }
.cs-eroe__sagoma { display: none; }
.cs-eroe__obiettivo .etichetta { display: block; margin-bottom: .35em; color: var(--viola-luce); }
.cs-eroe__obiettivo { color: var(--carta); }

/* stato iniziale delle parole della biografia: nascoste solo con JS e movimento attivo (salvagente 3 s) */
html.mm-anima .cs-eroe__bio:not(.is-pronta) [data-cs-parole] { opacity: 0; animation: mm-salvagente 0s 3s forwards; }

@media (min-width: 600px) and (max-width: 1023px) {
  .cs-eroe { --wf: min(60vw, 460px); --nome-fs: clamp(64px, 12.5vw, 120px); }
  .cs-eroe__bio { grid-template-columns: 1fr 1fr; column-gap: calc(var(--gutter) * 2); font-size: 18px; }
  .cs-eroe__col--dx { margin-top: 0; }
  .cs-eroe__sparse--sx, .cs-eroe__sparse--dx { margin-top: 18px; }
}

/* desktop: la biografia avvolge il ritratto; il nome passa davanti alla parte sfumata del busto */
@media (min-width: 1024px) {
  .cs-eroe {
    --wf: min(36vw, 640px, calc((100svh - 96px) / 1.5025));
    --hf: calc(var(--wf) * 1.5025);
    --banda: calc(var(--wf) * .17);   /* fascia stretta: il testo va a capo spesso e scende lungo spalle e busto */
    --fessura: 12px;
    --nome-fs: min(10.4vw, 16svh, 172px);
    /* ritratto più grande dello spazio che occupa (richiesta di Marco): la testa resta dov'era, il busto scende
       oltre il bordo della hero e sfuma. --wf/--hf misurano il palco, --wk/--hk la figura ingrandita */
    --k: 1.32;
    --wk: calc(var(--wf) * var(--k));
    --hk: calc(var(--hf) * var(--k));
    --alza: calc(var(--hf) * .13 * (1 - var(--k)));   /* la testa (13 % dall'alto della foto) non scende */
    min-height: 100svh;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: calc(var(--testata-h) + 8px) 0 0;
  }
  .cs-eroe__luce i:nth-child(1) { top: auto; bottom: calc(var(--hf) * .7); }
  .cs-eroe__hud {
    position: absolute; top: calc(var(--testata-h) + 14px); left: var(--margine); right: var(--margine); margin: 0; z-index: 2;
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start;
  }
  .cs-eroe__hud > :first-child { grid-column: 1 / span 4; }
  .cs-eroe__palco { display: block; height: var(--hf); }
  .cs-eroe__figura {
    position: absolute; left: 50%; top: var(--alza); width: var(--wk); height: var(--hk); margin: 0; transform: translateX(-50%); z-index: 1;
    /* la parte visibile finisce a ~(1 - .13·(k-1)) / k dell'altezza: lì la foto è già sfumata */
    -webkit-mask-image: linear-gradient(to bottom, #000 52%, transparent 76%);
    mask-image: linear-gradient(to bottom, #000 52%, transparent 76%);
  }

  /* il corpo segue la misura della figura (non la larghezza): su ogni schermo il testo ne disegna il contorno allo stesso modo */
  .cs-eroe__bio { position: absolute; inset: 0; margin: 0; display: block; z-index: 2; font-size: clamp(14px, calc(var(--hf) * .0229), 22px); line-height: 1.3; }
  .cs-eroe__col { position: absolute; top: 0; width: calc(var(--wk) / 2 + var(--banda)); margin: 0; }
  .cs-eroe__col--sx { right: calc(50% + var(--fessura)); text-align: right; }
  .cs-eroe__col--dx { left: calc(50% + var(--fessura)); text-align: left; }
  .cs-eroe__col > p:first-of-type { margin-top: calc(var(--hf) * .24); }   /* parte all'altezza della fronte, non sopra la testa */
  .cs-eroe__bio p + p { margin-top: .5em; }
  /* la sagoma: poligono estratto dall'alfa di marco-scontornato-1023.webp (passo 2 %, massimo su ±1,2 %).
     Le due metà del sito della foto: a sinistra il testo si ferma sul contorno sinistro, a destra sul destro. */
  .cs-eroe__sagoma {
    display: block; width: var(--wk); height: var(--hk); margin-top: var(--alza);
    shape-outside: polygon(51.7% 13.2%, 44.4% 13.7%, 40.5% 15.7%, 37.3% 17.7%, 34.8% 19.7%, 33.4% 21.7%, 33.2% 23.7%, 33.8% 25.7%, 34.8% 27.7%, 37.1% 29.7%, 37.9% 31.7%, 38.3% 33.7%, 39.7% 35.7%, 41.3% 37.7%, 43% 39.7%, 44.2% 41.7%, 44% 43.7%, 40.7% 45.7%, 34% 47.7%, 26.6% 49.7%, 25% 51.7%, 23.5% 53.7%, 22.5% 55.7%, 21.5% 57.7%, 20.7% 59.7%, 19.6% 61.7%, 19.4% 63.7%, 18.2% 65.7%, 17% 67.7%, 15.8% 69.7%, 14.7% 71.7%, 14.1% 73.7%, 13.3% 75.7%, 12.3% 77.7%, 12.3% 79.7%, 12.9% 81.7%, 13.3% 83.7%, 14.1% 85.7%, 17.2% 87.7%, 26% 89.7%, 25.4% 91.7%, 24.8% 93.7%, 24% 95.7%, 23.5% 97.7%, 23.1% 99.7%, 82.1% 99.7%, 81.9% 97.7%, 81.1% 95.7%, 80.9% 93.7%, 80.2% 91.7%, 79.2% 89.7%, 78.4% 87.7%, 78.4% 85.7%, 79.6% 83.7%, 81.3% 81.7%, 82.9% 79.7%, 84.3% 77.7%, 85.6% 75.7%, 86.6% 73.7%, 87.4% 71.7%, 87.8% 69.7%, 88.2% 67.7%, 88.6% 65.7%, 89.1% 63.7%, 89.1% 61.7%, 89.3% 59.7%, 89.7% 57.7%, 89.7% 55.7%, 89.7% 53.7%, 89.1% 51.7%, 87.4% 49.7%, 82.1% 47.7%, 76.2% 45.7%, 70.8% 43.7%, 67.6% 41.7%, 64.9% 39.7%, 63.3% 37.7%, 65.3% 35.7%, 66.3% 33.7%, 67.1% 31.7%, 68.8% 29.7%, 69% 27.7%, 69.6% 25.7%, 69.8% 23.7%, 70.4% 21.7%, 69.2% 19.7%, 67.4% 17.7%, 63.9% 15.7%, 59% 13.7%) border-box;
    shape-margin: 8px;
  }
  .cs-eroe__col--sx .cs-eroe__sagoma { float: right; margin-right: calc(var(--wk) / -2 - var(--fessura)); }
  .cs-eroe__col--dx .cs-eroe__sagoma { float: left; margin-left: calc(var(--wk) / -2 - var(--fessura)); }

  .cs-eroe__nome {
    position: absolute; left: 0; right: 0; bottom: calc(var(--hud-h) - 2px);
    margin: 0; white-space: nowrap;
  }
  .cs-eroe__sparse { position: absolute; bottom: calc(var(--hud-h) + var(--nome-fs) * .9 + 26px); margin: 0; z-index: 2; }
  .cs-eroe__sparse--sx { left: var(--margine); }
  .cs-eroe__sparse--dx { right: var(--margine); text-align: right; justify-items: end; }
}
/* finestre desktop strette: non c'è spazio per far scendere il testo lungo il busto senza toccare le etichette
   di destra. Si torna al testo largo che parte sopra la testa; nome un po' più piccolo */
@media (min-width: 1024px) and (max-width: 1279px) {
  .cs-eroe { --banda: calc(var(--wf) * .56); --nome-fs: min(9.4vw, 14svh); }
  .cs-eroe__bio { font-size: 16.5px; line-height: 1.28; }
  .cs-eroe__col > p:first-of-type { margin-top: calc(var(--hf) * .085); }
  .cs-eroe__sparse { bottom: calc(var(--hud-h) + var(--nome-fs) * .9 + 14px); }
}

/* ================================================================ TIMELINE ============== */
.cs-storia { position: relative; }
.cs-storia__testa { position: relative; isolation: isolate; padding-block: var(--ritmo) clamp(48px, 9vh, 120px); }
.cs-storia__griglia { row-gap: 28px; align-items: end; }
.cs-storia__intro { display: grid; gap: 22px; }
.cs-storia__numeri { display: flex; flex-wrap: wrap; gap: 6px 22px; color: var(--carta-3); }
.cs-storia__linkedin { justify-self: start; display: inline-flex; gap: 6px; align-items: center; }

.cs-tappe { --carta-l: min(92vw, 420px); position: relative; }
.cs-tappa {
  position: relative; isolation: isolate;
  display: grid; gap: 22px;
  padding: clamp(64px, 10vh, 120px) var(--margine);
  border-top: 1px solid var(--linea);
}
.cs-tappa__macro { display: none; }
.cs-tappa__carta { position: relative; margin: 0; width: var(--carta-l); aspect-ratio: 4 / 5; overflow: hidden; background: var(--nero-2); box-shadow: 0 0 0 1px var(--linea); order: 2; }
.cs-tappa__foto { position: absolute; inset: 0; }
.cs-tappa__foto img { transform-origin: 50% 40%; }
.cs-tappa__barra { position: absolute; top: 0; bottom: 0; right: 0; width: 2px; background: rgba(239, 233, 225, .1); z-index: 1; }
.cs-tappa__barra i { display: block; height: 100%; background: linear-gradient(var(--viola-luce), var(--neon)); transform: scaleY(var(--p, 0)); transform-origin: 50% 0; }
.cs-tappa__testo { display: contents; }
.cs-tappa__etichette-testa { display: flex; flex-wrap: wrap; gap: 6px 18px; order: 1; }
.cs-tappa__titolo { order: 1; display: grid; gap: .3em; }
.cs-tappa__anno {
  font: var(--peso-display) clamp(76px, 26vw, 120px)/.8 var(--font-display);
  letter-spacing: -.05em; text-transform: uppercase; color: var(--carta);
}
.cs-tappa__frase { font-size: clamp(26px, 7vw, 34px); line-height: 1.04; letter-spacing: -.02em; font-weight: 500; max-width: 18ch; }
.cs-tappa__racconto, .cs-tappa__dettaglio, .cs-tappa__etichette, .cs-tappa__collab, .cs-tappa__lavori, .cs-tappa__registro { order: 3; }
.cs-tappa__racconto { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.5; color: var(--carta); max-width: 46ch; }
.cs-tappa__dettaglio { font-size: 16px; line-height: 1.55; color: var(--carta-2); max-width: 50ch; }
.cs-tappa__etichette { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-tappa__etichette li { padding: 6px 11px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linea-forte); color: var(--carta-2); }
.cs-tappa__collab { display: grid; gap: 14px; }
.cs-collab { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid var(--linea); }
.cs-collab__nome { font-size: 19px; font-weight: 500; letter-spacing: -.01em; }
.cs-collab dd { margin: 0; }
.cs-collab__progetti { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: 6px !important; font-size: 16px; color: var(--carta-2); }
.cs-collab__sep { color: var(--carta-3); }
.cs-tappa__lavori { display: grid; gap: 12px; }
.cs-lavori { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 16px 12px; }
.cs-lavoro { display: grid; gap: 5px; align-content: start; }
.cs-lavoro__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--nero-2); box-shadow: 0 0 0 1px var(--linea); margin-bottom: 4px; }
.cs-lavoro__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: transform .9s var(--curva-expo), filter .6s; filter: saturate(.85) brightness(.88); }
.cs-lavoro:hover .cs-lavoro__img img { transform: scale(1.06); filter: none; }
.cs-lavoro__nome { font-size: 16px; line-height: 1.2; font-weight: 500; }
.cs-lavoro__link { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.cs-lavoro__link a { display: inline-flex; gap: 5px; align-items: center; color: var(--viola-luce); }
.cs-lavoro__link a::after { content: ""; width: .42em; height: .42em; margin-left: .1em; border-top: 1.4px solid currentColor; border-right: 1.4px solid currentColor; transform: rotate(45deg); transition: transform .5s var(--curva-expo); }
.cs-lavoro__link a:hover::after { transform: translateX(2px) rotate(45deg); }
.cs-lavoro__link a:hover { color: var(--carta); }
.cs-tappa__registro { display: grid; gap: 10px; font-size: 16px; color: var(--carta-2); }
.cs-tappa__registro li { display: grid; gap: 3px; padding-top: 10px; border-top: 1px solid var(--linea); }
.cs-cantiere { display: inline-flex; align-items: center; gap: 8px; justify-self: start; margin-top: 6px; padding: 9px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linea-forte); color: var(--carta); transition: box-shadow .3s; }
.cs-cantiere:hover { box-shadow: inset 0 0 0 1px var(--carta); }
.cs-cantiere__spia { width: 7px; height: 7px; box-shadow: inset 0 0 0 1px var(--carta-2); }
html.cantiere .cs-cantiere__spia { background: var(--neon); box-shadow: 0 0 10px var(--neon); }
.cs-righello { display: none; }

@media (min-width: 600px) and (max-width: 1023px) {
  .cs-tappa { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: calc(var(--gutter) * 2); align-items: start; }
  .cs-tappa__carta { grid-column: 1; grid-row: 1 / span 6; width: 100%; position: sticky; top: calc(var(--testata-h) + 20px); }
  .cs-tappa__testo { display: grid; gap: 22px; grid-column: 2; align-content: start; }
}

/* desktop: il motore di inherited. Ogni tappa ha clip-path, la sua carta è fissa al centro dello
   schermo: il ritaglio della tappa fa sì che il confine con la successiva attraversi la carta. */
@media (min-width: 1024px) {
  .cs-tappe { --carta-l: min(27vw, 440px, calc(60svh * .8)); clip-path: inset(0); }
  .cs-tappa {
    clip-path: inset(0);
    min-height: 100svh;
    grid-template-columns: minmax(0, 1fr) var(--carta-l) minmax(0, 1fr);
    column-gap: calc(var(--gutter) * 2.4);
    gap: 0 calc(var(--gutter) * 2.4);
    align-items: center;
    padding: calc(var(--testata-h) + 64px) var(--margine) calc(var(--hud-h) + 96px);
  }
  .cs-tappa__macro { display: block; position: absolute; top: 0; bottom: 0; width: 50%; z-index: -1; overflow: hidden; }
  .cs-tappa--dx .cs-tappa__macro { left: 0; }
  .cs-tappa--sx .cs-tappa__macro { right: 0; }
  .cs-tappa__macro-foto { width: 100%; height: 100%; filter: brightness(.6) saturate(1.05) contrast(1.05); }
  .cs-tappa--dx .cs-tappa__macro-foto { -webkit-mask-image: linear-gradient(to right, #000 40%, transparent 96%); mask-image: linear-gradient(to right, #000 40%, transparent 96%); }
  .cs-tappa--sx .cs-tappa__macro-foto { -webkit-mask-image: linear-gradient(to left, #000 40%, transparent 96%); mask-image: linear-gradient(to left, #000 40%, transparent 96%); }

  .cs-tappa__carta {
    position: fixed; left: 50%; top: 50%; z-index: 1;
    width: var(--carta-l); transform: translate(-50%, -48%);
    box-shadow: 0 0 0 1px var(--linea), 0 40px 120px -40px rgba(105, 49, 170, .55);
  }
  /* le carte sono fisse (quindi «in vista» per il lazy loading): l'immagine parte solo quando la tappa è vicina */
  html.js .cs-tappa:not(.is-vicina) .cs-tappa__carta img { display: none; }

  .cs-tappa__testo { display: grid; gap: 22px; align-content: center; position: relative; z-index: 2; grid-row: 1; }
  .cs-tappa--dx .cs-tappa__testo { grid-column: 3; }
  .cs-tappa--sx .cs-tappa__testo { grid-column: 1; }
  .cs-tappa__anno { font-size: min(10.6vw, 21svh, 190px); }
  .cs-tappa__frase { font-size: clamp(28px, 2.5vw, 42px); }

  .cs-righello {
    display: flex; align-items: center; gap: 18px;
    opacity: 0; transition: opacity .6s var(--curva-expo), transform .8s var(--curva-expo);
    position: fixed; left: 50%; bottom: calc(var(--hud-h) + 16px); z-index: 3;
    transform: translateX(-50%);
    padding: 9px 16px 11px; border-radius: 999px;
    background: rgba(6, 5, 12, .62); box-shadow: inset 0 0 0 1px var(--linea);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  .cs-righello.is-visibile { opacity: 1; }
  .cs-righello__conta { color: var(--carta-3); white-space: nowrap; }
  .cs-righello__conta b { color: var(--carta); font-weight: 500; font-variant-numeric: tabular-nums; }
  .cs-righello__anni { display: flex; gap: 14px; }
  .cs-righello__anni a { color: var(--carta-3); transition: color .4s; }
  .cs-righello__anni a:hover, .cs-righello__anni .is-attivo a { color: var(--carta); }
  .cs-righello__anni .is-attivo a { text-shadow: 0 0 12px rgba(169, 139, 255, .8); }
  .cs-righello__linea { position: absolute; left: 16px; right: 16px; bottom: 5px; height: 1px; background: var(--linea); }
  .cs-righello__linea i { display: block; height: 100%; background: var(--viola-luce); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
}

/* ================================================================ METODO ================ */
/* il reset ol[class] { padding: 0 } batte .contenitore: si rimette il margine */
ol.cs-metodo__passi, ol.cs-voci__lista { padding-inline: var(--margine); }
/* i bagliori non devono finire con un taglio netto sul confine della sezione */
.cs-metodo > .bagliori, .cs-voci > .bagliori, .cs-storia__testa > .bagliori {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 78%, transparent);
}
.cs-metodo__testa { row-gap: 22px; }
.cs-metodo__passi { position: relative; display: grid; gap: clamp(72px, 12vh, 150px); margin-top: clamp(56px, 10vh, 120px); }
.cs-metodo__linea { display: none; }
.cs-passo { display: grid; gap: 24px; }
.cs-passo__foto { position: relative; aspect-ratio: 4 / 5; max-width: 520px; }
.cs-passo__cornice {
  position: absolute; inset: 0; overflow: hidden; background: var(--nero-2);
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent); mask-image: linear-gradient(to bottom, #000 72%, transparent);
}
.cs-passo__cornice .foto { position: absolute; inset: -12% 0; height: 124%; }
.cs-passo__fotonum { position: absolute; left: 14px; bottom: 14px; z-index: 1; }
.cs-passo__testo { display: grid; gap: 16px; align-content: center; }
.cs-passo__num {
  font: var(--peso-display) clamp(64px, 9vw, 140px)/.85 var(--font-display); letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 1px rgba(169, 139, 255, .7);
}
.cs-passo__frase { color: var(--carta-2); max-width: 30ch; }
.cs-metodo__fonte { margin-top: clamp(48px, 8vh, 96px); }

@media (min-width: 820px) {
  .cs-passo { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
  .cs-passo--sx .cs-passo__foto { grid-column: 2 / span 4; }
  .cs-passo--sx .cs-passo__testo { grid-column: 8 / span 5; }
  .cs-passo--dx .cs-passo__foto { grid-column: 8 / span 4; grid-row: 1; }
  .cs-passo--dx .cs-passo__testo { grid-column: 2 / span 5; grid-row: 1; }
  .cs-metodo__linea { display: block; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--linea); }
  .cs-metodo__linea i { position: absolute; inset: 0; background: linear-gradient(var(--viola), var(--viola-luce)); transform: scaleY(var(--p, 0)); transform-origin: 50% 0; }
  .cs-metodo__linea b {
    position: absolute; left: 50%; top: calc(var(--p, 0) * 100%); width: 9px; height: 9px; margin: -4px 0 0 -4.5px;
    border-radius: 50%; background: var(--neon); box-shadow: 0 0 0 4px rgba(206, 105, 227, .18), 0 0 22px 4px rgba(206, 105, 227, .55);
  }
}

/* ================================================================ STRUMENTI ============= */
.cs-strumenti__testa { row-gap: 22px; align-items: end; }
.cs-strumenti__righe { margin-top: clamp(48px, 8vh, 96px); border-bottom: 1px solid var(--linea); }
.cs-riga { display: grid; gap: 12px; padding-block: 18px; border-top: 1px solid var(--linea); }
.cs-riga__area { padding-inline: var(--margine); color: var(--carta); }
.cs-riga__scorre { --scorre-gap: clamp(22px, 2.6vw, 48px); }
.cs-voce {
  display: flex; align-items: center; gap: var(--scorre-gap);
  font: 500 clamp(26px, 3.4vw, 54px)/1.1 var(--font-mono);
  letter-spacing: -.045em; text-transform: uppercase; color: var(--carta); white-space: nowrap;
}
.cs-voce::after { content: ""; width: .26em; height: .26em; background: var(--viola); flex: none; }
.cs-riga:nth-child(even) .cs-voce { color: var(--carta-2); }
.cs-prove { margin-top: clamp(56px, 9vh, 110px); row-gap: 20px; }
.cs-prove__titolo { color: var(--carta); }
.cs-prove__lista { display: grid; }
.cs-prova { display: grid; gap: 6px; padding-block: 14px; border-top: 1px solid var(--linea); }
.cs-prova:last-child { border-bottom: 1px solid var(--linea); }
.cs-prova__voce { font-size: clamp(17px, 1.3vw, 20px); font-weight: 500; letter-spacing: -.01em; }
.cs-prova__dove { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; color: var(--carta-2); font-size: 16px; }
.cs-prova__dove .cs-cantiere { margin: 0; }
@media (min-width: 820px) {
  .cs-riga { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); align-items: center; gap: var(--gutter); }
  .cs-prova { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: var(--gutter); }
}

/* ================================================================ VOCI ================== */
.cs-voci__testa { row-gap: 22px; }
.cs-voci__lista { margin-top: clamp(48px, 8vh, 96px); }
.cs-testimonianza { padding-block: clamp(36px, 6vh, 64px); border-top: 1px solid var(--linea); }
.cs-testimonianza:last-child { border-bottom: 1px solid var(--linea); }
.cs-testimonianza figure { margin: 0; row-gap: 24px; }
.cs-testimonianza__chi { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.cs-testimonianza__autore { font-size: clamp(22px, 2vw, 28px); font-weight: 500; letter-spacing: -.02em; line-height: 1.1; margin-top: 10px; }
.cs-testimonianza__link { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: 16px; }
.cs-testimonianza__link .link { display: inline-flex; gap: 6px; align-items: center; color: var(--carta-2); }
.cs-testimonianza__testo { margin: 0; }
.cs-testimonianza__testo p { font-size: clamp(21px, 2.15vw, 32px); line-height: 1.28; letter-spacing: -.015em; color: var(--carta); max-width: 40ch; }

/* ================================================================ INVITO ================ */
.cs-grazie__griglia { row-gap: 40px; align-items: center; }
.cs-grazie__foto { aspect-ratio: 4 / 5; max-width: 520px; width: 100%; position: relative; overflow: hidden; }
.cs-grazie__foto .foto { position: absolute; inset: 0; }
.cs-grazie__testo { display: grid; gap: 26px; }
.cs-grazie__frase { margin: 0; }
.cs-grazie__frase p { font-size: clamp(26px, 3vw, 46px); line-height: 1.12; letter-spacing: -.025em; font-weight: 500; }
.cs-grazie__frase strong { color: var(--viola-luce); font-weight: 500; }
.cs-grazie__nota { max-width: 44ch; font-size: clamp(17px, 1.3vw, 20px); }

/* ================================================================ MOVIMENTO RIDOTTO ===== */
html.ridotto .cs-eroe__luce i { animation: none; }