/* ============================================================
   Vivien Stocchino — sito personale
   Palette derivata dalle foto: muro crema, maglia blu notte,
   camicia azzurra, denim.
   ============================================================ */

:root{
  --cream:      #EFE9DF;
  --cream-2:    #E4DCCE;
  --ink:        #141C2E;
  --navy:       #1B2540;
  --navy-soft:  #2C3A5E;
  --azure:      #A9C6E4;
  --denim:      #6E86A8;
  --muted:      #6B6357;

  --ff-display: "Instrument Serif", "Times New Roman", serif;
  --ff-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ease: cubic-bezier(.22,1,.36,1);
  --pad: clamp(1.25rem, 5vw, 5.5rem);
  --edge: clamp(1rem, 4vw, 5rem);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--ff-sans);
  font-size:clamp(15px,1.02vw,17px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

::selection{ background:var(--navy); color:var(--cream); }

.u-italic{ font-style:italic; }
.u-sr{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ---------- grana leggera su tutta la pagina ---------- */
body::after{
  content:"";
  position:fixed; inset:0; z-index:9998; pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   PROGRESS BAR
   ============================================================ */
.progress{
  position:fixed; top:0; left:0; height:2px; width:100%;
  z-index:9999; pointer-events:none;
}
.progress__bar{
  height:100%; width:100%;
  background:var(--navy);
  transform:scaleX(0); transform-origin:0 50%;
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.15rem var(--pad);
  transform:translateY(-105%);
  transition:transform .6s var(--ease);
  background:rgba(239,233,223,.82);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid rgba(20,28,46,.08);
}
.nav.is-visible{ transform:translateY(0); }
.nav__brand{ font-family:var(--ff-display); font-size:1.15rem; }
.nav__links{
  display:flex; gap:2rem; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.14em;
}
.nav__links a{ position:relative; padding-bottom:2px; }
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .45s var(--ease);
}
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:0 50%; }
.nav__cta{
  font-size:.78rem; text-transform:uppercase; letter-spacing:.14em;
  border:1px solid currentColor; border-radius:999px;
  padding:.5rem 1.1rem;
  transition:background .35s var(--ease), color .35s var(--ease);
}
.nav__cta:hover{ background:var(--ink); color:var(--cream); }
@media(max-width:860px){ .nav__links{ display:none; } }

/* ============================================================
   HERO — CORTEX
   Lei resta ferma e centrata, davanti a tutto.
   Attorno scorrono quattro strati di contesto.
   ============================================================ */
.cx{ height:460vh; position:relative; }

.cx__stage{
  position:sticky; top:0; height:100vh; overflow:hidden;
  background:var(--cream);
}

/* --- fondale --- */
.cx__bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(115% 85% at 50% 108%, rgba(169,198,228,.30), transparent 60%),
    linear-gradient(180deg,#F6F2EA 0%, #EFE9DF 46%, #E2D9CA 100%);
}
.cx__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(120,150,190,.22), rgba(90,120,165,.10) 60%, transparent);
  opacity:var(--tint,0);
}
.cx__halo{
  position:absolute; z-index:1; left:50%; bottom:0;
  width:min(86vh,120vw); height:min(86vh,120vw);
  transform:translate(-50%,34%);
  background:radial-gradient(circle, rgba(255,255,255,.9), rgba(255,255,255,0) 64%);
  opacity:var(--halo,.75);
}

/* --- scene --- */
.cx__scene{
  position:absolute; inset:0; z-index:2;
  opacity:0; pointer-events:none;
  transform:translateY(var(--sy,0px));
}
.cx__scene.is-live a{ pointer-events:auto; }

/* ---------- scena 01 · identità ---------- */
.cx__kicker{
  position:absolute; top:clamp(4.5rem,9vh,7rem); left:0; right:0;
  margin:0; text-align:center; padding:0 var(--edge);
  font-size:clamp(.6rem,.82vw,.74rem);
  text-transform:uppercase; letter-spacing:.36em; color:var(--muted);
}
.cx__name{
  position:absolute;
  font-family:var(--ff-display); font-weight:400;
  font-size:clamp(3rem,10.5vw,10.5rem);
  line-height:.84; letter-spacing:-.025em;
  color:var(--ink); white-space:nowrap;
}
.cx__name--l{ left:var(--edge);  top:22%; }
.cx__name--r{ right:var(--edge); top:47%; font-style:italic; color:var(--navy-soft); }

.cx__foot{
  position:absolute; bottom:clamp(5.4rem,11vh,7rem); margin:0;
  font-size:.66rem; text-transform:uppercase; letter-spacing:.24em;
  color:var(--muted);
}
.cx__foot--l{ left:var(--edge); }
.cx__foot--r{ right:var(--edge); }

/* ---------- scena 02 · cosa faccio ---------- */
.cx__card{
  position:absolute; top:50%; transform:translateY(-50%);
  width:min(26vw,330px);
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(20,28,46,.10);
  border-radius:20px;
  padding:1.5rem 1.4rem;
  box-shadow:0 30px 60px -45px rgba(20,28,46,.5);
}
.cx__card--l{ left:var(--edge); }
.cx__card--r{ right:var(--edge); }
.cx__card-k{
  display:block; margin-bottom:1rem;
  font-size:.62rem; text-transform:uppercase; letter-spacing:.28em;
  color:var(--denim);
}
.cx__card ul{ list-style:none; margin:0; padding:0; }
.cx__card li{
  font-family:var(--ff-display); font-size:clamp(1rem,1.5vw,1.42rem);
  line-height:1.3; padding:.42rem 0;
  border-bottom:1px solid rgba(20,28,46,.10);
}
.cx__card li:last-child{ border-bottom:0; }

.cx__ticker{
  position:absolute; left:0; right:0; top:21%;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.cx__ticker-run{
  display:flex; align-items:center; gap:1.1rem; width:max-content;
  animation:tick 38s linear infinite;
  font-size:clamp(.62rem,.86vw,.76rem);
  text-transform:uppercase; letter-spacing:.26em; color:var(--muted);
  white-space:nowrap;
}
.cx__ticker-run i{ font-style:normal; color:var(--denim); }
@keyframes tick{ to{ transform:translateX(-50%); } }

/* ---------- scena 03 · strumenti ---------- */
.cx__mid{
  position:absolute; top:6%; left:0; right:0; margin:0;
  text-align:center; padding:0 var(--edge);
  font-family:var(--ff-display); font-style:italic;
  font-size:clamp(.95rem,1.6vw,1.4rem);
  line-height:1.25; color:var(--navy-soft);
}
.cx__chip{
  position:absolute; left:var(--cx); top:var(--cy);
  transform:translate(-50%,-50%);
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(12px) saturate(1.3);
  -webkit-backdrop-filter:blur(12px) saturate(1.3);
  border:1px solid rgba(20,28,46,.10);
  border-radius:999px; padding:.52rem 1rem;
  font-size:.68rem; text-transform:uppercase; letter-spacing:.14em;
  white-space:nowrap; color:var(--ink);
  box-shadow:0 18px 34px -28px rgba(20,28,46,.6);
  animation:float 7s var(--ease) infinite;
}
.cx__chip:nth-child(3){ animation-delay:-1.2s; }
.cx__chip:nth-child(4){ animation-delay:-2.4s; }
.cx__chip:nth-child(5){ animation-delay:-3.6s; }
.cx__chip:nth-child(6){ animation-delay:-4.8s; }
.cx__chip:nth-child(7){ animation-delay:-6s; }
@keyframes float{
  0%,100%{ transform:translate(-50%,-50%); }
  50%    { transform:translate(-50%,calc(-50% - 10px)); }
}

/* ---------- scena 04 · claim ---------- */
.cx__claim{
  position:absolute;
  font-family:var(--ff-display); font-weight:400;
  font-size:clamp(2.3rem,6.4vw,6.4rem);
  line-height:.92; letter-spacing:-.03em; color:var(--ink);
}
.cx__claim--l{ left:var(--edge);  top:46%; }
.cx__claim--r{ right:var(--edge); top:22%; text-align:right; }
.cx__claim--r em{ font-style:italic; color:var(--navy-soft); }

.cx__cta{
  position:absolute; z-index:8; opacity:var(--ctaOp,0);
  left:50%; bottom:clamp(4.4rem,8.5vh,5.4rem);
  transform:translateX(-50%);
  background:var(--ink); color:var(--cream);
  border-radius:999px; padding:.85rem 1.7rem;
  font-size:.72rem; text-transform:uppercase; letter-spacing:.2em;
  box-shadow:0 24px 50px -30px rgba(20,28,46,.9);
  transition:transform .4s var(--ease);
}
.cx__cta:hover{ transform:translateX(-50%) translateY(-3px); }

/* --- il soggetto: sempre davanti --- */
.cx__subject{
  position:absolute; z-index:5;
  left:50%; bottom:0; width:0; height:86vh;
  transform:translate(var(--subX,0px), var(--subY,0px)) scale(var(--subS,1));
  transform-origin:50% 100%;
  filter:drop-shadow(0 40px 60px rgba(20,28,46,.22));
}
.cx__ph{
  position:absolute; bottom:0; left:0;
  height:100%; width:auto; max-width:none;
}
.cx__ph--b{                                               /* braccia conserte */
  transform:translateX(-50%);
  /* sparisce sotto la riga mentre sale: così non resta sotto l'altra posa */
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,0) 0,rgba(0,0,0,0) var(--wh,-8%),#000 calc(var(--wh,-8%) + 7%),#000 100%);
  mask-image:linear-gradient(to top,rgba(0,0,0,0) 0,rgba(0,0,0,0) var(--wh,-8%),#000 calc(var(--wh,-8%) + 7%),#000 100%);
}
.cx__ph--a{                                               /* laptop + fotocamera */
  transform:translateX(-67.5%);
  -webkit-mask-image:linear-gradient(to top,#000 0,#000 var(--wh,-8%),rgba(0,0,0,0) calc(var(--wh,-8%) + 7%),rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to top,#000 0,#000 var(--wh,-8%),rgba(0,0,0,0) calc(var(--wh,-8%) + 7%),rgba(0,0,0,0) 100%);
}

/* la riga che scorre durante il cambio di posa */
.cx__scan{
  position:absolute; z-index:6; left:0; right:0;
  top:var(--scanY,50%); height:1px;
  background:linear-gradient(90deg,transparent,rgba(20,28,46,.55) 22%,rgba(20,28,46,.55) 78%,transparent);
  opacity:var(--scanOp,0); pointer-events:none;
}

/* sfuma il taglio in basso */
.cx__stage::after{
  content:""; position:absolute; z-index:6; left:0; right:0; bottom:0;
  height:20vh; pointer-events:none;
  background:linear-gradient(180deg, rgba(226,217,202,0), rgba(226,217,202,.9));
}

/* --- HUD --- */
.cx__hud{
  position:absolute; z-index:7; bottom:clamp(1.6rem,4vh,2.6rem); left:var(--edge);
  display:flex; align-items:center; gap:.9rem;
  font-size:.66rem; letter-spacing:.24em; color:var(--muted);
}
.cx__dots{ display:flex; gap:.42rem; }
.cx__dots i{
  width:16px; height:2px; background:currentColor; opacity:.28;
  transition:opacity .45s var(--ease);
}
.cx__dots i.is-on{ opacity:1; }
.cx__scrollcue{
  position:absolute; z-index:7; bottom:clamp(1.6rem,4vh,2.6rem);
  left:50%; transform:translateX(-50%);
  font-size:.6rem; text-transform:uppercase; letter-spacing:.3em;
  color:var(--muted); opacity:var(--cueOp,1);
}

/* --- Cortex su mobile --- */
@media(max-width:820px){
  .cx{ height:400vh; }
  .cx__subject{ height:58vh; }
  .cx__subject{ filter:drop-shadow(0 24px 34px rgba(20,28,46,.2)); }

  .cx__kicker{ top:5.5vh; letter-spacing:.24em; font-size:.6rem; }

  /* stessa disposizione del desktop: VIVIEN in alto a sinistra,
     Stocchino piu' in basso a destra. Lei si stringe per lasciarli ai lati. */
  .cx__name{ font-size:10vw; }
  .cx__name--l{ top:44%; left:var(--edge);  right:auto; }
  .cx__name--r{ top:54%; right:var(--edge); left:auto; }
  .cx__foot{ display:none; }

  /* scena 02 - le due card restano ai lati come sul desktop.
     Sono di vetro: qui passano DAVANTI a lei (z-index 6, il soggetto e' 5),
     cosi' restano leggibili e si intravede la figura sfocata dietro. */
  /* le scene 02 e 03 passano davanti al soggetto: la scena crea un
     contesto di impilamento suo, quindi lo z-index va messo qui, non sui figli. */
  .cx__scene[data-scene="1"],
  .cx__scene[data-scene="2"],
  .cx__scene[data-scene="3"]{ z-index:6; }

  .cx__card{
    width:calc(50% - var(--edge) - .25rem);
    top:66%; transform:translateY(-50%);
    padding:.8rem .85rem; border-radius:16px;
    /* piu' opache del desktop: qui passano sopra la figura scura,
       col vetro al 55% il testo non si leggeva */
    background:rgba(255,255,255,.93);
    border-color:rgba(20,28,46,.18);
    box-shadow:0 18px 40px -22px rgba(20,28,46,.55);
  }
  .cx__card--l{ left:var(--edge);  right:auto; }
  .cx__card--r{ right:var(--edge); left:auto; }
  .cx__card-k{ margin-bottom:.55rem; font-size:.5rem; letter-spacing:.2em; }
  .cx__card li{ font-size:.8rem; padding:.28rem 0; line-height:1.25; }
  .cx__ticker{ top:auto; bottom:8.5rem; }

  /* scena 03 - i chip tornano ai lati, alle altezze dove la sagoma
     lascia spazio: il laptop occupa il fianco sinistro a mezza figura. */
  .cx__mid{ top:8%; font-size:.95rem; }
  .cx__chip{ padding:.42rem .72rem; font-size:.58rem; }
  /* tutti nella fascia libera sopra la testa: lei occupa dal 42% in giu' */
  .cx__chip:nth-of-type(1){ left:24%; top:17%; }
  .cx__chip:nth-of-type(2){ left:24%; top:25.5%; }
  .cx__chip:nth-of-type(3){ left:24%; top:34%; }
  .cx__chip:nth-of-type(4){ left:76%; top:17%; }
  .cx__chip:nth-of-type(5){ left:76%; top:25.5%; }
  .cx__chip:nth-of-type(6){ left:76%; top:34%; }

  /* scena 04 - stesse quote del desktop, corpo ridotto per stare ai lati */
  .cx__claim{ font-size:8.5vw; }
  .cx__claim--l{ left:var(--edge);  right:auto; top:33%; }
  .cx__claim--r{ right:var(--edge); left:auto; top:16%; }
  .cx__cta{ bottom:4.6rem; }

  .cx__hud{ bottom:2rem; }
  .cx__scrollcue{ bottom:2rem; }
}

/* ============================================================
   SEZIONI GENERICHE
   ============================================================ */
.section{ padding:clamp(6rem,16vh,12rem) var(--pad); position:relative; }
.section--dark{ background:var(--ink); color:var(--cream); }

.label{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.32em;
  color:var(--muted); margin-bottom:2.5rem;
  display:flex; align-items:center; gap:.9rem;
}
.section--dark .label{ color:var(--denim); }
.label::before{ content:""; width:2.2rem; height:1px; background:currentColor; opacity:.6; }

.reveal-line{ display:block; overflow:hidden; }
.reveal-line > span{
  display:block; transform:translateY(105%);
  transition:transform 1s var(--ease);
}
.is-in .reveal-line > span{ transform:translateY(0); }
.reveal-line:nth-child(2) > span{ transition-delay:.08s; }
.reveal-line:nth-child(3) > span{ transition-delay:.16s; }

.fade-up{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.is-in .fade-up{ opacity:1; transform:none; }
.fade-up.is-in{ opacity:1; transform:none; }
.d1{ transition-delay:.1s; } .d2{ transition-delay:.2s; } .d3{ transition-delay:.3s; }

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto__title{
  font-family:var(--ff-display); font-weight:400;
  font-size:clamp(2.1rem,6.4vw,5.6rem);
  line-height:1.02; letter-spacing:-.02em;
  margin:0 0 clamp(2.5rem,6vh,4.5rem); max-width:16ch;
}
.manifesto__title em{ font-style:italic; color:var(--navy-soft); }

.manifesto__grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:2rem; }
.manifesto__body{ grid-column:6 / 13; }
.manifesto__body p{
  font-size:clamp(1rem,1.28vw,1.16rem);
  line-height:1.75; color:#3A3A38; max-width:52ch; margin:0 0 1.4rem;
}
.manifesto__side{ grid-column:1 / 5; }
.manifesto__side dl{ margin:0; border-top:1px solid rgba(20,28,46,.14); }
.manifesto__side div{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.95rem 0; border-bottom:1px solid rgba(20,28,46,.14); font-size:.82rem;
}
.manifesto__side dt{ text-transform:uppercase; letter-spacing:.14em; color:var(--muted); }
.manifesto__side dd{ margin:0; text-align:right; }
@media(max-width:900px){
  .manifesto__body, .manifesto__side{ grid-column:1 / -1; }
  .manifesto__side{ margin-top:3rem; }
}

/* ============================================================
   SERVIZI
   ============================================================ */
.services__head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:2rem; margin-bottom:clamp(3rem,7vh,5rem); flex-wrap:wrap;
}
.services__head h2{
  font-family:var(--ff-display); font-weight:400;
  font-size:clamp(2rem,5.4vw,4.4rem); line-height:1.02;
  margin:0; letter-spacing:-.02em; max-width:19ch;
}
.services__head p{ max-width:34ch; color:rgba(239,233,223,.6); margin:0; font-size:.95rem; }

.service{
  border-top:1px solid rgba(239,233,223,.18);
  display:grid; grid-template-columns:5rem 1fr 1.1fr auto;
  gap:2rem; align-items:start;
  padding:clamp(1.8rem,4vh,2.8rem) 0;
  transition:padding-left .6s var(--ease);
}
.service:last-child{ border-bottom:1px solid rgba(239,233,223,.18); }
.service:hover{ padding-left:1.4rem; }
.service__num{ font-size:.7rem; letter-spacing:.24em; color:var(--denim); padding-top:.55rem; }
.service__name{
  font-family:var(--ff-display); font-weight:400;
  font-size:clamp(1.5rem,3.1vw,2.6rem); line-height:1.06; margin:0;
}
.service__desc{ margin:0; color:rgba(239,233,223,.66); font-size:.95rem; line-height:1.7; }
.service__tags{ list-style:none; margin:.9rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem; }
.service__tags li{
  font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid rgba(239,233,223,.24); border-radius:999px;
  padding:.32rem .7rem; color:rgba(239,233,223,.72);
}
.service__arrow{
  font-size:1.4rem; color:var(--denim); padding-top:.2rem;
  transform:translateX(-6px); opacity:.35;
  transition:transform .5s var(--ease), opacity .5s var(--ease);
}
.service:hover .service__arrow{ transform:translateX(0); opacity:1; }
@media(max-width:900px){
  .service{ grid-template-columns:3.2rem 1fr; gap:.6rem 1rem; }
  .service > div{ grid-column:2; }
  .service__arrow{ display:none; }
}

/* ============================================================
   METODO
   ============================================================ */
.method{ display:grid; grid-template-columns:repeat(12,1fr); gap:2rem; }
.method__sticky{ grid-column:1 / 5; position:sticky; top:26vh; align-self:start; }
.method__big{
  font-family:var(--ff-display);
  font-size:clamp(6rem,17vw,15rem); line-height:.8;
  color:var(--cream-2); position:relative; height:1em;
}
.method__big span{
  position:absolute; inset:0; opacity:0; transform:translateY(30%);
  transition:opacity .5s var(--ease), transform .7s var(--ease);
}
.method__big span.is-on{ opacity:1; transform:none; }
.method__list{ grid-column:6 / 13; }
.step{ padding:clamp(3rem,10vh,7rem) 0; border-bottom:1px solid rgba(20,28,46,.13); }
.step:first-child{ padding-top:0; }
.step h3{
  font-family:var(--ff-display); font-weight:400;
  font-size:clamp(1.7rem,3.6vw,3rem); line-height:1.05; margin:0 0 1rem;
}
.step p{ margin:0; max-width:46ch; color:#4A4740; line-height:1.75; }
.step__k{
  font-size:.68rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--denim); display:block; margin-bottom:1.2rem;
}
@media(max-width:900px){
  .method__sticky{ display:none; }
  .method__list{ grid-column:1 / -1; }
}

/* ============================================================
   NUMERI
   ============================================================ */
.stats{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:2rem; border-top:1px solid rgba(239,233,223,.18);
  padding-top:clamp(2.5rem,6vh,4rem);
}
.stat__n{
  font-family:var(--ff-display); font-size:clamp(2.8rem,7vw,6rem);
  line-height:1; letter-spacing:-.02em; display:block;
}
.stat__l{
  display:block; margin-top:.9rem;
  font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--denim);
}
@media(max-width:760px){ .stats{ grid-template-columns:1fr; gap:2.6rem; } }

/* ============================================================
   CONTATTI
   ============================================================ */
.contact{ text-align:center; }
.contact__title{
  font-family:var(--ff-display); font-weight:400;
  font-size:clamp(2.4rem,9vw,8rem); line-height:.98;
  margin:0 0 2.5rem; letter-spacing:-.025em;
}
.contact__title em{ font-style:italic; }
.contact__mail{
  display:inline-block; position:relative;
  font-family:var(--ff-display); font-size:clamp(1.2rem,3vw,2.3rem);
  padding-bottom:.25rem; word-break:break-word;
}
.contact__mail::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform-origin:0 50%;
  transition:transform .55s var(--ease);
}
.contact__mail:hover::after{ transform:scaleX(0); transform-origin:100% 50%; }
.contact__socials{
  margin-top:3.5rem; display:flex; justify-content:center; gap:2.2rem; flex-wrap:wrap;
  font-size:.72rem; text-transform:uppercase; letter-spacing:.22em;
}
.contact__socials a{ opacity:.7; transition:opacity .4s var(--ease); }
.contact__socials a:hover{ opacity:1; }

.footer{
  padding:2rem var(--pad); display:flex; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); border-top:1px solid rgba(20,28,46,.12);
}

/* ============================================================
   CONTENUTI DALLA PRESENTAZIONE
   ============================================================ */
.section--tint{ background:var(--cream-2); }
.section--tint .method__big{ color:rgba(44,58,94,.16); }

.section__title{
  font-family:var(--ff-display); font-weight:400;
  font-size:clamp(2rem,5.6vw,4.8rem);
  line-height:1.03; letter-spacing:-.02em;
  margin:0 0 clamp(2.5rem,6vh,4.5rem); max-width:24ch;
}
.section__title em{ font-style:italic; color:var(--navy-soft); }

/* --- la tesi --- */
.thesis__title{
  font-family:var(--ff-display); font-weight:400;
  font-size:clamp(2.3rem,7vw,6.4rem);
  line-height:1; letter-spacing:-.025em;
  margin:0 0 clamp(2rem,5vh,3.5rem); max-width:19ch;
}
.thesis__title em{ font-style:italic; color:var(--navy-soft); }
.thesis__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:2rem 4rem;
  margin-bottom:clamp(3.5rem,9vh,6rem); max-width:1100px;
}
.thesis__lead{
  margin:0; font-family:var(--ff-display); font-style:italic;
  font-size:clamp(1.4rem,2.6vw,2.2rem); line-height:1.2; color:var(--navy-soft);
}
.thesis__body{ margin:0; font-size:clamp(1rem,1.2vw,1.12rem); line-height:1.75; color:#3A3A38; max-width:52ch; }
.stats--light{ border-top-color:rgba(20,28,46,.14); }
.stats--light .stat__n{ color:var(--ink); }
.stats--light .stat__l{
  color:var(--muted); text-transform:none; letter-spacing:0;
  font-size:.92rem; line-height:1.5; max-width:30ch;
}
@media(max-width:760px){ .thesis__grid{ grid-template-columns:1fr; } }

/* --- chi sono --- */
.manifesto__body .manifesto__big{
  font-family:var(--ff-display); font-size:clamp(1.5rem,2.6vw,2.3rem);
  line-height:1.2; color:var(--ink);
}
.manifesto__big em{ font-style:italic; color:var(--navy-soft); }

/* --- cosa mi distingue --- */
.diff{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(20,28,46,.14);
}
.diff__item{ padding:2rem 2rem 2.4rem 0; border-bottom:1px solid rgba(20,28,46,.14); }
.diff__item:nth-child(3n+2), .diff__item:nth-child(3n+3){ padding-left:2rem; border-left:1px solid rgba(20,28,46,.14); }
.diff__n{ font-size:.7rem; letter-spacing:.24em; color:var(--denim); }
.diff__item h3{ font-family:var(--ff-display); font-weight:400; font-size:clamp(1.6rem,2.6vw,2.2rem); margin:.8rem 0 .7rem; }
.diff__item p{ margin:0; line-height:1.7; color:#4A4740; max-width:38ch; }
@media(max-width:900px){
  .diff{ grid-template-columns:1fr; }
  .diff__item, .diff__item:nth-child(3n+2), .diff__item:nth-child(3n+3){ padding:1.8rem 0; border-left:0; }
}

/* --- servizi: nota e formule --- */
.services__note{
  margin:2.4rem 0 0; color:rgba(239,233,223,.7);
  font-family:var(--ff-display); font-style:italic; font-size:clamp(1.1rem,1.7vw,1.4rem);
}
.formats__title{ font-family:var(--ff-display); font-weight:400; font-size:clamp(1.6rem,3vw,2.4rem); margin:clamp(4rem,10vh,6rem) 0 1.8rem; }
.formats{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.format{ border:1px solid rgba(239,233,223,.2); border-radius:20px; padding:clamp(1.5rem,3vw,2.4rem); background:rgba(239,233,223,.03); }
.format h4{ font-family:var(--ff-display); font-weight:400; font-size:clamp(1.5rem,2.4vw,2rem); margin:0; }
.format__sub{ margin:.4rem 0 1.4rem; color:var(--azure); font-size:.95rem; }
.format ul{ list-style:none; margin:0; padding:0; }
.format li{
  padding:.62rem 0 .62rem 1.4rem; position:relative;
  border-top:1px solid rgba(239,233,223,.12);
  color:rgba(239,233,223,.8); font-size:.95rem; line-height:1.5;
}
.format li::before{ content:""; position:absolute; left:0; top:1.15rem; width:.5rem; height:1px; background:var(--denim); }
.formats__note{ margin:1.6rem 0 0; color:rgba(239,233,223,.55); font-size:.9rem; max-width:80ch; line-height:1.7; }
@media(max-width:820px){ .formats{ grid-template-columns:1fr; } }

/* --- il lavoro che non si vede --- */
.unseen__grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(2rem,6vw,6rem); align-items:start; }
.unseen__text{ font-size:clamp(1rem,1.25vw,1.14rem); line-height:1.75; color:#3A3A38; max-width:52ch; margin:0; }
.unseen__iceberg{ background:var(--ink); color:var(--cream); border-radius:22px; overflow:hidden; }
.unseen__tip{ margin:0; padding:1.3rem 1.6rem; background:var(--cream-2); color:var(--ink); font-size:.95rem; }
.unseen__tip strong{ font-weight:500; }
.unseen__under{ margin:0; padding:1.4rem 1.6rem .4rem; color:var(--azure); font-size:.74rem; text-transform:uppercase; letter-spacing:.2em; }
.unseen__iceberg ul{ list-style:none; margin:0; padding:.4rem 1.6rem 1.6rem; }
.unseen__iceberg li{ padding:.7rem 0; border-top:1px solid rgba(239,233,223,.12); font-size:.98rem; }
@media(max-width:900px){ .unseen__grid{ grid-template-columns:1fr; } }

/* --- risultati: anteprime --- */
.cases{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.case-card{
  display:flex; flex-direction:column; gap:.9rem;
  padding:1.6rem 1.4rem 1.4rem;
  border:1px solid rgba(239,233,223,.18); border-radius:20px;
  transition:background .4s var(--ease), border-color .4s var(--ease);
}
.case-card:hover{ background:rgba(239,233,223,.05); border-color:rgba(169,198,228,.5); }
.case-card__k{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--denim); }
.case-card__n{ font-family:var(--ff-display); font-size:clamp(2.4rem,4vw,3.6rem); line-height:1; }
.case-card__l{ color:rgba(239,233,223,.7); font-size:.92rem; line-height:1.55; flex:1; }
.case-card__go{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--azure); }
.cases__all{ margin:2.2rem 0 0; }
.cases__all a{ border-bottom:1px solid currentColor; padding-bottom:2px; color:var(--azure); }
@media(max-width:1000px){ .cases{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .cases{ grid-template-columns:1fr; } }

/* --- con chi lavoro --- */
.fit{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.fit__col{ border-radius:20px; padding:clamp(1.5rem,3vw,2.4rem); }
.fit__col--yes{ background:var(--ink); color:var(--cream); }
.fit__col--no{ border:1px solid rgba(20,28,46,.18); }
.fit__col h3{ font-family:var(--ff-display); font-weight:400; font-size:clamp(1.4rem,2.2vw,1.9rem); margin:0 0 1.2rem; }
.fit__col ul{ list-style:none; margin:0; padding:0; }
.fit__col li{ padding:.75rem 0 .75rem 1.7rem; position:relative; line-height:1.5; border-top:1px solid rgba(20,28,46,.12); }
.fit__col--yes li{ border-top-color:rgba(239,233,223,.14); }
.fit__col--yes li::before{ content:"\2713"; position:absolute; left:0; color:var(--azure); }
.fit__col--no li::before{ content:"\2715"; position:absolute; left:0; color:var(--muted); }
.fit__note{ margin:1.8rem 0 0; font-family:var(--ff-display); font-style:italic; font-size:clamp(1.1rem,1.8vw,1.45rem); color:var(--navy-soft); }
@media(max-width:820px){ .fit{ grid-template-columns:1fr; } }

/* --- come partiamo: le due fasi --- */
.phases{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; margin-top:clamp(4rem,10vh,6rem); }
.phase{ background:var(--cream); border-radius:20px; padding:clamp(1.5rem,3vw,2.2rem); }
.phase__k{ font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--denim); }
.phase h3{ font-family:var(--ff-display); font-weight:400; font-size:clamp(1.5rem,2.4vw,2rem); margin:.6rem 0 1rem; }
.phase ul{ margin:0; padding-left:1.1rem; line-height:1.75; color:#4A4740; }
.phases__note{ margin:1.6rem 0 0; color:var(--muted); max-width:70ch; line-height:1.7; }
@media(max-width:820px){ .phases{ grid-template-columns:1fr; } }

/* --- domande frequenti --- */
.faq{ border-top:1px solid rgba(20,28,46,.14); max-width:960px; }
.faq__item{ border-bottom:1px solid rgba(20,28,46,.14); }
.faq__item summary{
  list-style:none; cursor:pointer;
  display:flex; justify-content:space-between; gap:1.5rem; align-items:baseline;
  padding:1.4rem 0;
  font-family:var(--ff-display); font-size:clamp(1.25rem,2.1vw,1.75rem); line-height:1.25;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{
  content:"+"; font-family:var(--ff-sans); font-weight:300; font-size:1.5rem; color:var(--denim);
  transition:transform .4s var(--ease);
}
.faq__item[open] summary::after{ transform:rotate(45deg); }
.faq__item p{ margin:0 0 1.6rem; max-width:68ch; line-height:1.75; color:#3A3A38; }

/* --- contatti --- */
.contact__lead{ margin:0 auto 2.6rem; max-width:44ch; color:rgba(239,233,223,.66); font-size:clamp(1rem,1.4vw,1.2rem); }
.contact__lead em{ font-family:var(--ff-display); font-size:1.2em; color:var(--cream); }
.contact__phone{ margin:1.2rem 0 0; font-size:clamp(1rem,1.8vw,1.4rem); letter-spacing:.04em; }
.contact__phone a{ opacity:.8; transition:opacity .3s var(--ease); }
.contact__phone a:hover{ opacity:1; }
.footer a{ border-bottom:1px solid transparent; transition:border-color .3s var(--ease); }
.footer a:hover{ border-bottom-color:currentColor; }

/* --- pagina casi studio --- */
.page-sub .nav{ transform:none; }
.cs-hero{ padding-top:clamp(8rem,20vh,13rem); }
.crumbs{ font-size:.72rem; letter-spacing:.12em; color:var(--muted); margin-bottom:2rem; }
.crumbs a{ border-bottom:1px solid rgba(20,28,46,.25); }
.cs-hero__title{
  font-family:var(--ff-display); font-weight:400;
  font-size:clamp(2.6rem,8vw,7rem); line-height:.98; letter-spacing:-.025em; margin:0 0 2rem;
}
.cs-hero__title em{ font-style:italic; color:var(--navy-soft); }
.cs-hero__lead{ max-width:62ch; font-size:clamp(1rem,1.3vw,1.16rem); line-height:1.75; color:#3A3A38; margin:0 0 2.6rem; }
.cs-index{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.6rem; }
.cs-index a{
  display:inline-flex; gap:.6rem; align-items:center;
  border:1px solid rgba(20,28,46,.2); border-radius:999px; padding:.55rem 1rem; font-size:.88rem;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.cs-index a:hover{ background:var(--ink); color:var(--cream); }
.cs-index b{ font-weight:400; font-size:.7rem; color:var(--denim); }

.case{ scroll-margin-top:5rem; }
.case__title{
  font-family:var(--ff-display); font-weight:400;
  font-size:clamp(2rem,5vw,4.2rem); line-height:1.02; letter-spacing:-.02em; margin:0 0 .8rem; max-width:20ch;
}
.case__meta{ margin:0 0 2.2rem; font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--denim); }
.case__intro{ max-width:64ch; font-size:clamp(1rem,1.3vw,1.16rem); line-height:1.75; color:#3A3A38; margin:0 0 3rem; }
.case__stats{ margin:0; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(20,28,46,.14); }
.case__stats div{ padding:1.8rem 1.6rem 1.8rem 0; border-bottom:1px solid rgba(20,28,46,.14); }
.case__stats div:nth-child(3n+2), .case__stats div:nth-child(3n+3){ padding-left:1.6rem; border-left:1px solid rgba(20,28,46,.14); }
.case__stats dt{ font-family:var(--ff-display); font-size:clamp(2rem,4vw,3.4rem); line-height:1; letter-spacing:-.02em; }
.case__stats dd{ margin:.8rem 0 0; color:#4A4740; line-height:1.55; font-size:.95rem; max-width:32ch; }
.case__why{ margin:3rem 0 0; padding:0 0 0 1.6rem; border-left:2px solid var(--azure); max-width:70ch; }
.case__why p{ margin:0; font-family:var(--ff-display); font-size:clamp(1.2rem,2vw,1.6rem); line-height:1.35; }
.case__why span{ font-style:italic; color:var(--navy-soft); }
@media(max-width:900px){
  .case__stats{ grid-template-columns:1fr 1fr; }
  .case__stats div, .case__stats div:nth-child(3n+2), .case__stats div:nth-child(3n+3){ padding:1.5rem 1rem 1.5rem 0; border-left:0; }
  .case__stats div:nth-child(2n){ padding-left:1rem; border-left:1px solid rgba(20,28,46,.14); }
}
@media(max-width:520px){
  .case__stats{ grid-template-columns:1fr; }
  .case__stats div, .case__stats div:nth-child(2n){ padding:1.4rem 0; border-left:0; }
}

/* ============================================================
   PALETTE DELLA PRESENTAZIONE
   Vale per tutto quello che viene dopo l'hero (l'hero resta
   crema e blu). Valori letti dal PDF di Vivien.
   ============================================================ */
:root{
  --p-bg:      #F7F6FC;   /* fondo pagina, quasi bianco lilla */
  --p-tint:    #EEEBF8;   /* fondo alternato */
  --p-ink:     #1A1633;   /* titoli */
  --p-ink-2:   #3B2E7A;   /* titolo della tesi */
  --p-violet:  #7862BE;   /* accento */
  --p-magenta: #C84A7F;   /* colore di marca */
  --p-magenta-d:#B23F70;
  --p-yellow:  #FEFF9A;
  --p-pink:    #FCE2EB;
  --p-pink-2:  #F8CEDD;
  --p-pink-3:  #F2B9CE;
  --p-line:    #E4E1F2;   /* bordi */
  --p-text:    #5C5678;   /* testo corrente */
  --p-text-2:  #6E6A8A;
}

body{ background:var(--p-bg); }
::selection{ background:var(--p-magenta); color:#fff; }

/* nav e barra di avanzamento */
.progress__bar{ background:var(--p-magenta); }
.nav{ background:rgba(247,246,252,.86); border-bottom-color:var(--p-line); color:var(--p-ink); }
.nav__cta{ border-color:var(--p-magenta); color:var(--p-magenta); }
.nav__cta:hover{ background:var(--p-magenta); color:#fff; }

/* sezioni */
.section{ color:var(--p-ink); }
.section--tint{ background:var(--p-tint); }
.section--light{ background:var(--p-bg); }
.section--dark{ background:var(--p-ink); color:#fff; }
.section--yellow{ background:var(--p-yellow); }
.section--magenta{ background:var(--p-magenta); color:#fff; }

.label{ color:var(--p-magenta); }
.section--dark .label{ color:var(--p-pink-3); }
.section--magenta .label{ color:var(--p-yellow); }

.manifesto__title em, .section__title em, .cs-hero__title em, .manifesto__big em{ color:var(--p-violet); }
.section--magenta .section__title em{ color:var(--p-yellow); }
.manifesto__body p, .thesis__body, .unseen__text, .diff__item p, .step p,
.phase ul, .faq__item p, .cs-hero__lead, .case__intro, .case__stats dd{ color:var(--p-text); }
.manifesto__body .manifesto__big{ color:var(--p-ink); }

/* tesi, come la slide 2 */
.thesis__title{ color:var(--p-ink-2); }
.thesis__title em{ color:var(--p-violet); }
.thesis__lead{ color:var(--p-magenta); }
.section--yellow .thesis__body{ color:var(--p-ink-2); }
.stats--light{ border-top-color:rgba(59,46,122,.2); }
.stats--light .stat__n{ color:var(--p-magenta); }
.stats--light .stat__l{ color:var(--p-ink-2); }

/* chi sono */
.manifesto__side dl, .manifesto__side div{ border-color:var(--p-line); }
.section--tint .manifesto__side dl, .section--tint .manifesto__side div{ border-color:#DAD5EE; }
.manifesto__side dt{ color:var(--p-text-2); }

/* cosa mi distingue */
.diff, .diff__item, .diff__item:nth-child(3n+2), .diff__item:nth-child(3n+3){ border-color:var(--p-line); }
.diff__n{ color:var(--p-magenta); }

/* servizi */
.services__head p{ color:rgba(255,255,255,.62); }
.services__note{ color:var(--p-pink-3); }
.format{ border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.03); }
.format:first-child{ background:var(--p-yellow); border-color:var(--p-yellow); color:var(--p-ink); }
.format:first-child .format__sub{ color:var(--p-magenta); }
.format:first-child li{ color:var(--p-ink-2); border-top-color:rgba(59,46,122,.16); }
.format:first-child li::before{ background:var(--p-magenta); }
.format__sub{ color:var(--p-pink-3); }
.format li{ color:rgba(255,255,255,.8); border-top-color:rgba(255,255,255,.1); }
.format li::before{ background:var(--p-pink-3); }
.formats__note{ color:rgba(255,255,255,.5); }

/* il lavoro che non si vede, come la slide 7 */
.section--magenta .unseen__text{ color:rgba(255,255,255,.88); }
.unseen__iceberg{ background:var(--p-ink); }
.unseen__tip{ background:var(--p-pink); color:var(--p-magenta-d); }
.unseen__under{ color:var(--p-pink-3); }

/* risultati: carte chiare come le slide dei casi */
.results .services__head p{ color:var(--p-text); }
.results .case-card{ background:#fff; border-color:var(--p-line); color:var(--p-ink); box-shadow:0 20px 40px -34px rgba(26,22,51,.35); transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s var(--ease); }
.results .case-card:hover{ transform:translateY(-6px); border-color:var(--p-magenta); box-shadow:0 30px 50px -30px rgba(200,74,127,.45); background:#fff; }
.results .case-card__k{ color:var(--p-magenta); }
.results .case-card__n{ color:var(--p-ink); }
.results .case-card__l{ color:var(--p-text); }
.results .case-card__go{ color:var(--p-violet); }
.results .cases__all a{ color:var(--p-magenta); }

/* con chi lavoro, come la slide 12 */
.section--magenta .fit__col--yes{ background:var(--p-ink); }
.section--magenta .fit__col--no{ border-color:rgba(255,255,255,.45); color:#fff; }
.section--magenta .fit__col--no li{ border-top-color:rgba(255,255,255,.22); }
.section--magenta .fit__col--no li::before{ color:var(--p-pink-2); }
.fit__col--yes li::before{ color:var(--p-yellow); }
.section--magenta .fit__note{ color:var(--p-yellow); }

/* come cominciamo */
.section--tint .method__big, .method__big{ color:rgba(120,98,190,.2); }
.step{ border-bottom-color:#DAD5EE; }
.step__k{ color:var(--p-magenta); }
.phase{ background:#fff; }
.phase__k{ color:var(--p-magenta); }
.phases__note{ color:var(--p-text-2); }

/* domande */
.faq, .faq__item{ border-color:var(--p-line); }
.faq__item summary::after{ color:var(--p-magenta); }
.faq__item[open] summary{ color:var(--p-magenta-d); }

/* contatti, come la slide 14 */
.contact .contact__title{ color:var(--p-yellow); }
.contact .contact__title em{ color:var(--p-pink-3); }
.contact__lead{ color:rgba(255,255,255,.66); }
.contact__lead em{ color:#fff; }
.contact__mail{ color:#fff; }
.contact__mail::after{ background:var(--p-magenta); }

.footer{ color:var(--p-text-2); border-top-color:var(--p-line); background:var(--p-bg); }

/* pagina casi studio */
.crumbs{ color:var(--p-text-2); }
.crumbs a{ border-bottom-color:var(--p-line); }
.cs-hero__title{ color:var(--p-ink); }
.cs-index a{ border-color:var(--p-line); background:#fff; }
.cs-index a:hover{ background:var(--p-magenta); color:#fff; border-color:var(--p-magenta); }
.cs-index a:hover b{ color:var(--p-yellow); }
.cs-index b{ color:var(--p-magenta); }
.case__meta{ color:var(--p-magenta); }
.case__stats, .case__stats div, .case__stats div:nth-child(3n+2), .case__stats div:nth-child(3n+3), .case__stats div:nth-child(2n){ border-color:var(--p-line); }
.section--tint .case__stats, .section--tint .case__stats div{ border-color:#DAD5EE; }
.case__stats dt{ color:var(--p-ink); }
.case__why{ border-left-color:var(--p-magenta); }
.case__why span{ color:var(--p-magenta); }

/* ============================================================
   SERVIZI — carte che si impilano
   Ogni carta resta ferma in alto; la successiva le sale sopra
   e quella sotto arretra (scala e ombra dal JS: --cover).
   ============================================================ */
.stack{ position:relative; padding-bottom:4vh; }
.stack__card{
  --cover:0;
  position:sticky;
  top:calc(clamp(5.5rem,13vh,8rem) + var(--i) * 1.6rem);
  min-height:min(72vh,560px);
  margin-bottom:clamp(3rem,10vh,6rem);
  border-radius:28px;
  padding:clamp(1.6rem,4vw,3.4rem);
  display:grid; grid-template-columns:1.15fr .85fr; gap:2rem;
  overflow:hidden;
  transform-origin:50% 0;
  transform:scale(calc(1 - var(--cover) * .06));
  box-shadow:0 -18px 50px -30px rgba(0,0,0,.55);
  will-change:transform;
}
.stack__card:last-child{ margin-bottom:0; }
/* velo che scurisce la carta man mano che viene coperta */
.stack__card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--p-ink); opacity:calc(var(--cover) * .45);
}

.stack__card--yellow { background:var(--p-yellow);  color:var(--p-ink); }
.stack__card--magenta{ background:var(--p-magenta); color:#fff; }
.stack__card--violet { background:var(--p-violet);  color:#fff; }
.stack__card--pink   { background:var(--p-pink);    color:var(--p-ink); }

.stack__main{ display:flex; flex-direction:column; justify-content:space-between; gap:2rem; position:relative; z-index:1; }
.stack__count{ font-size:.74rem; letter-spacing:.24em; }
.stack__count i{ font-style:normal; opacity:.55; }
.stack__title{
  font-family:var(--ff-display); font-weight:400;
  font-size:clamp(3rem,8.5vw,8rem); line-height:.9; letter-spacing:-.03em; margin:0;
}
.stack__desc{ margin:0; max-width:34ch; font-size:clamp(1.02rem,1.45vw,1.3rem); line-height:1.55; }

.stack__side{ position:relative; z-index:1; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end; gap:1.4rem; }
.stack__big{
  font-family:var(--ff-display); font-style:italic;
  font-size:clamp(7rem,19vw,17rem); line-height:.8;
  color:transparent; -webkit-text-stroke:1.5px #fff; opacity:.55;
}
.stack__tags{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.5rem; max-width:360px; }
.stack__tags li{
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid currentColor; border-radius:999px; padding:.5rem .95rem;
  opacity:0; transform:translateY(14px);
  transition:opacity .6s var(--ease), transform .7s var(--ease);
}
.stack__card.is-on .stack__tags li{ opacity:.9; transform:none; }
.stack__card.is-on .stack__tags li:nth-child(2){ transition-delay:.07s; }
.stack__card.is-on .stack__tags li:nth-child(3){ transition-delay:.14s; }
.stack__card.is-on .stack__tags li:nth-child(4){ transition-delay:.21s; }
.stack__card.is-on .stack__tags li:nth-child(5){ transition-delay:.28s; }
.stack__card--yellow .stack__count, .stack__card--pink .stack__count{ color:var(--p-magenta); }
.stack__card--yellow .stack__big, .stack__card--pink .stack__big{ color:transparent; -webkit-text-stroke-color:var(--p-magenta); }

@media(max-width:820px){
  .stack__card{
    grid-template-columns:1fr; gap:1.4rem;
    top:calc(5.2rem + var(--i) * 1rem);
    min-height:min(68vh,520px); border-radius:22px;
  }
  .stack__side{ align-items:flex-start; flex-direction:column-reverse; }
  .stack__tags{ justify-content:flex-start; }
  .stack__big{ position:absolute; right:-.5rem; bottom:-1rem; font-size:9rem; opacity:.28; }
}
@media (prefers-reduced-motion: reduce){
  .stack__card{ position:relative; top:auto; transform:none; }
  .stack__card::after{ display:none; }
  .stack__tags li{ opacity:.9; transform:none; }
}

/* ============================================================
   VERSIONE CORTA — hero a tre scene e sezioni compatte
   ============================================================ */

/* --- hero, scena 01: nome e "la te digitale." --- */
/* VIVIEN | STOCCHINO: stessa riga, lei in mezzo */
.cx__name{ font-size:clamp(3rem,8.4vw,8.8rem); }
.cx__name--l{ top:40%; }
.cx__name--r{ top:40%; font-style:normal; }
.cx__tagline{
  position:absolute; margin:0; right:var(--edge);
  top:calc(40% + min(7.1vw, 7.4rem) + .9rem);
  font-family:var(--ff-display); font-size:clamp(1.4rem,2.6vw,2.5rem);
  line-height:1; color:var(--navy-soft);
}
.cx__tagline em{ font-style:italic; }

/* --- hero, scena 02: il servizio in tre righe --- */
.cx__service{
  position:absolute; margin:0; right:var(--edge); top:50%;
  transform:translateY(-50%);
  width:min(28vw,420px);
  font-size:clamp(.96rem,1.15vw,1.1rem); line-height:1.7; color:var(--ink);
  background:rgba(255,255,255,.84);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-radius:18px; padding:1.3rem 1.5rem;
  box-shadow:0 24px 50px -36px rgba(20,28,46,.45);
}
.cx__service strong{ font-weight:600; color:var(--ink); }

/* --- hero, scena 03: "Mettiamoci all'opera" + parole che salgono --- */
.cx__mid{
  top:3.6%; font-style:normal; color:var(--ink);
  font-size:clamp(1.6rem,2.7vw,2.6rem); line-height:1.1;
}
.cx__lanes{ position:absolute; inset:0; pointer-events:none; }
.cx__lane{
  position:absolute; top:13%; bottom:3%;
  width:170px; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
}
/* tre corsie. Quella di sinistra parte sotto il portatile, cosi' le
   parole non finiscono dietro il coperchio. Entrano una dopo l'altra:
   --in (0-1) lo calcola il JS dallo scorrimento. */
.cx__lane{ opacity:var(--in,0); transform:translateY(calc((1 - var(--in,0)) * 36px)); }
.cx__lane--l { left:3.5%; top:55%; bottom:3%; }
.cx__lane--r1{ right:calc(2.5% + 186px); }
.cx__lane--r2{ right:2.5%; }
/* schermi medi: tra fotocamera e bordo c'e' posto per una corsia sola */
@media(min-width:821px) and (max-width:1100px){
  .cx__lane--r2{ display:none; }
  .cx__lane--r1{ right:2.5%; }
}
.cx__lane-run{
  display:flex; flex-direction:column; align-items:center;
  gap:1rem; padding-bottom:1rem;          /* = gap: il giro si richiude senza scatti */
  animation:laneUp var(--dur,34s) linear infinite;
}
.cx__lane-run span{
  background:rgba(255,255,255,.66);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(20,28,46,.1); border-radius:999px;
  padding:.5rem .95rem; white-space:nowrap;
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink);
}
@keyframes laneUp{ to{ transform:translateY(-50%); } }
@keyframes laneX{ to{ transform:translateX(-50%); } }

.cx{ height:440vh; }

@media(max-width:820px){
  .cx{ height:400vh; }

  /* sul telefono ai lati non c'e' spazio: nome e cognome salgono sopra la testa */
  .cx__name{ font-size:19vw; }
  .cx__name--l{ top:calc(.9rem + 44px + 3.2rem); left:var(--edge); right:auto; }   /* sotto i ruoli, con respiro */
  .cx__name--r{ top:calc(.9rem + 44px + 3.2rem + 16.5vw); right:var(--edge); left:auto; }
  .cx__tagline{ top:calc(.9rem + 44px + 3.2rem + 33vw + .5rem); font-size:1.45rem; }

  .cx__service{
    top:12vh; transform:none;
    left:var(--edge); right:var(--edge); width:auto;
    font-size:1rem; line-height:1.6;
    background:none; backdrop-filter:none; -webkit-backdrop-filter:none;
    border-radius:0; padding:0; box-shadow:none;
  }

  .cx__mid{ top:15%; font-size:1.65rem; }   /* sotto il logo, al centro dello spazio libero */
  .cx__lanes{ inset:auto; left:0; right:0; top:22%; display:flex; flex-direction:column; gap:.55rem; }
  .cx__lane{
    position:relative; top:auto; bottom:auto; left:auto; right:auto;
    width:100%;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  }
  .cx__lane--l, .cx__lane--r1, .cx__lane--r2{ left:auto; right:auto; top:auto; bottom:auto; }
  .cx__lane-run{
    flex-direction:row; width:max-content;
    gap:.5rem; padding:0 .5rem 0 0;
    animation-name:laneX;
  }
  .cx__lane:nth-child(even) .cx__lane-run{ animation-direction:reverse; }
  .cx__lane-run span{ font-size:.58rem; padding:.42rem .75rem; }
}

/* --- etichette usate come titolo di sezione --- */
h2.label{ font-weight:400; margin-top:0; }

/* --- il punto da cui parto: sfondo burro --- */
.section--butter{ background:#FFF4C4; }
.section--butter .thesis__body{ color:var(--p-ink-2); }
.section--butter .thesis__body em{ font-family:var(--ff-display); font-size:1.15em; color:var(--p-magenta); }
.section--butter .stats--light .stat__l{ color:var(--p-ink-2); }

/* --- servizi: righe finali --- */
.services__extra{ margin:.7rem 0 0; font-size:.88rem; letter-spacing:.02em; color:rgba(255,255,255,.55); }

/* --- chi sono --- */
.about__title{
  font-family:var(--ff-display); font-weight:400;
  font-size:clamp(1.9rem,4.4vw,4rem); line-height:1.05; letter-spacing:-.02em;
  margin:0 0 clamp(2.2rem,5vh,3.5rem); color:var(--p-ink);
}
.about__title em{ font-style:italic; color:var(--p-violet); }
.about__grid{ display:grid; grid-template-columns:1fr 1.35fr; gap:clamp(2rem,5vw,5rem); align-items:start; }
.about__lead{
  margin:0; max-width:34ch; font-family:var(--ff-display); font-size:clamp(1.4rem,2.3vw,2rem);
  line-height:1.28; color:var(--p-ink);
}
.about__body{ margin:0; font-size:clamp(1rem,1.15vw,1.08rem); line-height:1.85; color:var(--p-text); max-width:62ch; }
@media(max-width:860px){ .about__grid{ grid-template-columns:1fr; } }

/* --- due modi di lavorare --- */
.modes__grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.mode{
  border-radius:26px; padding:clamp(2rem,5vw,4rem);
  min-height:clamp(200px,28vh,300px);
  display:flex; flex-direction:column; justify-content:space-between; gap:2rem;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.mode:hover{ transform:translateY(-6px); box-shadow:0 30px 60px -36px rgba(26,22,51,.55); }
.mode h3{ margin:0; font-family:var(--ff-display); font-weight:400; font-size:clamp(2.2rem,5vw,4.4rem); line-height:.95; letter-spacing:-.02em; }
.mode p{ margin:0; font-size:clamp(1.05rem,1.5vw,1.3rem); }
.mode--full{ background:var(--p-magenta); color:#fff; }
.mode--content{ background:var(--p-yellow); color:var(--p-ink); }
@media(max-width:760px){ .modes__grid{ grid-template-columns:1fr; } }

/* --- come si parte: quattro passi in riga --- */
.steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--p-line);
}
.steps__item{ padding:1.8rem 1.6rem 2rem 0; }
.steps__item + .steps__item{ padding-left:1.6rem; border-left:1px solid var(--p-line); }
.steps__n{ font-family:var(--ff-display); font-size:clamp(2.6rem,4vw,3.6rem); line-height:1; color:var(--p-magenta); }
.steps__item h3{ margin:1rem 0 .6rem; font-family:var(--ff-display); font-weight:400; font-size:clamp(1.35rem,1.9vw,1.7rem); color:var(--p-ink); }
.steps__item p{ margin:0; color:var(--p-text); line-height:1.65; font-size:.96rem; }
.steps__fit{
  margin:clamp(2.4rem,6vh,3.6rem) 0 0; max-width:62ch;
  font-family:var(--ff-display); font-style:italic; font-size:clamp(1.2rem,1.9vw,1.6rem);
  line-height:1.35; color:var(--p-violet);
}
@media(max-width:900px){
  .steps{ grid-template-columns:1fr 1fr; }
  .steps__item, .steps__item + .steps__item{ padding:1.5rem 1rem 1.5rem 0; border-left:0; border-bottom:1px solid var(--p-line); }
  .steps__item:nth-child(even){ padding-left:1rem; border-left:1px solid var(--p-line); }
}
@media(max-width:520px){
  .steps{ grid-template-columns:1fr; }
  .steps__item, .steps__item:nth-child(even){ padding:1.4rem 0; border-left:0; }
}

/* --- sezioni più corte --- */
.section{ padding-top:clamp(4.5rem,11vh,8rem); padding-bottom:clamp(4.5rem,11vh,8rem); }


/* --- chi sono: citazione firmata --- */
.about{ text-align:center; }
.about__label{ justify-content:center; }
.about .about__title{
  font-size:clamp(1.3rem,2.4vw,2.1rem); line-height:1.25;
  max-width:36ch; margin:0 auto clamp(2rem,5vh,3rem);
}
.about__quote{ margin:0 auto; max-width:900px; }
.about__mark{
  display:block; height:.5em;
  font-family:var(--ff-display); font-size:clamp(6rem,12vw,10rem); line-height:.9;
  color:var(--p-magenta);
}
.about__quote p{
  margin:0; font-family:var(--ff-display);
  font-size:clamp(1.8rem,3.9vw,3.4rem); line-height:1.14; letter-spacing:-.015em;
  color:var(--p-ink);
}
.about__sign{
  margin-top:clamp(1.4rem,3.5vh,2.2rem);
  font-family:var(--ff-display); font-style:italic;
  font-size:clamp(1.5rem,2.6vw,2.3rem); color:var(--p-magenta);
}

/* --- hero, scena 2: il testo si accende riga per riga (classi dal JS) --- */
.cx__service .w{ color:rgba(20,28,46,.16); transition:color .55s var(--ease); }
.cx__service .w.is-lit{ color:var(--ink); }
@media (prefers-reduced-motion: reduce){ .cx__service .w{ color:var(--ink); } }


/* --- logo --- */
.nav__brand{ display:inline-flex; align-items:center; gap:.7rem; }
.nav__logo{ height:30px; width:auto; }
.cx__logo{
  position:absolute; z-index:7; pointer-events:none;
  top:clamp(1.1rem,2.6vh,1.8rem); left:var(--edge);
  width:clamp(88px,8vw,128px); height:auto;
}
.footer{ align-items:center; }
.footer__logo{ height:28px; width:auto; }
@media(max-width:820px){
  .cx__logo{ left:50%; transform:translateX(-50%); top:.9rem; width:68px; }
  .cx__kicker{ top:calc(.9rem + 44px); }
  .nav__logo{ height:24px; }
}


/* --- hero, scena 2: creo / scrivo / pubblico / funziona --- */
.cx__claimimg{
  position:absolute; left:var(--edge); top:50%; transform:translateY(-50%);
  width:min(30vw,440px);
}
.cx__claimimg img{
  display:block; height:auto; margin-top:2.9%;
  opacity:0; transform:translateY(22px);
  transition:opacity .6s var(--ease), transform .8s var(--ease);
}
.cx__claimimg img:first-child{ margin-top:0; }
.cx__claimimg img.is-on{ opacity:1; transform:none; }
@media(max-width:820px){
  .cx__claimimg{ left:50%; top:11vh; transform:translateX(-50%); width:66vw; }
}
@media (prefers-reduced-motion: reduce){ .cx__claimimg img{ opacity:1; transform:none; } }


/* --- hero sul giallo burro delle foto (#FDF4D2): le foto sono state
       scattate su questo fondo, cosi' i bordi dello scontorno spariscono --- */
.cx__stage{ background:#FDF4D2; }
.cx__bg{ background:radial-gradient(120% 90% at 50% 30%, #FFF8E0 0%, #FDF4D2 55%, #F8EDC6 100%); }
.cx__bg::after{ display:none; }
.cx__halo{ background:radial-gradient(circle, rgba(255,251,236,.9), rgba(255,251,236,0) 64%); }
.cx__stage::after{ background:linear-gradient(180deg, rgba(248,237,198,0), rgba(248,237,198,.9)); }
.section--butter{ background:#FDF4D2; }


/* --- pagina privacy --- */
.legal{ padding-top:clamp(7rem,16vh,10rem); max-width:820px; margin:0 auto; color:var(--p-ink); }
.legal__title{ font-family:var(--ff-display); font-weight:400; font-size:clamp(2.4rem,6vw,4.4rem); line-height:1; margin:0 0 .6rem; }
.legal__updated{ margin:0 0 2.4rem; font-size:.8rem; color:var(--p-text-2); }
.legal h2{ font-family:var(--ff-display); font-weight:400; font-size:clamp(1.5rem,2.6vw,2rem); margin:2.6rem 0 .8rem; color:var(--p-ink); }
.legal h3{ font-size:1rem; font-weight:600; margin:1.4rem 0 .4rem; }
.legal p, .legal li{ line-height:1.75; color:var(--p-text); }
.legal ul{ padding-left:1.2rem; }
.legal a{ color:var(--p-magenta); border-bottom:1px solid currentColor; }
.legal strong{ color:var(--p-ink); font-weight:600; }


/* --- hero, testo del servizio: stesso blu-viola dei testi su giallo burro --- */
.cx__service, .cx__service strong{ color:var(--p-ink-2); }
.cx__service .w{ color:rgba(59,46,122,.18); }
.cx__service .w.is-lit{ color:var(--p-ink-2); }
@media (prefers-reduced-motion: reduce){ .cx__service .w{ color:var(--p-ink-2); } }

/* ============================================================
   MOVIMENTO RIDOTTO
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  .reveal-line > span{ transform:none; }
  .fade-up{ opacity:1; transform:none; }
  .cx{ height:180vh; }
}