/* ── SHARED PAGES (about, contact, work) ──
   Stessi token del sito (--fg/--bg/--pad-x/--sec-y), non valori fissi:
   così ereditano automaticamente palette e spaziature della home. */
.page-hero{
  padding:calc(var(--nav-h) + 40px) var(--pad-x) var(--sec-y-sm);
}
.page-hero .lbl{
  margin-bottom:18px;
}
.page-hero .sec-title .sw-i.in{
  transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .6s ease;
}
.page-body{
  padding:0 var(--pad-x) var(--sec-y);
  max-width:900px;
}
.ab-p{font-size:clamp(19px,2vw,24px);line-height:1.65;color:var(--fg);margin-bottom:28px;max-width:760px;}
.ab-p:last-child{margin-bottom:0;}
.ab-p strong{font-weight:700;}

/* reveal generico: opacity/translate a riposo, .in lo apre */
.reveal{opacity:0;transform:translateY(24px);transition:opacity 1s ease,transform 1s cubic-bezier(.16,1,.3,1);}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal-stagger > *{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1);}
.reveal-stagger > *.in{opacity:1;transform:translateY(0);}

/* Contact */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:40px 60px;
}
.contact-item{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.contact-item .pj-info-label{
  font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--fg);opacity:.6;
}
.contact-value{
  font-family:'New Title','New Title Static',sans-serif;font-weight:700;
  font-size:clamp(20px,2.5vw,32px);
  color:var(--fg);
  text-decoration:none;
  transition:opacity .2s,color .7s ease;
}
.contact-value:hover{opacity:.6;}

/* ── WORK — indice progetti diviso per tipologia ── */
.work-group{padding:0 var(--pad-x) var(--sec-y-sm);}
.work-group-hd{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding-bottom:20px;margin-bottom:36px;border-bottom:2px solid var(--sep);
}
.work-group-title{
  font-family:'New Title','New Title Static',sans-serif;font-weight:700;
  font-size:clamp(28px,4vw,52px);letter-spacing:-.01em;color:var(--fg);
}
.work-group-count{
  font-size:var(--label-size);font-weight:var(--label-weight);letter-spacing:var(--label-track);
  text-transform:uppercase;color:var(--fg);opacity:.5;white-space:nowrap;
}
.work-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap);
}
.work-card{
  position:relative;display:block;text-decoration:none;overflow:hidden;
  border-radius:14px;aspect-ratio:4/3;background:rgba(236,228,195,.08);
}
.work-card-img{
  position:absolute;inset:0;background-size:cover;background-position:center;
  background-color:rgba(236,228,195,.12);
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.work-card:hover .work-card-img{transform:scale(1.05);}
.work-card-ov{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:28px;background:linear-gradient(to top, rgba(10,9,7,.72) 0%, transparent 55%);
}
.work-card-cat{
  font-size:var(--label-size);font-weight:var(--label-weight);letter-spacing:var(--label-track);
  text-transform:uppercase;color:#ECE4C3;opacity:.75;margin-bottom:6px;
}
.work-card-name{
  font-family:'New Title','New Title Static',sans-serif;font-weight:700;
  font-size:clamp(22px,2.6vw,34px);color:#ECE4C3;line-height:1;
}
.work-empty{
  padding:40px var(--pad-x) var(--sec-y);
  font-size:18px;color:var(--fg);opacity:.6;
}

@media(max-width:900px){
  .work-grid{grid-template-columns:1fr;}
}
@media(max-width:768px){
  .page-hero{padding:calc(var(--nav-h) + 16px) 24px 48px;}
  .page-body{padding:0 24px 80px;}
  .contact-grid{grid-template-columns:1fr;gap:32px;}
  .work-group{padding:0 24px var(--sec-y-sm);}
}

/* ── About: la pagina è la fonte, non un riassunto della home ──
   Numeri, citazione e competenze riusano le classi già definite
   (.stats/.sn/.sl, .skills/.sk): stessa lingua, nessun stile nuovo. */
.about-stats{margin:56px 0 8px;gap:36px 30px;}
/* Era nel carattere dei titoli: condensato, interlinea 1.04, kerning
   -.012em. Su una frase intera diventa un muro di lettere strette. Qui
   passa al carattere con cui il sito fa leggere — lo stesso di .ab-p e
   delle recensioni — con l'interlinea che serve a una frase. */
.about-quote{
  margin:48px 0 0;padding:0 0 0 26px;
  border-left:4px solid var(--fg);
  font-family:'DM Sans',sans-serif;font-weight:500;
  font-size:clamp(24px,3vw,40px);line-height:1.28;letter-spacing:-.015em;
  color:var(--fg);max-width:820px;
}
.about-skills{margin-top:48px;display:flex;flex-wrap:wrap;gap:10px;}
.page-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:56px;}

@media(max-width:768px){
  .about-stats{grid-template-columns:1fr 1fr;margin-top:44px;}
  .about-quote{margin-top:40px;padding-left:18px;}
  .about-skills{margin-top:36px;}
  .page-cta{margin-top:44px;}
}

.page-hero{position:relative;}

/* ── About: come lavoro ── */
/* a tutta larghezza: .page-body stringe a 900px, l'accordion no */
.about-process{margin-top:var(--sec-y);max-width:none;}

/* ── About: le recensioni, tutte in fila ── */
.about-reviews{margin-top:var(--sec-y);}
.about-reviews .reviews-track{display:flex;flex-direction:column;gap:8px;margin-top:28px;}
.about-reviews .review-card{border-top:1px solid var(--sep,rgba(236,228,195,.28));padding:30px 0 6px;}
.about-reviews .review-card blockquote{
  margin:0;font:500 clamp(19px,2.1vw,30px)/1.32 'DM Sans',sans-serif;
  letter-spacing:-.02em;color:var(--fg);max-width:60ch;
}
.about-reviews .review-author{margin:0 0 14px;}
.about-reviews .t1-name{margin:0 0 4px;}

@media(max-width:768px){
  .about-process,.about-reviews{margin-top:var(--sec-y-sm,64px);}
}

/* ── Accordion: il titolo è grande, il testo arriva al click ── */
.acc{margin-top:34px;border-top:2px solid var(--sep,rgba(236,228,195,.3));}
.acc-item{border-bottom:2px solid var(--sep,rgba(236,228,195,.3));}
.acc-h{margin:0;}
.acc-btn{
  width:100%;background:none;border:0;padding:clamp(18px,2.4vw,30px) 0;
  display:flex;align-items:baseline;gap:clamp(14px,2.4vw,32px);
  cursor:pointer;text-align:left;color:var(--fg);
}
.acc-btn:focus-visible{outline:3px solid var(--fg);outline-offset:4px;}
.acc-n{
  font-size:12px;font-weight:700;letter-spacing:.18em;
  opacity:.5;flex:none;transition:opacity .4s ease;
}
.acc-t{
  flex:1;
  font-family:'New Title','New Title Static',sans-serif;font-weight:700;
  font-size:clamp(46px,12vw,220px);line-height:.9;letter-spacing:-.02em;
  text-transform:uppercase;
  transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .4s ease;
}
.acc-btn:hover .acc-t{transform:translateX(clamp(6px,1vw,16px));}
/* il segno + che diventa − */
.acc-ico{
  position:relative;flex:none;width:clamp(20px,2.2vw,30px);height:clamp(20px,2.2vw,30px);
  align-self:center;
}
.acc-ico::before,.acc-ico::after{
  content:'';position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;
  background:var(--fg);transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.acc-ico::after{transform:rotate(90deg);}
.acc-item.is-open .acc-ico::after{transform:rotate(0deg);}
.acc-item.is-open .acc-n{opacity:1;}

/* l'altezza la fa la griglia: 0fr -> 1fr, senza misure a mano */
.acc-panel{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .6s cubic-bezier(.16,1,.3,1);
}
.acc-item.is-open .acc-panel{grid-template-rows:1fr;}
.acc-panel-in{overflow:hidden;}
.acc-panel p{
  margin:0;padding:0 0 clamp(22px,2.6vw,34px) 0;
  max-width:62ch;font-size:clamp(17px,1.5vw,21px);line-height:1.6;
  color:var(--fg);opacity:0;transform:translateY(10px);
  transition:opacity .5s ease .1s,transform .5s cubic-bezier(.16,1,.3,1) .1s;
}
.acc-item.is-open .acc-panel p{opacity:.88;transform:none;}

@media(max-width:768px){
  .acc{margin-top:26px;}
  .acc-btn{gap:12px;padding:16px 0;}
}
@media(prefers-reduced-motion:reduce){
  .acc-panel,.acc-panel p,.acc-t,.acc-ico::before,.acc-ico::after{transition-duration:.01ms;}
}

/* Pagina legale: testo lungo, niente fronzoli */
.legal-body p,.legal-body li{font-size:17px;line-height:1.7;color:var(--fg);max-width:70ch;}
.legal-body h2{font-family:'New Title','New Title Static',sans-serif;font-weight:700;
  font-size:clamp(22px,2.4vw,34px);text-transform:uppercase;margin:40px 0 14px;color:var(--fg);}
.legal-body ul{padding-left:22px;margin:0 0 20px;}
.legal-body li{margin-bottom:8px;}
.legal-body a{color:var(--fg);}

/* ── About: la sezione di respiro ──
   Alta due schermate e mezzo: è quello spazio a dare tempo al fondo di
   passare da rosa a viola mentre scorri. Il palco resta fermo, le
   parole si accendono. */
.breathe{height:250vh;position:relative;margin-top:var(--sec-y);}
.breathe-stage{
  position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;justify-content:center;gap:clamp(28px,5vh,64px);
  padding:0 var(--pad-x);
}
.breathe-line{
  margin:0;max-width:20ch;
  font-family:'New Title','New Title Static',sans-serif;font-weight:700;
  font-size:clamp(34px,8.2vw,132px);line-height:.98;letter-spacing:-.02em;
  text-transform:uppercase;color:var(--fg);
}
.breathe-line:nth-child(2){align-self:flex-end;text-align:right;}
.breathe-w{opacity:.16;transition:opacity .18s linear;display:inline-block;}

@media(max-width:768px){
  .breathe{height:220vh;margin-top:var(--sec-y-sm,64px);}
  .breathe-line{max-width:100%;font-size:clamp(30px,9vw,52px);}
  .breathe-line:nth-child(2){align-self:flex-start;text-align:left;}
}
@media(prefers-reduced-motion:reduce){
  .breathe{height:auto;}
  .breathe-stage{position:static;height:auto;padding-block:var(--sec-y-sm,64px);}
  .breathe-w{opacity:1;}
}

/* ── About: l'arco che sale a scoprire la sezione ── */
.arco{height:170vh;position:relative;margin-top:var(--sec-y);}
.arco-stage{position:sticky;top:0;height:100vh;overflow:hidden;}
.arco-shape{
  position:absolute;left:-6vw;right:-6vw;bottom:0;height:150vh;
  /* raggio ellittico: largo quanto la pagina, alto poche decine di vh:
     è questo che lo rende un arco e non un cerchio */
  border-radius:50% 50% 0 0 / 26vh 26vh 0 0;
  background:#3E168B;
  transform:translateY(100%);
  will-change:transform;
}
/* la sezione che l'arco introduce vive nel colore dell'arco: quando ha
   finito di salire, il passaggio è già avvenuto */
.arco-after{
  background:#3E168B;
  --fg:#ECE4C3;
  --sep:rgba(236,228,195,.3);
  color:var(--fg);
  padding-top:clamp(30px,5vw,70px);
  padding-bottom:var(--sec-y);
  margin-top:0;
}

@media(max-width:768px){
  .arco{height:150vh;margin-top:var(--sec-y-sm,64px);}
  .arco-shape{border-radius:50% 50% 0 0 / 14vh 14vh 0 0;left:-10vw;right:-10vw;}
}
@media(prefers-reduced-motion:reduce){
  .arco{height:0;margin:0;}
  .arco-stage{position:static;height:0;}
}

/* ── About: le foto che passano da destra ──
   Uno strato fisso sopra la pagina ma sotto la nav, che non intercetta
   il mouse: le foto passano, il testo resta cliccabile. */
.af-strato{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:2;}
.af-foto{
  position:absolute;top:0;left:0;
  width:clamp(230px,23vw,410px);height:auto;
  filter:grayscale(1) contrast(1.08);
  opacity:0;visibility:hidden;
  will-change:transform,opacity;
}
@media(max-width:1279px){ .af-strato{display:none;} }
@media(prefers-reduced-motion:reduce){ .af-strato{display:none;} }

/* Schermi stretti: la foto non passa sopra il testo, si prende il suo
   posto fra un blocco e l'altro. Il riquadro tiene l'altezza (7/9, il
   formato dei file) cosi' la pagina non salta mentre carica; a
   muoversi e' solo l'immagine dentro. */
.af-slot{
  margin:clamp(30px,7.5vw,52px) 0;
  display:flex;justify-content:flex-start;
  overflow:visible;
}
.af-slot.a-destra{justify-content:flex-end;}
.af-inline{
  display:block;
  width:78%;max-width:430px;
  aspect-ratio:7/9;object-fit:cover;
  filter:grayscale(1) contrast(1.08);
  will-change:transform;
}
@media(min-width:1280px){ .af-slot{display:none;} }
@media(prefers-reduced-motion:reduce){ .af-inline{transform:none!important;} }