/* ═══════════════════════════════════════════════════════════
   LAIO — foglio di stile principale
   1. Token · 2. Base · 3. Navigazione · 4. Home
   5. Blocchi comuni · 6. Portfolio · 7. Progetto
   8. Servizi · 9. Chi sono · 10. Contatti · 11. Utility
   ═══════════════════════════════════════════════════════════ */

/* ─── 1. TOKEN ─────────────────────────────────────────── */
:root{
  --ink:#0E0E0E;
  --paper:#FDFDFC;
  --paper-2:#F1F0EC;
  --signal:#FF3B1F;
  --mute:#8C8C86;
  --line:rgba(14,14,14,.12);
  --line-inv:rgba(255,255,255,.14);

  --display:'Archivo',system-ui,sans-serif;
  --body:'Instrument Sans',system-ui,sans-serif;
  --util:'Space Mono',ui-monospace,monospace;

  --pad:clamp(1.25rem,4vw,4rem);
  --radius:28px;
  --ease:cubic-bezier(.2,.7,.3,1);
  --wrap:1240px;

  /* Menù: tutte le manopole in un posto solo.
     Larghezze, raggi e tempi si cambiano qui, senza entrare nelle regole. */
  --nav-larga-chiusa:min(13.5rem,72vw);   /* ripiego: il JS la misura sul contenuto */
  --nav-larga-aperta:min(90vw,23rem);
  --nav-barra:3.5rem;
  --nav-raggio-aperto:var(--radius);
  --nav-basso:1.25rem;
  --nav-pad:1.25rem;
  --nav-durata:.58s;
  --nav-curva:cubic-bezier(.22,1,.3,1);   /* parte decisa e si posa, senza rimbalzo */
  --nav-sfalso:52ms;                      /* ritardo fra una voce e la successiva */
  --nav-voce:clamp(1.4rem,4.2vw,1.8rem);

  /* Fondo della home: resta scuro in tutti e due i temi, è il palco
     su cui si impilano le schede. Non è il colore del testo. */
  --fondo-scena:#0E0E0E;
}

/* Tema scuro. Lo switch scambia i due colori di base: tutto il foglio
   è costruito su --ink e --paper, quindi le regole non si toccano.
   I blocchi già scuri per scelta (tile, schede scure, fascia processo)
   restano come sono: lì il buio è voluto. */
html[data-tema="scuro"]{
  --ink:#FDFDFC;
  --paper:#0E0E0E;
  --paper-2:#1A1A19;
  --line:rgba(253,253,252,.14);
  --line-inv:rgba(14,14,14,.22);
  --signal:#FF5436;   /* il #FF3B1F su fondo scuro vibra */
}
html[data-tema="scuro"] .tile,
html[data-tema="scuro"] .card--dark,
html[data-tema="scuro"] .info-card--dark{
  box-shadow:inset 0 0 0 1px var(--line);
}
html{color-scheme:light}
html[data-tema="scuro"]{color-scheme:dark}

/* ─── 2. BASE ──────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--fondo-scena);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1rem,.95rem + .3vw,1.125rem);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
body.page-light{background:var(--paper)}
a{color:inherit}
img{max-width:100%;display:block;height:auto}
button{font:inherit}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}
.eyebrow{
  font-family:var(--util);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);
}
.display{
  font-family:var(--display);
  font-variation-settings:'wdth' 112,'wght' 800;
  line-height:.92;letter-spacing:-.03em;text-wrap:balance;
}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{
  left:1rem;top:1rem;z-index:999;background:var(--ink);color:var(--paper);
  padding:.75rem 1.25rem;border-radius:999px;font-family:var(--util);font-size:.75rem;
}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}

/* ─── 3. NAVIGAZIONE ───────────────────────────────────── */

/* Velo. Separa il pannello dalla pagina senza spegnerla del tutto.
   Sta fuori da .nav: dentro sarebbe ritagliato dall'overflow. */
.nav-velo{
  position:fixed;inset:0;z-index:99;
  background:color-mix(in srgb,var(--fondo-scena) 30%,transparent);
  opacity:0;pointer-events:none;
  transition:opacity var(--nav-durata) var(--nav-curva);
}
.nav-velo[data-attivo="true"]{opacity:1;pointer-events:auto}

/* Il contenitore che si trasforma. Ancorato in basso: crescendo in altezza
   si apre verso l'alto da sé. Non va annidato in un elemento con transform
   o backdrop-filter, o il position:fixed si aggancia a quello. */
.nav{
  position:fixed;z-index:100;
  left:50%;bottom:calc(var(--nav-basso) + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%);

  width:var(--nav-larga-chiusa);
  height:var(--nav-barra);
  border-radius:var(--nav-raggio-aperto);

  background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--line);
  box-shadow:0 12px 40px rgba(0,0,0,.28);
  color:var(--ink);
  overflow:hidden;

  transition:
    width var(--nav-durata) var(--nav-curva),
    height var(--nav-durata) var(--nav-curva);
}
.nav[data-aperto="true"]{
  width:var(--nav-larga-aperta);
  height:var(--nav-altezza-aperta,22rem);
}

/* La barra sempre visibile, incollata in fondo al contenitore */
.nav-barra{
  position:absolute;left:0;right:0;bottom:0;height:var(--nav-barra);
  display:flex;align-items:center;gap:.3rem;
  padding-inline:.95rem .45rem;
}
.nav .brand{margin-right:auto;padding-right:.6rem}
.nav .brand{
  font-family:var(--display);font-variation-settings:'wdth' 120,'wght' 800;
  font-size:.85rem;letter-spacing:-.01em;text-decoration:none;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}

.nav-leva{
  position:relative;display:grid;place-items:center;
  height:2.3rem;min-width:4.9rem;padding-inline:.95rem;
  border:0;border-radius:999px;cursor:pointer;
  background:var(--ink);color:var(--paper);
  font-family:var(--util);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  transition:background .3s ease,color .3s ease;
}
.nav-leva:hover{background:var(--signal);color:var(--paper)}

/* Le due scritte si incrociano invece di scambiarsi di colpo */
.nav-leva span{grid-area:1/1;transition:opacity .28s ease,transform .28s var(--nav-curva)}
.nav-leva__chiudi{opacity:0;transform:translateY(.5rem)}
.nav[data-aperto="true"] .nav-leva__apri{opacity:0;transform:translateY(-.5rem)}
.nav[data-aperto="true"] .nav-leva__chiudi{opacity:1;transform:none}

/* Le voci restano sempre nel DOM, anche a menù chiuso: i motori le leggono
   comunque, e a chiuso escono solo dal percorso del Tab. */
.nav-pannello{
  position:absolute;left:0;right:0;top:0;
  padding:var(--nav-pad) var(--nav-pad) .7rem;
}

.nav-voci{list-style:none}
.nav-voci a{
  display:block;position:relative;text-decoration:none;
  font-family:var(--display);font-variation-settings:'wdth' 108,'wght' 600;
  font-size:var(--nav-voce);line-height:1.3;letter-spacing:-.02em;
  padding-block:.1rem;
  opacity:0;transform:translateY(.9rem);
  transition:
    opacity .42s var(--nav-curva) var(--nav-ritardo,0ms),
    transform .42s var(--nav-curva) var(--nav-ritardo,0ms),
    color .25s ease 0s;
}
.nav[data-aperto="true"] .nav-voci a{
  --nav-ritardo:calc(var(--i,0) * var(--nav-sfalso));
  opacity:1;transform:none;
}

/* Lo sfalsamento senza toccare il walker: l'ordine lo dà il DOM. */
.nav-voci li:nth-child(1){--i:0}
.nav-voci li:nth-child(2){--i:1}
.nav-voci li:nth-child(3){--i:2}
.nav-voci li:nth-child(4){--i:3}
.nav-voci li:nth-child(5){--i:4}
.nav-voci li:nth-child(6){--i:5}
.nav-voci li:nth-child(7){--i:6}
.nav-voci li:nth-child(8){--i:7}

/* Passando su una voce le altre si spengono: il menù si legge come una
   cosa sola invece che come quattro link vicini. */
.nav-voci:hover a{color:color-mix(in srgb,var(--ink) 38%,transparent)}
.nav-voci a:hover,.nav-voci a:focus-visible{color:var(--ink)}
.nav-voci a:focus-visible{outline-offset:4px;border-radius:.3rem}
.nav-voci li.cta a{color:var(--signal)}
.nav-voci li.current-menu-item a::before{opacity:1;transform:none}
.nav-voci:hover li.cta a{color:color-mix(in srgb,var(--signal) 40%,transparent)}
.nav-voci li.cta a:hover{color:var(--signal)}

/* Il trattino entra nel margine interno, la parola non si muove */
.nav-voci a::before{
  content:'–';position:absolute;left:-1rem;
  color:var(--signal);
  opacity:0;transform:translateX(-.35rem);
  transition:opacity .25s ease,transform .25s var(--nav-curva);
}
.nav-voci a:hover::before,.nav-voci a:focus-visible::before{opacity:1;transform:none}
/* Il trattino si spegne con la sua voce, altrimenti resta acceso da solo */
.nav-voci:hover a::before{color:color-mix(in srgb,var(--signal) 38%,transparent)}
.nav-voci a:hover::before,.nav-voci a:focus-visible::before{color:var(--signal)}

.nav-secondarie{
  list-style:none;display:flex;flex-wrap:wrap;gap:.3rem .9rem;
  margin-top:1.1rem;padding-top:.85rem;border-top:1px solid var(--line);
}
.nav-secondarie a{
  display:inline-block;text-decoration:none;
  font-family:var(--util);font-size:.66rem;letter-spacing:.08em;
  color:var(--mute);
  opacity:0;transform:translateY(.6rem);
  transition:
    opacity .4s var(--nav-curva) var(--nav-ritardo,0ms),
    transform .4s var(--nav-curva) var(--nav-ritardo,0ms),
    color .25s ease 0s;
}
.nav-secondarie a:hover,.nav-secondarie a:focus-visible{color:var(--ink)}
.nav[data-aperto="true"] .nav-secondarie a{
  --nav-ritardo:calc(var(--i,0) * var(--nav-sfalso));
  opacity:1;transform:none;
}
.nav-secondarie li:nth-child(1){--i:6}
.nav-secondarie li:nth-child(2){--i:7}

/* Switch chiaro/scuro sulla pillola. Un pulsante solo: mostra l'icona
   del tema in cui stai andando, e le due si scambiano ruotando. */
.nav-tema{
  display:grid;place-items:center;flex:none;
  width:2.2rem;height:2.2rem;padding:0;
  border:0;border-radius:999px;cursor:pointer;
  background:transparent;color:inherit;
  transition:color .25s ease;
}
.nav-tema:hover{color:var(--signal)}
.nav-tema svg{
  grid-area:1/1;width:1.1rem;height:1.1rem;
  transition:opacity .3s ease,transform .4s var(--nav-curva);
}
.nav-tema__sole{opacity:0;transform:rotate(-90deg) scale(.55)}
html[data-tema="scuro"] .nav-tema__sole{opacity:1;transform:none}
html[data-tema="scuro"] .nav-tema__luna{opacity:0;transform:rotate(90deg) scale(.55)}

/* Durante la misura il pannello è aperto ma invisibile e fermo */
/* Finché il JS non ha misurato, la pillola non si anima: eviti lo scatto
   dalla larghezza di ripiego a quella vera al primo caricamento. */
.nav:not(.pronto),.nav:not(.pronto) *{transition:none!important}

.nav.misura,.nav.misura *,.nav.misura-larga,.nav.misura-larga *{transition:none!important}
/* Per misurare la larghezza la barra torna nel flusso: da assoluta non
   contribuisce alla dimensione del contenitore. */
.nav.misura-larga{width:max-content;visibility:hidden}
.nav.misura-larga .nav-barra{position:static}
.nav.misura-larga .nav-pannello{display:none}
.nav.misura{height:auto;width:var(--nav-larga-aperta);visibility:hidden}
.nav.misura .nav-voci a,.nav.misura .nav-secondarie a{opacity:1;transform:none}

.mailto{
  position:fixed;z-index:100;right:1.25rem;bottom:1.25rem;
  display:flex;align-items:center;gap:.55rem;padding:.7rem .95rem;border-radius:999px;
  background:var(--ink);color:var(--paper);text-decoration:none;
  border:1px solid var(--line-inv);box-shadow:0 12px 34px rgba(0,0,0,.3);
  transition:background .3s ease,transform .3s ease,opacity .3s ease;
}
.mailto:hover{background:var(--signal);transform:translateY(-2px)}
.mailto svg{width:16px;height:16px;flex:none}
.mailto span{font-family:var(--util);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}
@media(max-width:899px){.mailto{bottom:5.5rem;padding:.75rem}.mailto span{display:none}}

/* A menù aperto il pulsante mail sparisce: su mobile finirebbe davanti al pannello */
body.nav-aperta .mailto{opacity:0;pointer-events:none}

/* ─── 4. HOME: schede impilate ─────────────────────────── */
.deck{padding-bottom:22vh}
.card{
  position:sticky;top:0;min-height:100svh;
  padding:clamp(5.5rem,13vh,8rem) var(--pad) clamp(6rem,12vh,7rem);
  border-radius:var(--radius) var(--radius) 0 0;
  background:var(--paper);border-top:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:flex-start;
}
.card--hero{border-radius:0;justify-content:center}
.card--dark{background:var(--ink);color:var(--paper);border-top-color:var(--line-inv)}
.card--dark .eyebrow{color:rgba(253,253,252,.5)}
.card--tint{background:var(--paper-2)}
.card--flat{border-radius:0}
/* schede più alte del viewport: fuori dallo sticky, altrimenti il fondo è irraggiungibile */
.card--tall{position:relative;top:auto}

.card-index{
  position:absolute;top:1.4rem;right:var(--pad);
  font-family:var(--util);font-size:.7rem;letter-spacing:.14em;color:var(--mute);
}
.card--dark .card-index{color:rgba(253,253,252,.45)}

.hero-inner{max-width:var(--wrap);margin:0 auto;width:100%}
.hero h1{margin:0}
.hero .line-1,.hero .line-2{display:block;font-size:clamp(2.5rem,9.4vw,8rem)}
.hero .line-2{color:var(--signal)}
.hero .sub{margin-top:clamp(1.5rem,4vh,2.5rem);max-width:44ch;font-size:clamp(1.05rem,1rem + .4vw,1.35rem)}
.hero .sub strong{font-weight:600}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem;margin-top:clamp(1.75rem,4vh,2.5rem)}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:.6rem 2rem;
  margin-top:clamp(2rem,5vh,3rem);padding-top:1.25rem;border-top:1px solid var(--line);
}
.scroll-nudge{position:absolute;left:var(--pad);bottom:clamp(1.5rem,5vh,2.5rem);display:flex;align-items:center;gap:.6rem}
.scroll-nudge span{font-family:var(--util);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.scroll-nudge i{
  width:26px;height:26px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;font-style:normal;font-size:.7rem;
  animation:bob 2.4s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

.manifesto{max-width:var(--wrap);margin:0 auto;width:100%}
.manifesto h2{font-size:clamp(2rem,6.2vw,5rem);max-width:16ch}
.manifesto .cols{display:grid;gap:clamp(1.5rem,4vw,3.5rem);margin-top:clamp(2rem,5vh,3.25rem);align-items:start}
@media(min-width:820px){.manifesto .cols{grid-template-columns:1fr 1fr}}
.manifesto p{max-width:52ch}
.manifesto p + p{margin-top:1.1rem}
.pull{
  font-family:var(--display);font-variation-settings:'wdth' 100,'wght' 600;
  font-size:clamp(1.25rem,2.2vw,1.75rem);line-height:1.15;letter-spacing:-.02em;
}
.manifesto .meme{margin-top:1.75rem}

.svc-home{max-width:var(--wrap);margin:0 auto;width:100%}
.svc-home h2{font-size:clamp(1.9rem,5.2vw,3.8rem);max-width:20ch}
.svc-list{margin-top:clamp(2rem,5vh,3rem);border-top:1px solid var(--line-inv)}
.svc-row{
  display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.5rem;
  padding:clamp(1.1rem,2.6vh,1.75rem) 0;border-bottom:1px solid var(--line-inv);
  transition:padding-left .35s var(--ease);
}
.svc-row:hover{padding-left:.9rem}
.svc-row:hover .svc-name{color:var(--signal)}
.svc-name{
  grid-column:2;font-family:var(--display);font-variation-settings:'wdth' 105,'wght' 700;
  font-size:clamp(1.35rem,3.2vw,2.2rem);letter-spacing:-.02em;transition:color .25s ease;
}
.svc-row .eyebrow{grid-column:1;padding-top:.5rem}
.svc-row p{grid-column:2;max-width:56ch;color:rgba(253,253,252,.72);font-size:.96rem}

.work{max-width:var(--wrap);margin:0 auto;width:100%}
.work-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1rem}
.work h2{font-size:clamp(1.9rem,5.2vw,3.8rem)}

/* mobile: impilamento solo tra la prima e la seconda scheda */
@media(max-width:899px){
  .card{
    position:relative;top:auto;min-height:0;overflow:visible;
    padding:clamp(3.5rem,9vh,5rem) var(--pad) clamp(3rem,7vh,4rem);
    justify-content:flex-start;
  }
  .card--hero{position:sticky;top:0;height:100svh;justify-content:center;padding-block:clamp(4.5rem,10vh,6rem)}
  .card--tall{position:relative;top:auto}
  .deck > .card:nth-of-type(n+3){border-radius:0;border-top:0}
  .deck{padding-bottom:0}
  .deck > .card:last-child{padding-bottom:8rem}
}

/* ─── 5. BLOCCHI COMUNI ────────────────────────────────── */
.btn{
  display:inline-block;padding:1rem 2.25rem;border-radius:999px;border:0;cursor:pointer;
  background:var(--ink);color:var(--paper);text-decoration:none;
  font-family:var(--util);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  transition:background .3s ease,transform .3s ease,color .3s ease;
}
.btn:hover{background:var(--signal);transform:translateY(-2px)}
.btn--sm{padding:.85rem 1.6rem;font-size:.72rem}
.card--dark .btn,.rel .btn{background:var(--paper);color:var(--ink)}
.card--dark .btn:hover,.rel .btn:hover{background:var(--signal);color:var(--paper)}

.link-arrow{
  font-family:var(--util);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;padding-bottom:.35rem;border-bottom:1px solid var(--line);
  transition:color .25s ease,border-color .25s ease;
}
.link-arrow::after{content:' →'}
.link-arrow:hover{color:var(--signal);border-color:var(--signal)}
.card--dark .link-arrow{border-bottom-color:var(--line-inv)}

.meme{
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:var(--paper);max-width:340px;
}
.card--dark .meme{border-color:var(--line-inv);background:#191919}
.meme img{width:100%}
.meme figcaption{
  font-family:var(--util);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mute);padding:.6rem .8rem;border-top:1px solid var(--line);
}
.card--dark .meme figcaption{border-top-color:var(--line-inv)}

.close .wrap{display:flex;flex-direction:column;align-items:center;text-align:center}
.close h2{font-size:clamp(2.1rem,7.4vw,6rem);margin-top:.8rem}
.close .kicker{color:var(--signal)}
.close-text{max-width:46ch;margin-top:1.25rem}
.close .meme{margin-top:1.75rem}
.close .btn{margin-top:clamp(1.5rem,3.5vh,2.25rem)}
section.close{background:var(--paper-2);padding-block:clamp(3rem,9vh,6rem) clamp(6rem,12vh,7rem)}
section.close.card{min-height:0;position:relative}

.site-footer{border-top:1px solid var(--line);background:var(--paper);padding-block:1.5rem 6rem}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:.6rem 1.75rem;justify-content:center}
.site-footer a{text-decoration:none}
.site-footer a:hover{color:var(--ink)}

/* ─── 6. PORTFOLIO ─────────────────────────────────────── */
.hd{padding-top:clamp(6rem,14vh,9rem);padding-bottom:clamp(2rem,5vh,3rem);background:var(--paper)}
.hd h1{font-size:clamp(2.5rem,8.5vw,6.5rem);margin-top:.8rem}
.hd .line-2{color:var(--signal);display:block}
.hd .tagline{margin-top:1.5rem;max-width:42ch;font-size:clamp(1.05rem,1rem + .4vw,1.35rem)}
.hd .btn{margin-top:2rem}
.crumb{display:flex;gap:.5rem;align-items:center}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--signal)}

.filters{
  position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 90%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);padding-block:.9rem;
}
.filters-inner{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.filter{
  font-family:var(--util);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;padding:.5rem .85rem;border-radius:999px;border:1px solid var(--line);
  white-space:nowrap;transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.filter:hover{border-color:var(--ink)}
.filter[aria-current="page"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

.grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.75rem,1.6vw,1.25rem);
  padding-block:clamp(1.75rem,4vh,2.5rem) clamp(3rem,8vh,5rem);
}
@media(min-width:700px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.grid{grid-template-columns:repeat(4,1fr)}}
.grid--3{grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.grid--3{grid-template-columns:repeat(3,1fr)}}
.work .grid,.rel .grid{padding-block:clamp(1.75rem,4vh,2.5rem) 0}

.tile{
  position:relative;border-radius:16px;overflow:hidden;background:#1B1B1B;
  aspect-ratio:4/5;text-decoration:none;color:var(--paper);
  display:flex;align-items:flex-end;padding:1rem;
  transition:transform .45s var(--ease);
}
.tile:nth-child(4n+2){background:#232320}
.tile:nth-child(4n+3){background:#161616}
.tile:hover{transform:translateY(-6px)}
.tile:hover .tile-name{color:var(--signal)}
.tile-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.tile > span{position:relative;z-index:2}
.tile-name{
  font-family:var(--display);font-variation-settings:'wdth' 100,'wght' 700;
  font-size:1.05rem;letter-spacing:-.02em;transition:color .3s ease;display:block;
}
.tile .eyebrow{color:rgba(253,253,252,.7);display:block;margin-bottom:.2rem}
.tile::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(0,0,0,.75),transparent 55%),
             radial-gradient(120% 90% at 70% 10%,rgba(255,59,31,0),transparent 60%);
  transition:background .4s ease;
}
.tile:hover::after{
  background:linear-gradient(to top,rgba(0,0,0,.8),transparent 55%),
             radial-gradient(120% 90% at 70% 10%,rgba(255,59,31,.22),transparent 60%);
}
.badge{
  position:absolute;top:.8rem;left:.8rem;z-index:2;background:var(--signal);color:var(--paper);
  font-family:var(--util);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.25rem .5rem;border-radius:999px;
}
.grid-cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem;margin-top:clamp(1.5rem,3.5vh,2.25rem)}

.pager{display:flex;gap:.5rem;justify-content:center;padding-bottom:4rem}
.pager .page-numbers{
  font-family:var(--util);font-size:.7rem;letter-spacing:.08em;text-decoration:none;
  padding:.55rem .85rem;border-radius:999px;border:1px solid var(--line);
}
.pager .current{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* overlay progetto */
.ov{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-end;justify-content:center;visibility:hidden;pointer-events:none}
.ov.is-open{visibility:visible;pointer-events:auto}
.ov-scrim{
  position:absolute;inset:0;background:rgba(14,14,14,.35);
  backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);
  opacity:0;transition:opacity .45s ease;border:0;padding:0;cursor:pointer;
}
.ov.is-open .ov-scrim{opacity:1}
.ov-panel{
  position:relative;width:min(1180px,calc(100% - 2rem));height:min(92vh,100%);
  background:var(--paper);border-radius:22px 22px 0 0;
  box-shadow:0 -20px 70px rgba(0,0,0,.35);overflow:hidden;
  display:flex;flex-direction:column;
  transform:translateY(3rem);opacity:0;
  transition:transform .5s var(--ease),opacity .4s ease;
}
.ov.is-open .ov-panel{transform:none;opacity:1}
.ov-bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.9rem 1.1rem;border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(10px);flex:none;position:relative;
}
.ov-bar .grab{position:absolute;top:.45rem;left:50%;transform:translateX(-50%);width:44px;height:4px;border-radius:99px;background:var(--line)}
.ov-close{
  display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--line);
  background:transparent;cursor:pointer;padding:.5rem .8rem;border-radius:999px;
  font-family:var(--util);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.ov-close:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.ov-full{font-family:var(--util);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--mute)}
.ov-full:hover{color:var(--signal)}
.ov-body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:clamp(1.5rem,4vw,3rem)}
.ov-body .hd,.ov-body .shots{padding-top:0}
.ov-body .nav,.ov-body .nav-velo,.ov-body .mailto,.ov-body .next,.ov-body .site-footer{display:none}

/* Il pannello del progetto sale dal basso, proprio dove ora sta il menù:
   finché è aperto il menù si toglie di mezzo. */
body.ov-lock .nav,body.ov-lock .nav-velo,body.ov-lock .mailto{
  opacity:0;pointer-events:none;transition:opacity .25s ease}
body.ov-lock{overflow:hidden}

/* ─── 7. SCHEDA PROGETTO ───────────────────────────────── */
.meta{
  display:grid;grid-template-columns:1fr;gap:1.25rem 1.5rem;
  margin-top:clamp(2.25rem,5vh,3.25rem);padding-top:1.5rem;border-top:1px solid var(--line);
}
@media(min-width:640px){.meta{grid-template-columns:repeat(3,1fr)}}
.meta dt{margin-bottom:.45rem}
.meta dd{font-family:var(--display);font-variation-settings:'wdth' 100,'wght' 600;font-size:1.05rem;letter-spacing:-.01em}
.tags{display:flex;flex-wrap:wrap;gap:.4rem}
.tag{
  font-family:var(--util);font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.35rem .65rem;border:1px solid var(--line);border-radius:999px;text-decoration:none;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.tag:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.visit{
  display:inline-flex;align-items:center;gap:.55rem;margin-top:2rem;
  font-family:var(--util);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;padding-bottom:.4rem;border-bottom:1px solid var(--ink);
  transition:color .25s ease,border-color .25s ease;
}
.visit svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.visit:hover{color:var(--signal);border-color:var(--signal)}
.visit:hover svg{transform:translateX(4px)}

.live{margin-top:clamp(2rem,5vh,3rem)}
.frame{border-radius:14px;overflow:hidden;background:var(--paper-2);border:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:.4rem;padding:.6rem .8rem;border-bottom:1px solid var(--line);background:var(--paper)}
.bar i{width:9px;height:9px;border-radius:50%;background:var(--line);display:block}
.bar em{font-style:normal;margin-left:.6rem;font-family:var(--util);font-size:.62rem;color:var(--mute)}
.stage{position:relative;aspect-ratio:16/10;background:var(--paper-2)}
.stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.facade{position:absolute;inset:0;display:grid;place-items:center}
.facade img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.facade-btn{
  position:relative;z-index:1;display:inline-flex;align-items:center;gap:.6rem;
  padding:.9rem 1.5rem;border-radius:999px;border:0;cursor:pointer;
  background:var(--ink);color:var(--paper);
  font-family:var(--util);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  box-shadow:0 10px 30px rgba(0,0,0,.25);transition:background .3s ease,transform .3s ease;
}
.facade-btn:hover{background:var(--signal);transform:translateY(-2px)}
.live-note{margin-top:.7rem;display:block}
@media(max-width:767px){.live{display:none}}

.shots{padding-bottom:clamp(3rem,8vh,5rem);background:var(--paper)}
.shot{margin-top:clamp(1rem,2.5vw,1.75rem)}
.shot--pair{display:grid;gap:clamp(1rem,2.5vw,1.75rem)}
@media(min-width:820px){.shot--pair{grid-template-columns:1fr 1fr}}
.shot--pair .shot{margin-top:0}
.caption{margin-top:.7rem;max-width:60ch;display:block}

.next{background:var(--ink);color:var(--paper);padding-block:clamp(3rem,9vh,6rem) clamp(6rem,12vh,7rem)}
.next .eyebrow{color:rgba(253,253,252,.5)}
.next-link{
  display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1rem;
  margin-top:1rem;text-decoration:none;padding-bottom:1.5rem;border-bottom:1px solid var(--line-inv);
  transition:padding-left .4s var(--ease);
}
.next-link:hover{padding-left:.9rem}
.next-link:hover .next-name{color:var(--signal)}
.next-name{
  font-family:var(--display);font-variation-settings:'wdth' 110,'wght' 800;
  font-size:clamp(2rem,7vw,5rem);letter-spacing:-.03em;line-height:.95;transition:color .3s ease;
}
.back{
  display:inline-block;margin-top:2rem;font-family:var(--util);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:rgba(253,253,252,.6);
}
.back:hover{color:var(--paper)}

/* ─── 8. SERVIZI ───────────────────────────────────────── */
.svc{border-top:1px solid var(--line);background:var(--paper)}
.svc-wide{max-width:none;margin:0;padding-inline:0}
.svc-item{display:block;text-decoration:none;border-bottom:1px solid var(--line);
  padding-block:clamp(2rem,5vh,3.25rem);transition:padding-left .45s var(--ease),background .35s ease}
.svc-item:hover{padding-left:clamp(.5rem,1.5vw,1.25rem);background:var(--paper-2)}
.svc-item:hover .svc-item-name{color:var(--signal)}
.svc-item:hover .arrow{transform:translateX(6px)}
.svc-grid{
  display:grid;grid-template-columns:1fr;gap:1rem 2rem;align-items:start;
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);
}
@media(min-width:900px){.svc-grid{grid-template-columns:auto 1fr auto;gap:2.5rem}}
.svc-num{padding-top:.5rem}
.svc-item-name{
  font-family:var(--display);font-variation-settings:'wdth' 108,'wght' 800;
  font-size:clamp(1.9rem,5vw,3.6rem);letter-spacing:-.03em;line-height:.95;transition:color .3s ease;
}
.svc-desc{margin-top:.9rem;max-width:50ch}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.1rem}
.chip{
  font-family:var(--util);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.3rem .6rem;border:1px solid var(--line);border-radius:999px;color:var(--mute);
}
.arrow{align-self:center;font-family:var(--util);font-size:1.4rem;transition:transform .35s var(--ease)}
@media(max-width:899px){.arrow{display:none}}

.proc{background:var(--ink);color:var(--paper);padding-block:clamp(3.5rem,10vh,6rem)}
.proc .eyebrow{color:rgba(253,253,252,.5)}
.proc h2{font-size:clamp(1.9rem,5.4vw,4rem);margin-top:.8rem;max-width:16ch}
.steps{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-top:clamp(2rem,5vh,3rem)}
@media(min-width:760px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{padding-top:1.1rem;border-top:1px solid var(--line-inv)}
.step h3{font-family:var(--display);font-variation-settings:'wdth' 100,'wght' 700;font-size:1.25rem;letter-spacing:-.02em;margin-top:.6rem}
.step p{margin-top:.5rem;font-size:.95rem;color:rgba(253,253,252,.7)}

.inc{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}
.inc-row{border-bottom:1px solid var(--line)}
.inc-row:last-child{border-bottom:0}
.inc-grid{
  display:grid;grid-template-columns:1fr;gap:.5rem 2.5rem;
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);
  padding-block:clamp(1.4rem,3.2vh,2rem);
}
@media(min-width:760px){.inc-grid{grid-template-columns:auto 16rem 1fr;gap:2.5rem}}
.inc-num{padding-top:.35rem}
.inc-name{font-family:var(--display);font-variation-settings:'wdth' 104,'wght' 700;font-size:clamp(1.2rem,2.4vw,1.6rem);letter-spacing:-.02em}
.inc-desc{max-width:52ch;color:var(--mute)}

.rel{background:var(--ink);color:var(--paper);padding-block:clamp(3.5rem,10vh,6rem)}
.rel .eyebrow{color:rgba(253,253,252,.5)}
.rel h2{font-size:clamp(1.9rem,5.4vw,4rem);margin-top:.8rem}

.faq{padding-block:clamp(3.5rem,10vh,6rem);background:var(--paper)}
.faq h2{font-size:clamp(1.9rem,5.4vw,4rem);max-width:16ch}
.faq-list{margin-top:clamp(2rem,5vh,3rem);border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{
  cursor:pointer;list-style:none;padding-block:1.25rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-family:var(--display);font-variation-settings:'wdth' 100,'wght' 600;
  font-size:clamp(1.05rem,2.2vw,1.4rem);letter-spacing:-.02em;transition:color .25s ease;
}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';font-family:var(--util);font-size:1.2rem;flex:none;transition:transform .3s ease}
details[open] summary::after{transform:rotate(45deg)}
summary:hover{color:var(--signal)}
details .answer{padding-bottom:1.25rem;max-width:62ch}
details .answer p + p{margin-top:.9rem}
details .answer a{text-decoration:none;border-bottom:1px solid var(--signal)}
details .answer a:hover{color:var(--signal)}

.other{border-top:1px solid var(--line);padding-block:clamp(2.5rem,6vh,3.5rem) 7rem;background:var(--paper)}
.other-list{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.other-list a{
  font-family:var(--util);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;padding:.55rem .9rem;border:1px solid var(--line);border-radius:999px;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.other-list a:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ─── 9. CHI SONO ──────────────────────────────────────── */
.hd-grid{display:grid;grid-template-columns:1fr;gap:clamp(1.75rem,4vw,3rem);align-items:end}
@media(min-width:900px){.hd-grid{grid-template-columns:1fr auto}}
.hd-meme{width:min(260px,100%)}
.intro{padding-bottom:clamp(3rem,8vh,5rem);background:var(--paper)}
.intro-grid{display:grid;grid-template-columns:1fr;gap:clamp(1.75rem,4vw,3.5rem);align-items:start}
@media(min-width:900px){.intro-grid{grid-template-columns:5fr 6fr}}
.portrait{border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--paper-2)}
.portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 28%}
.intro .body{max-width:54ch}
.intro .body p + p{margin-top:1.1rem}
.intro .body a{text-decoration:none;border-bottom:1px solid var(--signal)}

.facts{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}
.fact{border-bottom:1px solid var(--line)}
.fact:last-child{border-bottom:0}
.fact-grid{
  display:grid;grid-template-columns:1fr;gap:.4rem 2.5rem;
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);
  padding-block:clamp(1.25rem,3vh,1.9rem);
}
@media(min-width:760px){.fact-grid{grid-template-columns:14rem 1fr}}
.fact dt{padding-top:.25rem}
.fact dd{font-family:var(--display);font-variation-settings:'wdth' 100,'wght' 600;
  font-size:clamp(1.1rem,2vw,1.45rem);letter-spacing:-.02em;max-width:46ch}
.fact dd a{text-decoration:none;border-bottom:1px solid var(--signal)}
.fact dd a:hover{color:var(--signal)}
.fact dd p{margin:0}

.nope{background:var(--ink);color:var(--paper);padding-block:clamp(3.5rem,10vh,6rem)}
.nope .eyebrow{color:rgba(253,253,252,.5)}
.nope h2{font-size:clamp(1.9rem,5.4vw,4rem);margin-top:.8rem;max-width:18ch}
.nope ul{list-style:none;margin-top:clamp(2rem,5vh,3rem);border-top:1px solid var(--line-inv)}
.nope li{
  padding-block:1.1rem;border-bottom:1px solid var(--line-inv);
  font-family:var(--display);font-variation-settings:'wdth' 100,'wght' 600;
  font-size:clamp(1.1rem,2.4vw,1.6rem);letter-spacing:-.02em;
  display:flex;gap:1rem;align-items:baseline;
}
.nope li::before{content:'—';color:var(--signal);flex:none}

/* ─── 10. CONTATTI ─────────────────────────────────────── */
.contact-main{padding-bottom:clamp(3rem,8vh,5rem);background:var(--paper)}
.cols-contact{display:grid;grid-template-columns:1fr;gap:clamp(2.5rem,5vw,4rem);align-items:start}
@media(min-width:900px){.cols-contact{grid-template-columns:7fr 5fr}}

.contact-form label,.contact-form .wpcf7-form-control-wrap{display:block}
.contact-form label{font-family:var(--util);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:.5rem}
.contact-form input[type=text],.contact-form input[type=email],.contact-form input[type=tel],
.contact-form select,.contact-form textarea{
  font-family:inherit;font-size:1rem;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:12px;padding:.85rem 1rem;width:100%;
  transition:border-color .25s ease,background .25s ease;
}
.contact-form textarea{min-height:9rem;resize:vertical;line-height:1.5}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{
  outline:none;border-color:var(--ink);background:var(--paper-2);
}
.contact-form p{margin-bottom:1.25rem}
.contact-form input[type=checkbox]{accent-color:var(--signal);width:1rem;height:1rem;margin-right:.5rem}
.contact-form input[type=submit],.contact-form button[type=submit]{
  margin-top:.5rem;padding:1rem 2.25rem;border-radius:999px;border:0;cursor:pointer;
  background:var(--ink);color:var(--paper);width:auto;
  font-family:var(--util);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  transition:background .3s ease,transform .3s ease;
}
.contact-form input[type=submit]:hover{background:var(--signal);transform:translateY(-2px)}

.aside{display:grid;gap:1.5rem}
.info-card{border:1px solid var(--line);border-radius:16px;padding:clamp(1.25rem,3vw,1.75rem)}
.info-card--dark{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.info-card--dark .eyebrow{color:rgba(253,253,252,.5)}
.info-card h2{font-family:var(--display);font-variation-settings:'wdth' 100,'wght' 700;font-size:1.35rem;letter-spacing:-.02em;margin-top:.6rem}
.info-card p{margin-top:.6rem;font-size:.96rem}
.direct{list-style:none;margin-top:1rem}
.direct li{border-top:1px solid var(--line);padding-block:.85rem}
.direct li:first-child{border-top:0;padding-top:.25rem}
.direct a{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;text-decoration:none;
  font-family:var(--display);font-variation-settings:'wdth' 100,'wght' 600;
  font-size:1.05rem;letter-spacing:-.01em;transition:color .25s ease;
}
.direct a:hover{color:var(--signal)}
.direct span{font-family:var(--util);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);flex:none}
.after-list{list-style:none;margin-top:1rem;counter-reset:s}
.after-list li{counter-increment:s;display:flex;gap:.9rem;padding-block:.6rem;font-size:.96rem;color:rgba(253,253,252,.75)}
.after-list li::before{
  content:counter(s,decimal-leading-zero);font-family:var(--util);font-size:.68rem;
  letter-spacing:.1em;color:var(--signal);flex:none;padding-top:.25rem;
}

/* ─── 11. PAGINE SEMPLICI (Gutenberg) ──────────────────── */
.page-content{background:var(--paper);padding-block:clamp(2rem,5vh,3rem) 7rem}
.page-content .wrap > *{max-width:68ch}
.page-content h2{font-family:var(--display);font-variation-settings:'wdth' 104,'wght' 700;
  font-size:clamp(1.5rem,3.5vw,2.25rem);letter-spacing:-.02em;margin-top:2.5rem}
.page-content h3{font-family:var(--display);font-variation-settings:'wdth' 100,'wght' 600;
  font-size:1.25rem;letter-spacing:-.02em;margin-top:1.75rem}
.page-content p{margin-top:1rem}
.page-content ul,.page-content ol{margin-top:1rem;padding-left:1.25rem}
.page-content li{margin-top:.4rem}
.page-content a{text-decoration:none;border-bottom:1px solid var(--signal)}

/* ─── 12. UTILITY ──────────────────────────────────────── */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
}