/* ==========================================================================
   MARS · PROGETTI — foglio della sola pagina progetti

   Convive con liquid.css (nav, footer, fondali) senza sovrascriverlo:
   tutte le classi sono prefissate `p-`.
   Principio: la prova è il protagonista. Il numero pesa più del tag.
   ========================================================================== */

.p-page{position:relative;z-index:1}
/* il contenuto usa davvero il desktop: a 1920 restano ~120px per lato,
   non 220. La misura resta leggibile perché ogni blocco di testo lungo
   ha comunque il proprio max-width in ch. */
.p-wrap{width:100%;max-width:1680px;margin-inline:auto;padding-inline:clamp(20px,3.6vw,72px)}
.p-sec{position:relative;padding-block:clamp(56px,6vw,104px)}
.p-sec--sm{padding-block:clamp(40px,4vw,68px)}

/* ---------- movimento: leggero, e solo se il motore parte ---------- */
.p-js .p-rv,.p-js .p-case{
  opacity:0;transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);
}
.p-js .p-rv.is-in,.p-js .p-case.is-in{opacity:1;transform:none}

/* ==========================================================================
   HERO
   ========================================================================== */
/* apre una pagina importante: il titolo pesa, ma il primo caso resta
   vicino. Il vuoto fra hero e casi lo paga la hero, non la sezione dopo. */
.p-hero{padding-top:clamp(124px,17vh,210px);padding-bottom:clamp(30px,3.4vw,56px)}
.p-hero h1{
  margin-top:clamp(14px,1.6vw,22px);
  font-size:clamp(40px,6.4vw,104px);font-weight:700;line-height:1;
  letter-spacing:-.036em;max-width:15ch;text-wrap:balance;
}
.p-hero h1 em{font-style:italic;font-weight:300;color:var(--lime);letter-spacing:-.026em}
.p-hero__lead{
  margin-top:clamp(20px,2.2vw,30px);max-width:50ch;
  font-size:clamp(17.5px,1.5vw,23px);line-height:1.5;color:var(--text-soft);
}
.p-hero__cta{margin-top:clamp(24px,2.6vw,36px);display:flex;flex-wrap:wrap;gap:12px}

/* ==========================================================================
   CASI STUDIO
   ========================================================================== */
/* ritmo: 80–160px fra un caso e il successivo, non centinaia di vh */
.p-casi{display:flex;flex-direction:column;gap:clamp(56px,7vh,132px)}

.p-case{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(24px,3.4vw,72px);align-items:center;
}
/* l'alternanza deve leggersi a colpo d'occhio, non intuirsi */
.p-case:nth-child(even){grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
.p-case:nth-child(even) .p-case__mediawrap{order:2}

.p-case__media{
  position:relative;overflow:hidden;border-radius:clamp(20px,1.8vw,30px);
  background:rgba(255,255,255,.04);
}
/* il visual è protagonista: cresce con la viewport senza deformarsi */
.p-case__media img{
  width:100%;height:100%;min-height:clamp(300px,42vw,660px);
  max-height:82vh;object-fit:cover;display:block;
}
/* quando il cliente è riservato il visual è il risultato stesso */
.p-case__figure{
  display:flex;flex-direction:column;justify-content:center;gap:14px;
  min-height:clamp(300px,42vw,660px);max-height:82vh;padding:clamp(30px,3.4vw,64px);
  background:linear-gradient(150deg,#0A1D3F,#07152F 62%,#050D1D);
}
.p-case__figure-n{
  font-size:clamp(46px,5.4vw,96px);font-weight:700;line-height:1;letter-spacing:-.042em;
  white-space:nowrap;color:var(--text);
}
.p-case__figure-n span{font-size:.56em;font-weight:600;margin-left:.05em}
.p-case__figure-k{font-size:clamp(15px,1.15vw,17.5px);color:var(--text-soft);max-width:24ch}
.p-case__figure-s{font-size:clamp(15px,1.15vw,17.5px);color:var(--lime);font-weight:600;max-width:26ch}

.p-case__body{display:flex;flex-direction:column}
.p-case__meta{
  display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;
  font-size:clamp(13px,1vw,15px);letter-spacing:-.004em;color:var(--text-mute);
}
.p-case__meta b{font-weight:600;color:var(--lime)}
.p-case__client{
  margin-top:clamp(12px,1.2vw,18px);
  font-size:clamp(30px,3.5vw,58px);font-weight:700;
  letter-spacing:-.032em;line-height:1.04;
}
.p-case__client i{
  display:inline-block;margin-left:.5em;vertical-align:middle;
  font-style:normal;font-size:13.5px;font-weight:400;letter-spacing:normal;
  color:var(--text-mute);
}
.p-case__result{
  margin-top:clamp(14px,1.5vw,22px);
  font-size:clamp(17px,1.5vw,24px);line-height:1.42;letter-spacing:-.018em;color:var(--text);
  max-width:40ch;
}
/* la cifra che regge il caso si stacca dalla frase */
.p-case__result .p-forte{font-weight:700;color:var(--lime)}

/* le metriche pesano più dei tag: è la regola della pagina.
   Grandi abbastanza da leggersi scorrendo, senza diventare un cruscotto. */
.p-metrics{
  display:flex;flex-wrap:wrap;gap:clamp(20px,2.4vw,46px);
  margin-top:clamp(20px,2.2vw,32px);padding-top:clamp(18px,1.8vw,24px);
  border-top:2px solid var(--lime);
}
.p-metric b{
  display:block;font-size:clamp(26px,2.8vw,46px);font-weight:700;
  letter-spacing:-.034em;line-height:1.02;color:var(--text);
}
.p-metric span{
  display:block;margin-top:6px;font-size:clamp(13px,1vw,14.5px);line-height:1.35;
  color:var(--text-mute);max-width:20ch;
}
.p-case__ctx{
  margin-top:clamp(18px,1.9vw,26px);
  font-size:clamp(15.5px,1.18vw,17.5px);line-height:1.62;color:var(--text-soft);max-width:50ch;
}
.p-case__tags{
  margin-top:12px;font-size:13px;letter-spacing:.01em;
  color:rgba(242,247,251,.45);max-width:52ch;
}
.p-case__open{
  align-self:flex-start;margin-top:clamp(20px,2.4vw,30px);
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 24px;border-radius:999px;
  font-size:15px;font-weight:600;letter-spacing:-.012em;
  color:var(--text);border:1px solid rgba(255,255,255,.28);
  transition:background-color .35s ease,color .35s ease,border-color .35s ease;
}
.p-case__open svg{width:16px;height:16px;transition:transform .35s ease}
.p-case__open:hover{background:var(--lime);border-color:var(--lime);color:#07152F}
.p-case__open:hover svg{transform:translateX(4px)}

/* ==========================================================================
   VISUAL NON RIFERITI AL CLIENTE
   ========================================================================== */
.p-case__mediawrap{display:flex;flex-direction:column;gap:10px}
.p-illu{
  font-size:12px;line-height:1.45;color:rgba(242,247,251,.5);max-width:46ch;
}

/* ==========================================================================
   SUCCEDE ANCHE QUESTO — i messaggi che arrivano mentre il lavoro è in corso

   Niente pin, niente spacer, niente progresso calcolato a mano: era quello
   a generare 4.000px di scroll quasi vuoto. Qui la sezione occupa solo
   l'altezza delle sue citazioni.
   · desktop → il titolo resta sticky a sinistra, le frasi scorrono a
               destra. Lo schermo non è mai vuoto: c'è sempre il titolo.
   · sotto i 1000px → flusso naturale, una frase sotto l'altra.
   L'unica differenza fra i due è `position:sticky`, che il browser
   gestisce da solo. Nessuno stato JS da sincronizzare.
   ========================================================================== */
.p-feed__grid{
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(30px,4.6vw,90px);align-items:start;
}
.p-feed__side{position:sticky;top:clamp(96px,13vh,132px)}
.p-feed__h{
  margin-top:14px;font-size:clamp(34px,4.6vw,76px);font-weight:700;
  line-height:1.02;letter-spacing:-.034em;text-wrap:balance;
}
.p-feed__lead{
  margin-top:clamp(16px,1.8vw,26px);max-width:34ch;
  font-size:clamp(16px,1.25vw,19px);line-height:1.55;color:var(--text-mute);
}

.p-feed__list{
  padding:0;list-style:none;
  display:flex;flex-direction:column;gap:clamp(46px,5.6vh,88px);
}
.p-feed__item figure{margin:0}
.p-feed__q{
  font-size:clamp(25px,min(3.1vw,4.6vh),50px);
  font-weight:600;line-height:1.13;letter-spacing:-.03em;
  color:var(--text);max-width:22ch;text-wrap:pretty;
}
.p-feed__q em{font-style:italic;font-weight:300;color:var(--lime);letter-spacing:-.022em}
.p-feed__by{
  margin-top:clamp(12px,1.3vw,18px);
  font-size:13.5px;line-height:1.4;color:var(--text-mute);
}

/* la frase che stai leggendo è piena, le altre restano leggibili ma
   arretrano: è questo a dare l'avanzamento, non una barra di progresso */
.p-js .p-feed__item{transition:opacity .5s ease}
.p-js .p-feed__item.is-lontana{opacity:.34}

.p-feed__end{
  margin-top:clamp(40px,5vh,80px);max-width:44ch;
  font-size:clamp(16px,1.3vw,20px);line-height:1.5;color:var(--text-mute);
}

/* ==========================================================================
   SETTORI — lista editoriale grande con anteprima al passaggio
   ========================================================================== */
.p-settori__h{
  margin-top:16px;font-size:clamp(34px,5vw,82px);font-weight:700;
  line-height:1.02;letter-spacing:-.034em;
}
.p-settori__h em{font-style:italic;font-weight:300;color:var(--lime);letter-spacing:-.026em}
.p-settori__lead{
  margin-top:clamp(18px,2vw,28px);max-width:46ch;
  font-size:clamp(17px,1.4vw,22px);line-height:1.5;color:var(--text-soft);
}
.p-settori__lead b{font-weight:700;color:var(--text)}

.p-sectors{position:relative;margin-top:clamp(34px,4vw,64px)}
.p-sectors__list{padding:0;list-style:none;border-top:1px solid rgba(255,255,255,.14)}
.p-sector{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(14px,2.4vw,40px);align-items:baseline;
  padding-block:clamp(16px,2vw,30px);
  border-bottom:1px solid rgba(255,255,255,.14);
  transition:padding-left .4s cubic-bezier(.16,1,.3,1);
}
.p-sector__n{font-size:13px;color:var(--text-mute);font-variant-numeric:tabular-nums}
.p-sector__t{
  font-size:clamp(24px,3.6vw,58px);font-weight:700;letter-spacing:-.03em;line-height:1.02;
  color:var(--text-soft);transition:color .35s ease;
}
.p-sector__c{font-size:13px;color:var(--text-mute);font-variant-numeric:tabular-nums;white-space:nowrap}
.p-sector__c i{font-style:normal;margin-left:.15em;letter-spacing:.02em}
@media (hover:hover) and (pointer:fine){
  .p-sector[data-shot]:hover{padding-left:14px}
  .p-sector:hover .p-sector__t{color:var(--text)}
  .p-sector[data-shot]:hover .p-sector__n{color:var(--lime)}
}
/* corsia riservata all'anteprima: i conteggi non finiscono mai sotto la foto */
@media (min-width:820px){
  .p-sector{padding-right:calc(min(320px,26vw) + clamp(24px,3vw,48px))}
}
/* una sola anteprima, riusata: il costo non cresce con le categorie */
.p-sectors__shot{
  position:absolute;top:0;right:0;width:min(320px,26vw);aspect-ratio:1;
  border-radius:20px;overflow:hidden;pointer-events:none;
  opacity:0;transform:scale(.96);
  transition:opacity .35s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1);
}
.p-sectors__shot.is-on,
.p-sectors:has(.p-sector[data-shot]:hover) .p-sectors__shot{opacity:1;transform:none}
.p-sectors__shot img{width:100%;height:100%;object-fit:cover;display:block}

.p-note{
  margin-top:clamp(34px,4vw,56px);
  font-size:13.5px;line-height:1.6;color:rgba(242,247,251,.62);max-width:56ch;
}

/* ==========================================================================
   CHIUSURA — l'ultimo capitolo, non un blocco prima del footer
   ========================================================================== */
/* è la conclusione del racconto, non un blocco appeso al footer:
   ha un'altezza minima sua, e il respiro finale è misurato — non è
   il vuoto di prima, che era l'ultima schermata quasi bianca. */
.p-close{
  padding-block:clamp(72px,9vh,140px) clamp(80px,10vh,150px);
  min-height:min(84vh,940px);display:flex;align-items:center;
}
.p-close > .p-wrap{width:100%}
.p-close__bridge{
  font-size:clamp(16.5px,1.4vw,21px);color:var(--text-mute);max-width:46ch;
}
/* da "altri progetti" a "il tuo progetto": una sola riga che cambia */
.p-close__turn{
  position:relative;margin-top:clamp(18px,2vw,28px);
  font-size:clamp(32px,6vw,104px);font-weight:700;line-height:1.02;letter-spacing:-.034em;
}
.p-close__turn span{display:block}
.p-close__a{
  color:var(--text-mute);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);
}
.p-close__b{
  color:var(--lime);font-style:italic;font-weight:300;letter-spacing:-.026em;
  transition:opacity .7s cubic-bezier(.16,1,.3,1) .12s,transform .7s cubic-bezier(.16,1,.3,1) .12s;
}
.p-js .p-close__a{opacity:1}
.p-js .p-close__b{opacity:0;transform:translateY(14px)}
.p-js .is-turned .p-close__a{opacity:.32;transform:translateY(-6px)}
.p-js .is-turned .p-close__b{opacity:1;transform:none}

.p-close__grid{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(28px,4vw,80px);align-items:start;
  margin-top:clamp(38px,4.6vw,76px);
}
.p-close__claim{
  font-size:clamp(24px,2.9vw,46px);font-weight:700;letter-spacing:-.03em;line-height:1.08;
  color:var(--text);
}
.p-close__claim em{font-style:italic;font-weight:300;color:var(--lime);letter-spacing:-.022em}
.p-close__p{
  margin-top:clamp(16px,1.8vw,24px);
  font-size:clamp(16.5px,1.25vw,19px);line-height:1.6;color:var(--text-soft);max-width:46ch;
}
/* i tre passi sono tipografia e filetti: nessuna card */
.p-steps{padding:0;list-style:none;display:flex;flex-direction:column}
.p-steps li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,2vw,34px);
  align-items:baseline;padding-block:clamp(18px,2.1vw,30px);
  border-top:1px solid rgba(255,255,255,.14);
}
.p-steps li:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.p-steps span{
  font-size:clamp(22px,2.4vw,38px);font-weight:300;font-style:italic;
  letter-spacing:-.03em;color:var(--lime);
  /* larghezza fissa: 01/02/03 restano incolonnati anche senza cifre tabulari */
  display:inline-block;width:2.4ch;font-variant-numeric:tabular-nums;
}
.p-steps p{font-size:clamp(17px,1.5vw,24px);line-height:1.3;letter-spacing:-.018em;color:var(--text)}

/* la CTA sta sotto l'argomento, non sospesa fra le due colonne:
   così le colonne si pareggiano e sparisce il vuoto prima del footer */
.p-close__cta{
  margin-top:clamp(30px,3.4vw,48px);display:flex;flex-wrap:wrap;gap:12px;
}
.p-close__micro{margin-top:16px;font-size:14.5px;color:var(--text-mute)}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* ---------- gradino intermedio: il tablet non è un desktop stretto ----------
   Il caso resta a due colonne fino a 820px: sotto quella soglia il tablet
   ereditava l'impilamento del telefono e la pagina arrivava a 25 schermate,
   più lunga che su un 390px. */
@media (max-width:1180px) and (min-width:820px){
  .p-case{gap:clamp(20px,2.8vw,42px)}
  .p-case__media img,.p-case__figure{min-height:clamp(260px,34vw,480px)}
  .p-case__client{font-size:clamp(26px,3.2vw,40px)}
  .p-metric b{font-size:clamp(23px,2.6vw,34px)}
  .p-metrics{gap:18px 26px}
  .p-feed__grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(26px,3.4vw,48px)}
}

/* sotto i 1000px il titolo smette di essere sticky: su schermi bassi
   occuperebbe metà viewport lasciando poco spazio alle citazioni */
@media (max-width:1000px){
  .p-feed__grid{grid-template-columns:minmax(0,1fr);gap:clamp(28px,5vw,44px)}
  .p-feed__side{position:static}
  .p-feed__lead{max-width:48ch}
}

@media (max-width:819px){
  /* telefono: flusso naturale, immagine → titolo → numeri → testo → CTA */
  .p-case{grid-template-columns:minmax(0,1fr);gap:22px}
  .p-case:nth-child(even){grid-template-columns:minmax(0,1fr)}
  .p-case:nth-child(even) .p-case__mediawrap{order:0}
  /* impilata, una foto verticale a piena larghezza arriverebbe a ~890px:
     senza un tetto la pagina passava da 18 a 24 schermate. Il crop la
     tiene in proporzione, object-fit:cover fa il resto. */
  .p-case__media img{
    min-height:clamp(230px,46vw,330px);max-height:clamp(300px,86vw,460px);
  }
  .p-case__figure{min-height:clamp(230px,46vw,330px);max-height:none}
  .p-casi{gap:clamp(52px,9vw,76px)}
  .p-sectors__shot{display:none}
  .p-close{min-height:0;display:block}
  .p-close__grid{grid-template-columns:minmax(0,1fr);gap:30px}
}

@media (max-width:560px){
  .p-sector{grid-template-columns:auto minmax(0,1fr);gap:12px 16px}
  .p-sector__c{grid-column:2;font-size:12px}
  .p-metrics{gap:18px 26px}
  .p-metric b{font-size:clamp(23px,7.4vw,30px)}
}

/* ==========================================================================
   MOVIMENTO RIDOTTO
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;transition-duration:.001ms !important;
  }
  .p-js .p-rv,.p-js .p-case{opacity:1 !important;transform:none !important}
  /* niente racconto sticky e niente frasi in secondo piano:
     tutto leggibile nel flusso, nello stesso ordine */
  .p-feed__side{position:static}
  .p-feed__item{opacity:1 !important}
}