body {
    background: var(--bg-green);
    color: var(--cream);
    font-family: var(--font-display);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  /* section is 1440x1024 reference, scaled responsively */
  /* PINNED: the wrapper reserves scroll distance; the section sticks while
     the curved text travels the full path, then the page scrolls on. */
  .vision-scroll {
    position: relative;
    height: 550vh;            /* longer runway = slower text travel while pinned */
    /* La vision si pinna SOLO quando deve entrare (campo libero), così parte
       "fresca" (curva da p=0) e non si sovrappone alla hero. Il pin cade a
       heroScroll(350vh) + margin(−100vh) = 250vh = vStart di hero.js
       (GROW+HOLD+HFADE+GAP). Se cambi quelle durate, aggiorna questo. */
    margin-top: -100vh;
  }
  .vision {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }

  /* ---------- Header (VISION variant) ---------- */
  .header { position:absolute; top:var(--edge-top); left:0; right:0; height:35px; z-index:30; display:flex; align-items:center; }
  .brand-logo { position:absolute; left:40px; top:5px; width:48px; height:23px; }
  .brand-logo svg { width:100%; height:100%; display:block; }
  .wordmark {
    position:absolute; left:98px; top:0;
    font-weight:500; font-size:var(--fs-nav); letter-spacing:var(--tracking);
    line-height:35px; white-space:nowrap; color:var(--cream);
    -webkit-text-stroke:3px var(--red); paint-order:stroke fill;
  }
  .wordmark .red { color:var(--red); }
  .rule-h { position:absolute; top:16px; height:var(--rule-w); background:var(--cream); }
  .section-label {
    position:absolute; right:var(--edge-x); top:0;
    font-weight:500; font-size:var(--fs-nav); letter-spacing:var(--tracking);
    line-height:35px; color:var(--cream);
    -webkit-text-stroke:3px var(--red); paint-order:stroke fill;
  }
  .rule-v { position:absolute; right:30px; top:110px; height:689px; width:var(--rule-w); background:var(--cream); z-index:20; }

  /* ---------- "THIS IS WHO YOU ARE DEALING WITH" ---------- */
  .dealing {
    position:absolute;
    /* Lato sinistro allineato al BORDO DESTRO del paragrafo .para:
       .para = left 50%-256.5px + width 460px → bordo destro a 50%+203.5px.
       (se cambi la larghezza di .para, aggiorna anche questo valore) */
    left: calc(50% + 203.5px);
    /* Estremo inferiore sulla linea che divide la pagina a metà (50vh):
       il box poggia sulla mediana e si sviluppa verso l'alto. */
    bottom: 50%;
    text-align:left; white-space:nowrap;
    font-weight:700; font-size:26px; letter-spacing:var(--tracking);
    line-height:1.15; color:var(--cream);
    opacity:0;
    transition:opacity .7s ease;
  }
  .dealing.in { opacity:1; }
  .dealing .r { color:var(--red); }

  /* ---------- Presentation paragraph ---------- */
  /* centred, justified, bottom edge 40px from page bottom, NO stroke */
  .para {
    position:absolute;
    /* Lato sinistro fisso dov'era (box da 513 centrato → translate -256.5px):
       la casella si accorcia SOLO da destra e cresce verso l'alto. Larghezza
       tarata in Futura per mandare "SHOULD" a capo dopo "IT" in prima riga
       (misura headless: fino a IT=424px, IT+SHOULD=471px → 460px sta in mezzo). */
    left:50%; transform:translateX(-256.5px);
    bottom:40px;
    width:460px; max-width:calc(100% - 80px);
    font-weight:500; font-size:13px; line-height:17px;
    letter-spacing:var(--tracking);
    text-align:justify;
    color:var(--cream);
  }
  .para .r { color:var(--red); }

  /* ---------- Curved scrolling text ---------- */
  /* The textPath rides the L-shaped guide; startOffset animates on scroll. */
  .curve-wrap {
    position:absolute; inset:0; pointer-events:none; z-index:5;
    /* Il testo entra da sinistra a pieno e svanisce solo in USCITA (destra),
       arrivando a contatto con la linea verticale (~33px dal bordo destro).
       La sfumatura parte ~70px prima così il fade è graduale, non un taglio. */
    --curve-exit: 33px;
    -webkit-mask-image: linear-gradient(to right,
      #000 calc(100% - var(--curve-exit) - 70px),
      transparent calc(100% - var(--curve-exit)));
    mask-image: linear-gradient(to right,
      #000 calc(100% - var(--curve-exit) - 70px),
      transparent calc(100% - var(--curve-exit)));
  }
  .curve-wrap svg { width:100%; height:100%; display:block; overflow:visible; }
  .curve-text {
    font-weight:700; font-size:26pt; letter-spacing:var(--tracking);
    fill:var(--cream);
    dominant-baseline:auto;   /* glyph baseline sits ON the path → text rests on top of it */
  }
  .curve-text .r { fill:var(--red); }

  @media (max-width:768px){
    :root{ --fs-nav:18px; }
    .brand-logo{ left:20px; } .wordmark{ left:74px; } .section-label{ right:20px; } .rule-v{ right:20px; }
    .curve-wrap{ --curve-exit:23px; }
    .para{ font-size:12px; line-height:16px;
           left:50%; transform:translateX(-50%); width:513px; }   /* mobile: ricentra */
    .dealing{ font-size:18px; left:auto; right:20px; bottom:50%; white-space:nowrap; }  /* mobile: ancorata a destra */
  }