/* ============================================================
   JPAG — Sito ufficiale · Stile «Studio» (chiaro, minimal)
   Palette: #FBFBFB bianco · #F56F10 arancio · #151419 blu notte
   Font: Cabinet Grotesk (500/700) + Aktiv Grotesk (Adobe Fonts, 300–500)
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:smooth}}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul,ol{list-style:none}

:root{
  /* costanti di brand */
  --bianco:#FBFBFB; --arancio:#F56F10; --arancio-dk:#D45C08; --notte:#151419; --notte-2:#1C1B22;
  /* tema (light di default) */
  --bg:#FBFBFB;
  --ink:#151419;
  --ink-60:rgba(21,20,25,.6); --ink-40:rgba(21,20,25,.4);
  --ink-12:rgba(21,20,25,.12); --ink-06:rgba(21,20,25,.06);
  --panel:#151419;            /* pannelli scuri (nav, card, contact) */
  --wht-70:rgba(251,251,251,.7); --wht-40:rgba(251,251,251,.4); --wht-12:rgba(251,251,251,.12);
  --font-head:'Cabinet Grotesk',system-ui,sans-serif;
  --font-body:'aktiv-grotesk',system-ui,sans-serif;   /* Adobe Fonts kit dca2oyg */
  --maxw:1280px; --gutter:clamp(20px,5vw,72px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --r:18px;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#151419;
  --ink:#FBFBFB;
  --ink-60:rgba(251,251,251,.62); --ink-40:rgba(251,251,251,.42);
  --ink-12:rgba(251,251,251,.14); --ink-06:rgba(251,251,251,.07);
  --panel:#1C1B22;
  color-scheme:dark;
}

html,body{background:var(--bg);color:var(--ink);font-family:var(--font-body);
  font-size:16px;line-height:1.65;font-weight:400;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;overflow-x:clip; /* clip non rompe position:sticky (hidden sì) */
  transition:background .35s var(--ease),color .35s var(--ease)}
/* puntinato sottile su tutte le sezioni a fondo chiaro (le sezioni con bg pieno lo coprono) */
body{background-image:radial-gradient(var(--ink-06) 1px,transparent 1.4px);background-size:30px 30px}
p{text-wrap:pretty} /* niente parole orfane a fine paragrafo */
.sec-title,.contact__title{text-wrap:balance}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(88px,13vh,170px);position:relative}
h1,h2,h3{font-family:var(--font-head);font-weight:500;line-height:1.02;letter-spacing:-.02em}
.accent{color:var(--arancio)}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-weight:500;font-size:.8rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-60)}
.spark{width:13px;height:13px;fill:var(--arancio);flex:0 0 auto}
.lead{font-size:clamp(1.02rem,1.4vw,1.22rem);font-weight:300;max-width:52ch;color:var(--ink-60)}
.sec-head{margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.sec-title{font-size:clamp(2rem,4.6vw,3.8rem);margin-top:1rem}

/* ---------- bottoni ---------- */
.btn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-head);font-weight:500;
  font-size:1rem;padding:15px 30px;border-radius:999px;
  transition:transform .3s var(--ease),background .3s,color .3s,border-color .3s,box-shadow .3s}
.btn__arrow{transition:transform .3s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(4px)}
.btn--dark{background:var(--notte);color:var(--bianco)}
.btn--dark:hover{background:var(--arancio);color:var(--notte);transform:translateY(-2px)}
.btn--ghost{border:1px solid var(--ink-12);color:var(--ink)}
.btn--ghost:hover{border-color:var(--arancio);color:var(--arancio)}
.btn--orange{background:var(--arancio);color:var(--bianco);
  box-shadow:0 8px 32px rgba(245,111,16,.35)}
.btn--orange:hover{background:var(--arancio-dk);transform:translateY(-2px);
  box-shadow:0 12px 44px rgba(245,111,16,.45)}
.btn--lg{padding:18px 36px;font-size:1.08rem}

/* ---------- nav ---------- */
.nav{position:fixed;z-index:80;top:clamp(14px,2.4vw,24px);left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-inline:var(--gutter);pointer-events:none}
.nav>*{pointer-events:auto}
.nav__logo{padding:6px}
.logo{height:22px;width:auto}
.logo path{fill:var(--ink);transition:fill .35s var(--ease)}
.logo .logo__j{fill:var(--arancio)}
/* sul pannello scuro dei contatti (classe via JS) PAG diventa bianco, la J resta arancione */
.nav--over-dark .logo path{fill:var(--bianco)}
.nav--over-dark .logo .logo__j{fill:var(--arancio)}
.nav__pill{position:absolute;left:50%;transform:translateX(-50%);
  display:flex;gap:4px;padding:6px;border-radius:999px;background:var(--notte);
  box-shadow:0 10px 34px rgba(21,20,25,.22)}
.nav__link{font-family:var(--font-head);font-weight:500;font-size:.95rem;color:var(--wht-70);
  padding:10px 20px;border-radius:999px;transition:background .3s var(--ease),color .3s}
.nav__link:hover{color:var(--bianco)}
.nav__link.is-active{background:var(--arancio);color:var(--notte)}
.nav__right{display:flex;align-items:center;gap:10px}
.nav__theme{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:var(--panel);color:var(--bianco);border:1px solid transparent;
  transition:background .3s,color .3s,transform .3s var(--ease)}
.nav__theme:hover{background:var(--arancio);color:var(--notte);transform:rotate(20deg)}
.nav__theme svg{width:18px;height:18px}
.nav__theme-moon{display:block}
.nav__theme-sun{display:none}
:root[data-theme="dark"] .nav__theme-moon{display:none}
:root[data-theme="dark"] .nav__theme-sun{display:block}
/* nota "hey, vuoi la night mode?" sotto il toggle (ref. Barbara) */
.nav__theme-wrap{position:relative;display:inline-flex}
.nav__hint{position:absolute;top:calc(100% + 8px);right:4px;display:flex;align-items:flex-start;
  gap:7px;width:max-content;color:var(--ink-60);pointer-events:none}
.nav__hint-txt{font-size:.94rem;font-weight:300;transform:rotate(-2deg);
  margin-top:.65rem}
.nav__hint-arrow{width:19px;height:24px;flex:0 0 auto;transform:scaleX(-1) rotate(-6deg)}
.nav__hint-txt--tolight{display:none}
:root[data-theme="dark"] .nav__hint-txt--tonight{display:none}
:root[data-theme="dark"] .nav__hint-txt--tolight{display:inline}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;overflow:hidden}
.hero__trail{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.trail-img{position:absolute;width:240px;height:175px;object-fit:cover;border-radius:12px;
  transform:translate(-50%,-50%) scale(.7) rotate(var(--rot,0deg));opacity:0;filter:blur(14px);
  box-shadow:0 24px 60px rgba(21,20,25,.25);
  transition:opacity .45s var(--ease),transform .45s var(--ease),filter .45s var(--ease)}
.trail-img.is-in{opacity:1;filter:blur(0);transform:translate(-50%,-50%) scale(1) rotate(var(--rot,0deg))}
.trail-img.is-out{opacity:0;filter:blur(10px);
  transform:translate(-50%,-58%) scale(.92) rotate(var(--rot,0deg));
  transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease)}
/* width:100% qui e sul titolo: da flex item con margin auto il wrap si restringeva al
   contenuto e si RI-CENTRAVA a ogni carattere del typewriter = CLS 0.18 a ciclo (misurato).
   A larghezza piena i box restano fermi e a muoversi sono solo i nodi testo (non contano). */
.hero__inner{position:relative;z-index:2;flex:1;width:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding-top:calc(64px + 4vh);gap:1.6rem}
/* altezza FISSA (non min-): il typewriter cambia righe a ogni ciclo e con min-height
   tutto il blocco centrato "respirava" = CLS ~0.18 ricorrente (misurato). Overflow visibile. */
.hero__title{font-size:clamp(2.7rem,7.7vw,6.5rem);font-weight:700;height:2.05em;width:100%}
/* avatar-sticker al posto del cursore del terminale (wiggle leggero) */
.hero__sticker{display:inline-block;width:.74em;height:.74em;margin-left:.16em;
  vertical-align:-.1em;animation:sticker-wiggle 2.8s ease-in-out infinite;
  filter:drop-shadow(0 8px 20px rgba(21,20,25,.16))}
.hero__sticker img{width:100%;height:100%;object-fit:contain}
@keyframes sticker-wiggle{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg) translateY(-2px)}}
/* il sub è l'elemento LCP: primo frame già dipinto (opacity .011), poi fade dolce */
.hero__sub{font-size:clamp(1.05rem,1.5vw,1.28rem);font-weight:300;color:var(--ink-60);
  animation:sub-in .5s var(--ease) .12s both}
@keyframes sub-in{from{opacity:.011}to{opacity:1}}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:.4rem}

/* ---------- banner separatore (cosa faccio) ---------- */
/* fascia a tutta larghezza, base invertita rispetto al tema
   (light: base notte · dark: base bianca) con gradiente animato;
   i "tagli" arrotondati sopra/sotto sono le sezioni che curvano sulla fascia */
.banner{background-color:var(--ink);
  background-image:linear-gradient(115deg,
    rgba(245,111,16,0) 0%,rgba(245,111,16,.26) 25%,rgba(255,178,92,.16) 38%,rgba(245,111,16,0) 50%,
    rgba(245,111,16,.26) 75%,rgba(255,178,92,.16) 88%,rgba(245,111,16,0) 100%);
  background-size:200% 100%;animation:banner-grad 12s linear infinite;
  overflow:hidden;transition:background-color .35s var(--ease)}
@keyframes banner-grad{to{background-position:200% 0}}
.banner::before,.banner::after{content:"";display:block;height:clamp(26px,3.6vw,46px);
  background:var(--bg);transition:background .35s var(--ease)}
.banner::before{border-radius:0 0 clamp(22px,3vw,40px) clamp(22px,3vw,40px)}
.banner::after{border-radius:clamp(22px,3vw,40px) clamp(22px,3vw,40px) 0 0}
.banner__row{overflow:hidden;white-space:nowrap;padding-block:clamp(30px,4.2vw,54px)}
.banner__track{display:inline-flex;align-items:center;gap:clamp(1.6rem,3vw,3rem);
  animation:mq 42s linear infinite;will-change:transform;padding-right:clamp(1.6rem,3vw,3rem)}
.banner__track span{font-family:var(--font-head);font-weight:700;text-transform:uppercase;
  letter-spacing:-.01em;font-size:clamp(2.4rem,6.2vw,5rem);line-height:1;color:var(--bg);
  transition:color .35s var(--ease)}
.banner__sp{width:clamp(22px,2.8vw,38px);height:clamp(22px,2.8vw,38px);fill:url(#grad-spark);flex:0 0 auto}
@keyframes mq{to{transform:translateX(-50%)}}
/* quando GSAP guida il marquee (velocità legata allo scroll) l'animazione CSS si spegne */
.banner--gsap .banner__track{animation:none}
@media(prefers-reduced-motion:reduce){.banner__track{animation:none}.banner{animation:none}}

/* ---------- stats ---------- */
.stats{padding-block:clamp(48px,7vh,80px) clamp(16px,2.5vh,28px)}
.stats__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,44px);justify-items:center}
/* blocchi centrati, lineette identiche, valori allineati a sinistra */
.stat{width:100%;max-width:300px;border-top:1px solid var(--ink-12);padding-top:1.2rem;
  display:flex;flex-direction:column;gap:.3rem}
.stat__n{font-family:var(--font-head);font-weight:700;font-size:clamp(2.2rem,4.6vw,3.4rem);line-height:1}
.stat__l{font-size:.92rem;font-weight:300;color:var(--ink-60)}

/* ---------- il percorso (timeline guidata dallo scroll) ---------- */
.journey__scroll{height:100svh}
/* la sezione occupa esattamente uno schermo: mai vuoto sotto, Works è subito visibile.
   La corsa delle tappe = 100svh meno l'altezza dello stage (compatto, senza min-height) */
.journey__stage{position:sticky;top:0;display:flex;align-items:flex-start;
  padding-block:clamp(2.2rem,6vh,3.8rem) clamp(1.2rem,3vh,2.2rem)}
.journey__inner{width:100%;display:flex;flex-direction:column;align-items:center;
  gap:clamp(1.6rem,3.2vw,2.8rem)}
.journey__track{position:relative;width:100%;height:56px}
.journey__line{position:absolute;left:0;right:0;top:50%;height:2px;background:var(--ink-12)}
.journey__line-fill{height:100%;width:100%;transform:scaleX(0);transform-origin:left;
  background:var(--arancio);border-radius:2px;
  box-shadow:0 0 10px rgba(245,111,16,.75),0 0 26px rgba(245,111,16,.4)} /* glow all'avanzamento (scaleX via GSAP: niente layout) */
.journey__dot{position:absolute;top:50%;left:var(--x);width:10px;height:10px;margin:-5px;
  border-radius:50%;background:var(--ink-12);transition:background .3s,transform .3s}
.journey__dot.is-past{background:var(--arancio);transform:scale(1.25)}
.journey__walker{position:absolute;top:50%;left:0;width:66px;height:66px;margin:-33px 0 0 -33px;
  z-index:2;filter:drop-shadow(0 10px 22px rgba(21,20,25,.25))}
/* il wiggle sta sull'img: sul contenitore un'animazione CSS su transform
   sovrascriverebbe la x scritta da GSAP (stessa trappola della bolla /social) */
.journey__walker img{width:100%;height:100%;object-fit:contain;
  animation:sticker-wiggle 2.8s ease-in-out infinite}
.journey__caps{display:grid;place-items:center;text-align:center;width:100%;min-height:8.5em}
.jcap{grid-area:1/1;opacity:0;transform:translateY(24px);filter:blur(6px);
  pointer-events:none; /* le caption sovrapposte non attive non devono catturare l'hover (bug 13:05) */
  transition:opacity .5s var(--ease),transform .5s var(--ease),filter .5s var(--ease)}
.jcap.is-active{opacity:1;transform:none;filter:none;pointer-events:auto}
.jcap__year{display:block;font-family:var(--font-head);font-weight:700;
  font-size:clamp(2.8rem,6.4vw,5rem);line-height:1;margin-bottom:.7rem}
.jcap p{font-weight:300;color:var(--ink-60);font-size:clamp(1rem,1.5vw,1.25rem);
  max-width:44ch;margin-inline:auto}
/* orario 13:05: i due punti lampeggiano, l'orario ha un wiggle leggero */
.jcap__time{display:inline-block;font-weight:400;color:var(--ink);
  animation:time-wiggle 3.2s ease-in-out infinite;
  transition:color .3s,text-shadow .3s}
.jcap__colon{display:inline-block;animation:caret 1.1s steps(1) infinite}
@keyframes time-wiggle{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg) translateY(-1px)}}
/* nota Human Design: esce passando col cursore sull'orario · solo desktop, su touch non esiste */
.jcap__hd{display:block;margin-top:.7rem;font-size:.95rem;font-weight:300;color:var(--ink-40);
  opacity:0;transform:translateY(10px);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
@media(hover:hover) and (pointer:fine){
  .jcap__time:hover{color:var(--arancio);
    text-shadow:0 0 14px rgba(245,111,16,.55),0 0 34px rgba(245,111,16,.3)}
  .jcap:has(.jcap__time:hover) .jcap__hd{opacity:1;transform:none}
}
@media(pointer:coarse){
  .jcap__hd{display:none}
}

/* ---------- works ---------- */
.works{overflow:hidden}
.works__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.wbg{position:absolute;display:block}
.wbg svg{width:100%;height:100%;fill:var(--arancio);opacity:.09}
/* solo 2 icone, ai margini liberi del layout (le altre finivano dietro le card: rumore) */
.wbg--1{width:170px;height:170px;top:4%;right:5%}
.wbg--4{width:140px;height:140px;top:80%;left:6%}
.anim-spin{animation:spin 40s linear infinite}
.anim-spin-slow{animation:spin 60s linear infinite}
.anim-float{animation:floaty 7s ease-in-out infinite alternate}
.anim-float-slow{animation:floaty 10s ease-in-out infinite alternate}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes floaty{from{transform:translateY(-12px)}to{transform:translateY(12px)}}
/* la rotazione delle icone works è guidata dallo scroll (main.js) */
.wbg svg{transform-origin:center;will-change:transform}

.works .wrap{position:relative;z-index:1}
.works__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,60px);align-items:start}
.works__col{display:flex;flex-direction:column;gap:clamp(40px,5vw,72px)}
.works__col--right{margin-top:clamp(60px,8vw,120px)}
/* collassato: mostra solo le prime 2 card per colonna (4 totali) */
.works__cols:not(.is-open) .work--extra{display:none}
.works__morebox{display:flex;justify-content:center;margin-top:clamp(2.5rem,5vw,4rem)}
.works__cols.is-open ~ .works__morebox .works__more,
.works__morebox .works__more.is-hidden{display:none}
/* CTA a fine works: box largo e basso; appena entra nello schermo i lati si illuminano
   (bordo+glow arancio e beam che percorre il contorno, stesso linguaggio della loc-card) */
.works__cta{position:relative;display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:1.1rem 2rem;max-width:880px;
  margin:clamp(2.4rem,4.5vw,3.6rem) auto 0;
  border:1px solid var(--ink-12);border-radius:24px;background:var(--bg);
  padding:clamp(1.2rem,2.4vw,1.7rem) clamp(1.4rem,3vw,2.4rem)}
.works__cta[data-animate]{transition:opacity .7s var(--ease),transform .7s var(--ease),
  filter .7s var(--ease),border-color .6s var(--ease),box-shadow .6s var(--ease)}
.works__cta.in-view{border-color:rgba(245,111,16,.55);
  box-shadow:0 0 0 1px rgba(245,111,16,.22),0 0 28px rgba(245,111,16,.26),0 14px 44px rgba(21,20,25,.1)}
.works__cta::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;
  background:conic-gradient(from var(--beam),transparent 0deg 286deg,
    rgba(245,111,16,.55) 330deg,var(--arancio) 352deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;opacity:0;transition:opacity .6s var(--ease)}
.works__cta.in-view::before{opacity:1;animation:loc-beam 4.5s linear infinite}
.works__cta-txt{font-weight:300;color:var(--ink-60)}

.work__media{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;
  background:var(--ink-06);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.work:hover .work__media{transform:translateY(-6px);
  box-shadow:0 30px 70px rgba(21,20,25,.18),0 0 0 1px rgba(245,111,16,.5),
  0 0 26px rgba(245,111,16,.32),0 6px 42px rgba(21,20,25,.22)} /* glow misto arancio+scuro sul contorno */
.work__carousel{position:absolute;inset:0;overflow:hidden;cursor:grab;touch-action:pan-y}
.work__carousel.is-drag{cursor:grabbing}
.work__track{display:flex;height:100%;transition:transform .6s var(--ease)}
.work__track img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none;
  transition:transform .9s var(--ease)}
.work:hover .work__track img{transform:scale(1.07)}
.work__dots{position:absolute;left:0;right:0;bottom:14px;display:flex;gap:12px;justify-content:center;z-index:2}
.work__dots button{position:relative;width:8px;height:8px;border-radius:50%;background:rgba(21,20,25,.28);transition:background .25s,transform .25s}
/* area di tocco 20×20 (il pallino resta 8px): a 8px su mobile era quasi impossibile centrarli */
.work__dots button::after{content:"";position:absolute;inset:-6px;border-radius:50%}
.work__dots button.is-active{background:var(--arancio);transform:scale(1.25)}
.work__meta{display:flex;flex-direction:column;gap:.3rem;margin-top:1.2rem}
.work__row{display:flex;align-items:center;gap:.8rem}
.work__name{font-family:var(--font-head);font-weight:500;font-size:clamp(1.4rem,2.6vw,2rem);
  letter-spacing:-.02em;transition:color .25s;position:relative}
.work__name::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;
  background:var(--arancio);transition:width .35s var(--ease)}
.work:hover .work__name{color:var(--arancio)}
.work:hover .work__name::after{width:100%}
.work__year{margin-left:auto;font-family:var(--font-head);font-weight:500;font-size:.95rem;
  color:var(--ink-40);letter-spacing:.05em}
.work__ig{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  border:1px solid var(--ink-12);color:var(--ink-60);flex:0 0 auto;
  transition:background .3s,color .3s,border-color .3s,transform .3s var(--ease)}
.work__ig svg{width:16px;height:16px}
.work__ig:hover{background:var(--arancio);border-color:var(--arancio);color:var(--bianco);
  transform:translateY(-2px)}
.work__tags{font-size:.88rem;font-weight:300;color:var(--ink-40)}

/* ---------- about ---------- */
.about__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,72px);align-items:center}
.about__photo{border-radius:200px 200px var(--r) var(--r);overflow:hidden;aspect-ratio:3/3.8}
.about__photo img{width:100%;height:100%;object-fit:cover}
.about__text .sec-title{margin:.7rem 0 1.2rem;min-height:1.1em}
.about__text .lead+.lead{margin-top:1rem} /* l'about è su due paragrafi (17 lug 2026) */

/* typewriter (il cursore è sempre l'avatar-sticker, come in hero e footer) */
.type{color:var(--arancio)}
/* nel titolo "Come lavoro" la frase resta color titolo: solo le parole *chiave* hanno il gradiente */
.process__head .type{color:inherit}
/* il moto del gradiente vive su --hl-x, animata sui CONTENITORI fissi (.hero__type/.type):
   gli span .type__hl vengono ricreati a ogni battuta, un'animazione messa su di loro
   ripartirebbe da zero a ogni render (scatto del gradiente a inizio cancellazione) */
@property --hl-x{syntax:'<percentage>';inherits:true;initial-value:0%}
.hero__type,.type{animation:hl-shift 4s ease-in-out infinite alternate}
/* parole chiave in gradiente arancio + glow: stesso effetto del nome nella landing /social */
.type__hl{background:linear-gradient(100deg,#FFB25C,#F56F10 42%,#D45C08 72%,#F56F10);
  background-size:220% 100%;background-position:var(--hl-x) 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 15px rgba(245,111,16,.45))}
/* about: Jacopo <-> Jpag col gradiente /social e glow */
.about__text .type{background:linear-gradient(100deg,#FFB25C,#F56F10 42%,#D45C08 72%,#F56F10);
  background-size:220% 100%;background-position:var(--hl-x) 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 15px rgba(245,111,16,.45))}
@keyframes hl-shift{from{--hl-x:0%}to{--hl-x:100%}}
@keyframes caret{50%{opacity:0}} /* usato dal colon del 13:05 */

/* located in — card animata */
.loc-card{position:relative;display:inline-flex;flex-direction:column;gap:1.6rem;margin-top:2rem;
  background:var(--notte);color:var(--bianco);border-radius:20px;padding:1.6rem 1.9rem;
  min-width:270px;overflow:hidden;box-shadow:0 24px 60px rgba(21,20,25,.25);
  animation:card-float 6s ease-in-out infinite alternate}
@keyframes card-float{from{transform:translateY(-4px)}to{transform:translateY(5px)}}
.loc-card::after{content:"";position:absolute;inset:auto -30% -55% auto;width:75%;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(245,111,16,.25),transparent 65%)}
/* bagliore animato che percorre il contorno della card */
@property --beam{syntax:'<angle>';initial-value:0deg;inherits:false}
.loc-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;
  background:conic-gradient(from var(--beam),transparent 0deg 286deg,
    rgba(245,111,16,.55) 330deg,var(--arancio) 352deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;animation:loc-beam 4.5s linear infinite}
@keyframes loc-beam{to{--beam:360deg}}
.loc-card__globe{width:44px;height:44px;color:var(--arancio);align-self:flex-end;
  filter:drop-shadow(0 0 10px rgba(245,111,16,.45));
  animation:globe-wobble 6s var(--ease) infinite alternate;transform-origin:center}
@keyframes globe-wobble{from{transform:rotate(-10deg)}to{transform:rotate(10deg)}}
.loc-card__txt{font-size:1.12rem;line-height:1.5;color:var(--wht-70)}
.loc-card__sub{font-size:.9rem;font-weight:300;color:var(--wht-40)}
.loc-card strong{display:inline-flex;align-items:center;gap:.55rem;color:var(--bianco);
  font-weight:500;font-size:1.22rem}
.ping{position:relative;width:9px;height:9px;border-radius:50%;background:var(--arancio);flex:0 0 auto}
.ping::after{content:"";position:absolute;inset:-6px;border-radius:50%;
  border:1.5px solid var(--arancio);animation:ping 2s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.5);opacity:0}}

/* manifesto: sticky, colonna ad ACCUMULO — ogni principio sale morbido al suo posto
   e resta visibile sotto i precedenti; a fine corsa il manifesto è tutto in vista.
   Corsa 240vh e stage 75svh: nell'ultimo tratto, sotto lo stage ancora pinnato,
   si intravede "Come lavoro" che sale */
.manifesto{margin-top:clamp(3rem,6vw,5rem)}
.manifesto__scroll{height:240vh}
.manifesto__stage{position:sticky;top:0;height:75svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:clamp(1.4rem,2.6vw,2.2rem);text-align:center;
  padding-top:clamp(64px,9svh,88px); /* l'eyebrow sta sotto la pillola di nav, non dietro */
  isolation:isolate} /* così il bg a z-index:-1 resta dentro lo stage; 75svh = nell'ultimo tratto pinnato sotto si INTRAVEDE "Come lavoro" (~85px oltre il suo margin-top di ~140px) */
/* deck = spazio disponibile sotto l'eyebrow; dentro, la colonna dei 4 principi.
   Se lo stage è basso GSAP riscala la colonna (transform: il layout non cambia,
   quindi niente contenuto che sborda dallo stage) */
.manifesto__deck{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;width:100%}
.manifesto__col{display:flex;flex-direction:column;align-items:center;gap:clamp(1.1rem,2vw,1.7rem);width:100%}
/* sfondo: gradienti animati che cambiano con la frase attiva */
.manifesto__bg{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:100vw;overflow:hidden;pointer-events:none;z-index:-1}
.mbg{position:absolute;inset:-22%;opacity:0;transition:opacity 1s var(--ease);
  animation:mbg-drift 15s ease-in-out infinite alternate}
.mbg.is-on{opacity:1}
.mbg--1{background:radial-gradient(46% 56% at 22% 30%,rgba(245,111,16,.28),transparent 70%)}
.mbg--2{background:radial-gradient(50% 60% at 78% 26%,rgba(245,111,16,.3),transparent 70%),
  radial-gradient(40% 50% at 14% 78%,rgba(255,178,92,.18),transparent 70%)}
.mbg--3{background:radial-gradient(56% 62% at 50% 78%,rgba(245,111,16,.29),transparent 70%)}
.mbg--4{background:radial-gradient(48% 58% at 76% 70%,rgba(245,111,16,.28),transparent 70%),
  radial-gradient(36% 46% at 22% 20%,rgba(255,178,92,.2),transparent 70%)}
@keyframes mbg-drift{from{transform:translate(-2.5%,-2%) scale(1)}to{transform:translate(2.5%,3%) scale(1.07)}}
.mfst{max-width:58rem;padding-inline:1rem;opacity:0;
  transform:translateY(40px)} /* stato pre-GSAP (evita flash); poi GSAP mostra la colonna "ghost" e rivela parola per parola (ScrollReveal, rif. Lightswind). Niente transition: combatterebbe lo scrub */
.mfst .w{display:inline-block} /* parole splittate via JS: opacità+blur per-parola nello scrub */
.mfst h3{font-size:clamp(1.45rem,2.7vw,2.2rem);color:var(--ink);
  font-weight:700;margin-bottom:.4rem;letter-spacing:-.01em;
  transition:color .5s var(--ease),text-shadow .5s var(--ease)}
/* l'ultimo principio apparso è arancione con un glow leggero; a fine manifesto tornano tutti scuri */
.mfst.is-latest h3{color:var(--arancio);text-shadow:0 0 18px rgba(245,111,16,.38)}
.mfst p{font-weight:300;color:var(--ink-60);max-width:56ch;margin-inline:auto;
  font-size:clamp(.95rem,1.2vw,1.08rem)}

/* come lavoro — 3 box */
.process{margin-top:clamp(4rem,8vw,7rem)}
.process__head{text-align:center;margin-bottom:clamp(2.5rem,4vw,4rem)}
/* min-height: le frasi del typewriter hanno lunghezze diverse, le box sotto non devono ballare */
.process__head .sec-title{margin-top:1rem;min-height:2.3em}
.pboxes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.pbox{position:relative;border:1px solid var(--ink-12);border-radius:20px;
  padding:clamp(1.6rem,3vw,2.4rem);display:flex;flex-direction:column;gap:.9rem;
  background:var(--bg);
  transition:transform .4s var(--ease),border-color .4s,box-shadow .4s}
.pbox:hover{transform:translateY(-8px);border-color:rgba(245,111,16,.5);
  box-shadow:0 26px 60px rgba(21,20,25,.12),0 0 0 4px rgba(245,111,16,.06)}
.pbox__ic{width:44px;height:44px;fill:var(--arancio);
  transition:transform .5s var(--ease)}
.pbox:hover .pbox__ic{transform:rotate(18deg) scale(1.12)}
.pbox__n{position:absolute;top:1.4rem;right:1.6rem;font-family:var(--font-head);font-weight:700;
  font-size:1rem;color:var(--ink-40);transition:color .3s}
.pbox:hover .pbox__n{color:var(--arancio)}
.pbox h3{font-size:clamp(1.4rem,2.2vw,1.8rem);font-weight:700;width:fit-content;
  background:linear-gradient(100deg,#FFB25C,#F56F10 42%,#D45C08 72%,#F56F10);
  background-size:220% 100%;background-position:var(--hl-x) 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:hl-shift 4s ease-in-out infinite alternate}
.pbox p{font-weight:400;color:var(--ink-60);font-size:.98rem}
/* varianti colore: Scopro scuro · Creo bianco · Comunico scuro */
.pbox--dark{background:var(--notte);border-color:var(--notte);color:var(--bianco)}
.pbox--dark p{color:var(--wht-70)}
.pbox--dark .pbox__ic{fill:var(--arancio)}
.pbox--dark .pbox__n{color:var(--wht-40)}
.pbox--dark:hover .pbox__n{color:var(--arancio)}
.pbox--white{background:var(--bianco);border-color:var(--ink-12);color:var(--notte)}
.pbox--white p{color:rgba(21,20,25,.68)}
.pbox--white .pbox__ic{fill:var(--arancio)}
.pbox--white .pbox__n{color:rgba(21,20,25,.4)}
.pbox--white:hover .pbox__n{color:var(--arancio)}
/* bagliore radiale (dal basso a destra) in sequenza Scopro→Creo→Comunico (.is-run) */
.pbox::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(64% 64% at 88% 92%,rgba(245,111,16,.32),rgba(245,111,16,.1) 45%,transparent 72%)}
.pboxes.is-run .pbox:nth-of-type(1)::after{animation:pbox-glow 4s ease-in-out infinite}
.pboxes.is-run .pbox:nth-of-type(2)::after{animation:pbox-glow 4s ease-in-out 1.33s infinite}
.pboxes.is-run .pbox:nth-of-type(3)::after{animation:pbox-glow 4s ease-in-out 2.66s infinite}
@keyframes pbox-glow{0%{opacity:0}14%{opacity:1}36%{opacity:0}100%{opacity:0}}
/* stellina che salta da Scopro a Creo a Comunico, sotto le box */
.pboxes{position:relative}
.pboxes__spark{position:absolute;z-index:2;width:30px;height:30px;bottom:-24px;left:calc(16.66% - 15px);
  fill:var(--arancio);filter:drop-shadow(0 4px 14px rgba(245,111,16,.5));
  opacity:0;pointer-events:none;transition:opacity .4s}
.pboxes.is-run .pboxes__spark{opacity:1;animation:spark-hop 4s ease-in-out infinite}
@keyframes spark-hop{
  0%{left:calc(16.66% - 15px);transform:translateY(0) rotate(0deg)}
  16%{transform:translateY(-26px) rotate(90deg)}
  33%{left:calc(50% - 15px);transform:translateY(0) rotate(180deg)}
  49%{transform:translateY(-26px) rotate(270deg)}
  66%{left:calc(83.33% - 15px);transform:translateY(0) rotate(360deg)}
  84%{left:calc(83.33% - 15px);opacity:1}
  94%,100%{left:calc(83.33% - 15px);opacity:0;transform:translateY(-12px) rotate(360deg)}
}

/* servizi */
.services-block{margin-top:clamp(4rem,8vw,7rem)}
.services{margin-top:1.6rem}
.service{position:relative;display:grid;grid-template-columns:1fr 1.2fr auto;gap:1.5rem;
  align-items:center;border-top:1px solid var(--ink-12);padding:1.6rem 0;transition:padding .35s var(--ease)}
.service:last-child{border-bottom:1px solid var(--ink-12)}
.service:hover{padding-left:.8rem}
.service h3{font-size:clamp(1.25rem,2.2vw,1.65rem)}
.service p{font-weight:300;color:var(--ink-60);font-size:.98rem}
.service__spark{display:block;width:20px;height:20px;fill:var(--ink-40);
  transition:fill .3s,filter .3s,transform .3s var(--ease)}
.service:hover .service__spark{fill:var(--arancio);
  filter:drop-shadow(0 0 7px rgba(245,111,16,.6)) drop-shadow(0 0 16px rgba(245,111,16,.32));
  transform:scale(1.15) rotate(20deg)}

/* ---------- contact ---------- */
.contact{background:var(--notte);color:var(--bianco);border-radius:clamp(20px,3vw,36px);
  margin-inline:clamp(10px,1.6vw,24px)}
.contact__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,80px);align-items:center}
.contact__title{font-size:clamp(2rem,4.6vw,3.8rem);margin-bottom:1.6rem}
.contact__text p{font-weight:300;color:var(--wht-70);margin-bottom:1.1rem;max-width:52ch}
.contact__cta{display:flex;flex-direction:column;align-items:flex-start;gap:1.3rem;
  background:rgba(251,251,251,.04);border:1px solid var(--wht-12);border-radius:24px;
  padding:clamp(1.6rem,3vw,2.6rem)}
.contact__note{font-weight:300;color:var(--wht-70)}
.contact__firma{width:170px;filter:invert(1);mix-blend-mode:screen;opacity:.9}
.contact__small{font-size:.88rem;font-weight:300;color:var(--wht-40)}

/* ---------- footer (struttura alla Barbara) ---------- */
.footer{padding-block:clamp(40px,6vh,64px) 22px}
.footer__top{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;
  flex-wrap:wrap;padding-bottom:clamp(1.6rem,3vw,2.4rem);border-bottom:1px solid var(--ink-12)}
.footer__claim{font-family:var(--font-head);font-weight:500;text-transform:uppercase;
  font-size:clamp(2rem,5vw,4rem);line-height:1.02;letter-spacing:-.02em}
.footer__claim em{font-style:normal;color:var(--arancio)}
.footer__sticker{width:.82em;height:.82em;vertical-align:-.12em;margin-left:.14em}
.footer__mid{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(24px,3.4vw,48px);
  padding-block:clamp(1.6rem,3vw,2.4rem)}
.footer__col{display:flex;flex-direction:column;gap:.75rem}
.footer__h{font-family:var(--font-head);font-weight:500;font-size:1rem;text-transform:uppercase;
  letter-spacing:.14em;color:var(--ink-40);margin-bottom:.5rem}
.footer__col a{width:fit-content;font-size:1.32rem;border-bottom:1px solid transparent;
  transition:color .25s,border-color .25s}
.footer__col a:hover{color:var(--arancio);border-color:var(--arancio)}
.footer__bottom{padding-bottom:clamp(1rem,2vw,1.5rem)}
.footer__me{display:flex;align-items:center;gap:1.4rem}
.footer__avatar{width:88px;height:88px;border-radius:50%;border:1px solid var(--ink-12);
  background:var(--bianco);transition:transform .4s var(--ease)}
.footer__me:hover .footer__avatar{transform:rotate(-8deg) scale(1.06)}
.logo--footer{height:26px;margin-bottom:.7rem}
.footer__muted{color:var(--ink-40);font-size:.95rem;font-weight:300}
.footer__base{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding-top:24px;border-top:1px solid var(--ink-06);font-size:.88rem;color:var(--ink-60)}
.footer__legal a{transition:color .25s}
.footer__legal a:hover{color:var(--arancio)}

/* ---------- dark mode: pannelli e dettagli ---------- */
:root[data-theme="dark"] .nav__pill,
:root[data-theme="dark"] .nav__theme{border-color:var(--wht-12)}
:root[data-theme="dark"] .btn--dark{background:var(--bianco);color:var(--notte)}
:root[data-theme="dark"] .btn--dark:hover{background:var(--arancio)}
:root[data-theme="dark"] .loc-card,
:root[data-theme="dark"] .contact{background:var(--panel);border:1px solid var(--wht-12)}
:root[data-theme="dark"] .work__media{background:var(--notte-2)}
:root[data-theme="dark"] .work__dots button{background:rgba(251,251,251,.3)}
:root[data-theme="dark"] .mock{background:radial-gradient(120% 120% at 30% 20%,var(--notte-2),var(--notte))}
:root[data-theme="dark"] .pbox--dark{background:var(--panel);border-color:var(--wht-12)}
:root[data-theme="dark"] .pbox--white{background:var(--bianco);border-color:var(--bianco)}
:root[data-theme="dark"] .footer__avatar{background:var(--bianco)}
:root[data-theme="dark"] .trail-img{box-shadow:0 24px 60px rgba(0,0,0,.55)}

/* ---------- reveal ---------- */
[data-animate],[data-hero-stagger]{opacity:0;transform:translateY(28px);filter:blur(6px);
  transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease)}
[data-animate].in-view,[data-hero-stagger].in-view{opacity:1;transform:none;filter:blur(0)}
/* ingresso tab "Come lavoro": onda dal basso, più corsa e stacco ritmato
   (lo stacco è nei data-animate-delay 0/2/4 delle pbox = 0/.18/.36s) */
@media(prefers-reduced-motion:no-preference){
  .pbox[data-animate]{transition-duration:.9s}
  .pbox[data-animate]:not(.in-view){transform:translateY(64px)}
}
@media(prefers-reduced-motion:reduce){
  [data-animate],[data-hero-stagger]{transform:none;filter:none;transition:opacity .4s}
  .trail-img{display:none}
  .anim-spin,.anim-spin-slow,.anim-float,.anim-float-slow,
  .loc-card,.loc-card__globe,.ping::after,.hero__type,.type,.pbox h3,.hero__sub,
  .hero__sticker,.journey__walker img,.pboxes__spark,.jcap__time,.jcap__colon{animation:none}
  .loc-card::before,.works__cta::before{display:none} /* niente beam sul contorno */
  /* manifesto: senza scroll-effect, tutto in colonna */
  .manifesto__scroll{height:auto}
  .manifesto__stage{position:static;height:auto;padding-top:0}
  .manifesto__deck,.manifesto__col{display:block}
  .mfst{opacity:1;transform:none;margin-inline:auto;margin-bottom:2.4rem}
  .mbg{animation:none}
  /* timeline: elenco statico */
  .journey__scroll{height:auto}
  .journey__stage{position:static;height:auto;padding-block:3.5rem}
  .journey__track{display:none}
  .journey__caps{display:block;min-height:0}
  .jcap{opacity:1;transform:none;filter:none;margin-bottom:2.2rem}
}

/* fallback senza GSAP (file non caricato: caso limite): manifesto e percorso statici, come in reduce */
:root.no-gsap .manifesto__scroll,:root.no-gsap .journey__scroll{height:auto}
:root.no-gsap .manifesto__stage,:root.no-gsap .journey__stage{position:static;height:auto}
:root.no-gsap .manifesto__stage{padding-top:0}
:root.no-gsap .manifesto__deck,:root.no-gsap .manifesto__col{display:block}
:root.no-gsap .mfst{opacity:1;transform:none;margin-inline:auto;margin-bottom:2.4rem}
:root.no-gsap .journey__track{display:none}
:root.no-gsap .journey__caps{display:block;min-height:0}
:root.no-gsap .jcap{opacity:1;transform:none;filter:none;margin-bottom:2.2rem}

/* ---------- responsive ---------- */
@media(max-width:960px){
  /* works impilati: le colonne spariscono (display:contents → le card diventano item
     unici della griglia) e gli extra vanno in coda con order. Così "vedi tutti i
     progetti" aggiunge i nuovi SOTTO i 4 già visti, mai in mezzo o sopra */
  .works__cols{grid-template-columns:1fr;gap:clamp(40px,5vw,72px)}
  .works__col{display:contents}
  .work--extra{order:1}
  .works__col--right{margin-top:0}
  .pboxes__spark{display:none} /* box in colonna: il salto orizzontale non ha senso */
  .stats__grid{row-gap:2rem}
  .about__grid,.contact__grid{grid-template-columns:1fr}
  .manifesto__scroll{height:220vh}
  .manifesto__stage{height:86svh} /* su mobile il margin di Come lavoro è più piccolo: basta 14svh di finestra */
  .pboxes{grid-template-columns:1fr}
  /* width DEFINITA (non max-width): coi margini auto il grid item non si stretcha e,
     finché la foto lazy non è caricata, il box collassava a 0 → +443px di pagina al
     load, con lo ScrollTrigger del manifesto rimasto tarato sulle posizioni vecchie */
  .about__photo{width:min(100%,380px);margin-inline:auto}
  .service{grid-template-columns:1fr auto}
  .service p{grid-column:1/-1}
  .service__spark{grid-row:1;grid-column:2;justify-self:end} /* accanto al titolo, non sotto il testo */
  .footer__mid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  /* nav: pillola compatta + toggle, entra anche a 360px */
  .nav{justify-content:center;padding-inline:12px;gap:8px}
  .nav__logo,.nav__hint{display:none}
  .nav__pill{position:static;transform:none;margin-inline:auto;padding:5px}
  .nav__link{padding:8px 11px;font-size:.84rem}
  .nav__theme{width:38px;height:38px}
  /* hero: spazio riservato per la frase più lunga (3 righe), CTA piene */
  .hero__title{height:3.1em}
  .hero__inner{gap:1.3rem}
  .hero__actions{flex-direction:column;align-items:center;width:100%}
  .hero__actions .btn{width:100%;max-width:340px;justify-content:center}
  .banner__track span{font-size:2rem}
  .banner__sp{width:18px;height:18px}
  .stats__grid{grid-template-columns:1fr}
  .journey__walker{width:50px;height:50px;margin:-25px 0 0 -25px}
  .journey__caps{min-height:13em}
  .journey__stage{padding-top:8rem} /* la nav mobile è alta ~120px: eyebrow e track partono sotto */
  .process__head .sec-title{min-height:3.4em} /* le frasi lunghe vanno su 2 righe */
  .work__name{font-size:1.5rem}
  .works__cta{flex-direction:column;text-align:center}
  .works__cta .btn{width:100%;max-width:340px;justify-content:center}
  .loc-card{width:100%;min-width:0}
  .contact__firma{width:140px}
  .footer__mid{grid-template-columns:1fr}
  .footer__top{flex-direction:column;align-items:flex-start}
  .footer__cta{width:100%;justify-content:center}
  .footer__base{flex-direction:column;gap:.4rem}
}