/* SUD: stile comune del sito (home e pagine progetto). In WordPress: CSS globale del tema / Elementor. */
:root{
  /* Palette campionata dal logo: barra della D, bordeaux → magenta */
  --magenta:#DF074F;
  --magenta-deep:#B80843;
  --burgundy:#80062E;
  --magenta-on-dark:#FF5A8C;
  --bar:linear-gradient(90deg,#80062E 0%,#B80843 45%,#DF074F 100%);
  /* Terreno: nero con anima bordeaux */
  --ground:#050203;
  --ground-2:#0f0709;
  --ground-3:#1a0d11;
  --line:rgba(255,236,241,.12);
  --ink:#ffffff;
  --ink-2:#cfc5c8;
  --ink-3:#a3979b;
  /* Sezione chiara */
  --paper:#f5f2f3;
  --paper-ink:#140a0d;
  --paper-ink-2:#5a4d51;
  --paper-line:#e6dcdf;  /* filetti su carta */
  --radius:12px;
  --gutter:32px;  /* margine laterale: allinea i contenuti al logo e a "IT|EN Contattaci" del menu */
  --max:952px;   /* 920px del menu + i margini: le sezioni hanno la stessa larghezza del menu */
  --ease:cubic-bezier(.16,1,.3,1);
  --nav-h:80px;

  /* Scala tipografica per ruoli (rem + vw: i titoli crescono anche con lo zoom del browser) */
  --t-display-xl:clamp(2.5rem,1.4rem + 4.6vw,6rem);      /* h1 di pagina, titolo hero */
  --t-display-l:clamp(2.25rem,1.5rem + 3.2vw,4.5rem);    /* titoli di sezione, contatti, case, progetto successivo */
  --t-heading:clamp(1.625rem,1.25rem + 1.5vw,2.5rem);    /* sottotitoli: storia, colonne, tile */
  --t-statement:clamp(1.625rem,1.2rem + 1.9vw,2.75rem);  /* mission, muro dei clienti */
  --t-title:clamp(1.25rem,1.05rem + .8vw,1.625rem);      /* righe dell'indice */
  --t-lead:clamp(1.0625rem,1rem + .35vw,1.3125rem);      /* paragrafi d'apertura */
  --t-body:1.0625rem;                                    /* 17px */
  --t-value:1.0625rem;                                   /* valori dd */
  --t-label:.9375rem;                                    /* 15px: nav, pulsanti, chip */
  --t-meta:.875rem;                                      /* 14px: dt, percorso, note legali */
  --t-caption:.8125rem;                                  /* 13px: didascalie card, errori */
  --t-caption-sub:.75rem;                                /* 12px: minimo assoluto */

  /* Spaziature su base 4px; due livelli tra sezioni */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-6:24px;--s-8:32px;--s-10:40px;--s-14:56px;--s-16:64px;
  --s-24:clamp(64px,8vw,96px);    /* tra sezioni legate */
  --s-40:clamp(96px,13vw,160px);  /* cambi di capitolo */
}
/* Fallback con le metriche di Poppins: niente salto di layout quando il font arriva */
/* Poppins ospitato sul sito (niente richieste a Google): solo alfabeto latino e latino esteso */
@font-face{font-family:Poppins;font-style:italic;font-weight:400;font-display:swap;src:url(fonts/poppins-400-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:Poppins;font-style:italic;font-weight:400;font-display:swap;src:url(fonts/poppins-400-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:300;font-display:swap;src:url(fonts/poppins-300-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:Poppins;font-style:normal;font-weight:300;font-display:swap;src:url(fonts/poppins-300-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/poppins-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/poppins-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(fonts/poppins-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(fonts/poppins-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(fonts/poppins-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(fonts/poppins-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:800;font-display:swap;src:url(fonts/poppins-800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:Poppins;font-style:normal;font-weight:800;font-display:swap;src:url(fonts/poppins-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Poppins Fallback";src:local("Arial");size-adjust:112.16%;ascent-override:93.62%;descent-override:31.21%;line-gap-override:8.92%}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ground);color:var(--ink);font-family:Poppins,"Poppins Fallback",system-ui,sans-serif;font-size:var(--t-body);line-height:1.65;-webkit-font-smoothing:antialiased;caret-color:var(--magenta)}
::selection{background:var(--magenta);color:#fff}
html{scrollbar-color:var(--burgundy) var(--ground)}
::-webkit-scrollbar{width:12px}
::-webkit-scrollbar-track{background:var(--ground)}
::-webkit-scrollbar-thumb{background:var(--burgundy);border-radius:999px;border:3px solid var(--ground)}
img{display:block;max-width:100%}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--magenta-on-dark);outline-offset:3px;border-radius:6px}
h1,h2,h3{margin:0;font-weight:800;line-height:1.02;letter-spacing:-.025em;text-wrap:balance}
b,strong{font-weight:600}
[id]{scroll-margin-top:calc(var(--nav-h) + var(--s-6))}
p{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:#fff;color:var(--paper-ink);padding:10px 16px;border-radius:8px;font-weight:600}
.skip:focus{top:16px}

/* ---------- Bottoni ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 26px;border-radius:999px;font-weight:600;font-size:var(--t-label);line-height:1;font-family:inherit;text-decoration:none;white-space:nowrap;cursor:pointer;border:0;transition:background-color .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease)}
.btn svg{width:16px;height:16px;flex:none;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn--primary{background:var(--magenta);color:#fff;box-shadow:0 10px 24px -12px rgba(0,0,0,.7)}
.btn--primary:hover{background:var(--bar)}
.btn--ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1px #fff;background:rgba(255,255,255,.06)}
.btn--light{background:#fff;color:var(--burgundy)}
.btn--light:hover{background:var(--ground);color:#fff}

/* ---------- Header ---------- */
.nav{position:fixed;z-index:50;top:16px;left:50%;transform:translateX(-50%);width:min(calc(100% - 32px),920px);height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 10px 0 22px;border-radius:32px;background:rgba(16,7,10,.8);border:1px solid rgba(255,255,255,.11);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);box-shadow:0 12px 32px -18px rgba(0,0,0,.8)}
.nav__logo{display:flex;align-items:center;flex:none}
.nav__logo img{height:38px;width:auto}
.nav__links{display:flex;align-items:center;gap:6px;margin:0;padding:0;list-style:none}
.nav__links a{display:block;padding:10px 14px;border-radius:999px;font-size:var(--t-label);font-weight:500;color:rgba(255,255,255,.88);text-decoration:none;transition:background-color .2s,color .2s}
.nav__links a:hover{background:rgba(255,255,255,.07);color:#fff}
.nav__item--sub{position:relative;display:flex;align-items:center}
.nav__item--sub > a{padding-right:4px}
.nav__sub-toggle{display:grid;place-items:center;width:32px;height:44px;margin-left:-2px;padding:0;border:0;border-radius:999px;background:none;cursor:pointer}
.nav__sub-toggle svg{width:12px;height:8px;fill:none;stroke:rgba(255,255,255,.88);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.nav__sub-toggle:hover svg{stroke:#fff}
.nav__sub{position:absolute;left:0;top:100%;min-width:230px;margin:0;padding:8px;list-style:none;border-radius:20px;background:#140a0d;border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 40px -12px rgba(0,0,0,.85);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s .2s}
.nav__sub::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nav__sub a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:8px}
.nav__item--sub:hover .nav__sub,.nav__item--sub:focus-within .nav__sub,.nav__item--sub.is-open .nav__sub{opacity:1;visibility:visible;transform:translateY(8px);transition-delay:0s}
.nav__item--sub:hover .nav__sub-toggle svg,.nav__item--sub.is-open .nav__sub-toggle svg{transform:rotate(180deg)}
.nav__panel .nav__panel-sub{min-height:44px;padding-left:30px;font-weight:400;color:var(--ink-2)}
.nav__cta{min-height:44px;padding:0 20px;font-size:var(--t-meta)}
/* Selettore lingua: la lingua corrente in bianco, l'altra è il link */
.nav__lang{display:flex;align-items:center;margin-right:4px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);font-size:var(--t-meta);font-weight:600;line-height:1}
.nav__lang > *{display:grid;place-items:center;min-width:38px;min-height:40px;padding:0 10px;border-radius:999px}
.nav__lang span{color:#fff}
.nav__lang a{color:var(--ink-3);text-decoration:none;transition:color .2s,background-color .2s}
.nav__lang a:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav__lang a:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:560px){.nav__lang{margin-right:0}.nav__lang > *{min-width:34px;padding:0 8px}}
.nav__menu{display:none;position:relative}
.nav__menu summary{list-style:none;display:grid;place-items:center;width:44px;height:44px;border-radius:999px;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.nav__menu summary::-webkit-details-marker{display:none}
.nav__menu summary svg{width:20px;height:20px;stroke:#fff;stroke-width:1.6;fill:none;stroke-linecap:round}
.nav__menu[open] summary{background:rgba(255,255,255,.08)}
.nav__panel{position:absolute;right:0;top:56px;width:min(280px,calc(100vw - 32px));padding:10px;border-radius:20px;background:#140a0d;border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 40px -12px rgba(0,0,0,.85)}
.nav__panel a{display:flex;align-items:center;min-height:48px;padding:0 14px;border-radius:12px;font-weight:500;text-decoration:none}
.nav__panel a:hover{background:rgba(255,255,255,.06)}
.nav__panel hr{border:0;height:1px;background:var(--line);margin:6px 4px}

/* ---------- Hero con anello ---------- */
.hero{position:relative;height:100svh;min-height:680px;max-height:1080px;overflow:hidden;isolation:isolate;background:radial-gradient(120% 70% at 50% 108%,rgba(128,6,46,.42) 0%,rgba(128,6,46,.12) 42%,rgba(5,2,3,0) 70%),var(--ground)}
.hero__copy{position:relative;z-index:3;padding-top:clamp(112px,15vh,170px);text-align:center;pointer-events:none}
.hero__copy a{pointer-events:auto}
.hero h1{font-weight:800;text-transform:uppercase;font-size:var(--t-display-xl);line-height:.98;letter-spacing:-.01em}
.hero h1 .dot{color:var(--magenta)}
.hero__sub{max-width:60ch;margin:var(--s-6) auto 0;font-size:var(--t-lead);line-height:1.55;color:var(--ink-2)}
.hero__sub strong{color:#fff;font-weight:600}
.hero__actions{margin-top:var(--s-8);display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--s-3) var(--s-6)}
/* Filtri della ruota: pillole scure su vetro, quella attiva in magenta */
.hero__filters{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--s-2)}
/* Il pulsante ha la larghezza della sua etichetta più lunga ("Guarda i 15 progetti Fashion"): cambiando filtro le pillole non si spostano sotto il mouse */
@media (min-width:900px){#heroCta{min-width:18.5rem;justify-content:center}}
#heroCtaLabel{font-variant-numeric:tabular-nums}
@media (max-width:899px){.hero__filters{flex-basis:100%}}
.hero__copy button{pointer-events:auto}
.hero__filter{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px 0 14px;border:0;border-radius:999px;background:rgba(5,2,3,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--ink-2);font:inherit;font-size:var(--t-label);font-weight:500;line-height:1;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);transition:background-color .2s,color .2s,box-shadow .2s}
.hero__filter svg{width:18px;height:18px;flex:none}
.hero__filter--all{padding:0 18px}
.hero__filter:hover{color:#fff;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.hero__filter[aria-pressed="true"]{background:#fff;color:var(--paper-ink);box-shadow:none}
.hero__filter:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* Le discipline sono solo icona a ogni larghezza: il nome è letto dagli screen reader, compare al passaggio del mouse (title) e nel pulsante "Guarda i N progetti …" */
.hero__filter:not(.hero__filter--all){justify-content:center;width:44px;padding:0}.hero__filter svg{width:20px;height:20px}.hero__filter-label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:599px){.hero__filters{flex-wrap:nowrap;gap:8px}.hero__filter--all{padding:0 16px}}
/* La ruota occupa tutto l'hero ma si tocca solo dove ci sono le card: la fascia .ring__hit (posizionata dallo script) e le card stesse */
.ring{position:absolute;inset:0;z-index:1;pointer-events:none;user-select:none;-webkit-user-select:none}
.ring:not(.is-ready){opacity:0} /* compare quando la misura è definitiva (font caricato) */
.ring__hit{position:absolute;left:0;right:0;pointer-events:auto;cursor:grab;touch-action:pan-y}
.ring__stage .card{touch-action:pan-y}
.ring.is-dragging .ring__hit,.ring.is-dragging .card{cursor:grabbing}
.card{cursor:pointer;color:inherit;text-decoration:none;-webkit-user-drag:none;-webkit-tap-highlight-color:transparent}
.card:hover::after{box-shadow:inset 0 0 0 2px var(--magenta-on-dark)}
.card__cap i{display:flex;align-items:center;gap:6px;white-space:nowrap;height:16px;margin-top:8px;opacity:0;font-style:normal;font-size:var(--t-caption-sub);font-weight:600;color:var(--magenta-on-dark);transition:opacity .3s var(--ease)}
.card__cap i svg{width:12px;height:12px;flex:none}
/* "Apri il progetto" è sempre impaginato sotto il bordo: la didascalia sale di 24px (solo transform) */
.card:hover .card__cap{transform:translateY(0)}
.card:hover .card__cap i{opacity:1}
.card--light .card__cap i{color:var(--magenta-deep)}
.card--light:hover::after{box-shadow:inset 0 0 0 2px var(--magenta-deep)}
@media (hover:none){.card__cap i{display:none}.card .card__cap{transform:none}}
.ring__stage{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none;transition:opacity .22s var(--ease)}
.ring__stage.is-swapping{opacity:0}
.ring__stage .card{pointer-events:auto} /* lo stage è complanare alla card centrale: senza questo intercetta mouse e clic */
.card{position:absolute;left:0;top:0;border-radius:var(--radius);overflow:hidden;backface-visibility:hidden;will-change:transform;box-shadow:0 26px 48px -18px rgba(0,0,0,.85),0 3px 10px rgba(0,0,0,.45);background:var(--ground-3)}
.card svg,.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card__shade{position:absolute;inset:0;background:#050203;opacity:0;pointer-events:none;z-index:1}
.card__cap{z-index:2}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);pointer-events:none}
.card__cap{position:absolute;left:0;right:0;bottom:0;padding:44px clamp(8px,8cqi,12px) 13px;transform:translateY(24px);transition:transform .35s var(--ease);background:linear-gradient(180deg,rgba(8,3,5,0),rgba(8,3,5,.9) 62%);line-height:1.25}
/* Didascalia: il nome scala con la larghezza della card (12px sulle card piccole del telefono, fino a 16px; margini laterali da 8 a 12px), al massimo 3 righe; l'area sta su una riga */
.card{container-type:inline-size}
.card__cap b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font-size:clamp(.75rem,9.6cqi,1rem);font-weight:700;line-height:1.2;letter-spacing:-.01em;color:#fff;text-wrap:balance;hyphens:auto}
.card__cap span{display:block;margin-top:var(--s-1);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--t-caption-sub);font-weight:500;letter-spacing:.01em;color:#eee3e6}
.card__cap span:empty{display:none}
.card--light .card__cap{background:linear-gradient(180deg,rgba(245,242,243,0),rgba(245,242,243,.94) 62%)}
.card--light .card__cap b{color:var(--paper-ink)}
.card--light .card__cap span{color:var(--paper-ink-2)}
.hero__fade{position:absolute;left:0;right:0;bottom:0;height:18%;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(5,2,3,0),var(--ground))}
@media (prefers-reduced-motion:no-preference){
  .rise{animation:rise .9s var(--ease) both}
  .hero h1.rise{animation-delay:.1s}.hero__sub.rise{animation-delay:.28s}.hero__actions.rise{animation-delay:.4s}
  .ring.is-ready{animation:ringIn 1.1s var(--ease) both}
}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
@keyframes ringIn{from{opacity:0;transform:translateY(60px)}}

/* ---------- Sezioni ---------- */
.section{padding:var(--s-40) 0}
.section--tight{padding:var(--s-24) 0}
.section__head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:var(--s-6) var(--s-10);margin-bottom:var(--s-16)}
.section__head > p{max-width:34em}
@media (min-width:1100px){.section__head{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s-16)}.section__head > p{max-width:30em}}
.section__head h2{font-size:var(--t-display-l)}
.section__head--minor{margin-bottom:var(--s-10)}
.section__head--minor h2{font-size:var(--t-heading)}
.link-arrow{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:var(--t-label);font-weight:500;text-decoration:none;color:var(--ink-2);transition:color .2s}
.link-arrow svg{width:18px;height:18px;transition:transform .3s var(--ease)}
.link-arrow:hover{color:#fff}.link-arrow:hover svg{transform:translateX(4px)}

/* Works */
.case{position:relative;display:block;border-radius:var(--radius);overflow:hidden;text-decoration:none;background:var(--ground-3);aspect-ratio:16/7;min-height:340px}
.case + .case{margin-top:16px}
.case__media{position:absolute;inset:0;transition:transform 1.2s var(--ease)}
.case__media svg,.case__media img,.case__media video{width:100%;height:100%;object-fit:cover;display:block}
.case:hover .case__media{transform:scale(1.025)}
.case__body{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px 32px;padding:clamp(20px,3vw,40px);padding-top:120px;background:linear-gradient(180deg,rgba(5,2,3,0),rgba(5,2,3,.88) 70%)}
.case__tag{color:var(--magenta-on-dark);font-weight:500}
.case h3{font-size:var(--t-display-l)}
.case__line{margin-top:var(--s-3);max-width:60ch;color:var(--ink-2)}
.case__go{display:inline-flex;align-items:center;gap:10px;font-weight:600;white-space:nowrap}
.case__go svg{width:18px;height:18px;transition:transform .3s var(--ease)}
.case:hover .case__go svg{transform:translateX(4px)}
.index{list-style:none;margin:var(--s-14) 0 0;padding:0;border-top:1px solid var(--line)}
@media (min-width:1100px){.index{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s-10)}}
.index a{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:center;gap:var(--s-4);min-height:72px;padding:var(--s-3) var(--s-1);border-bottom:1px solid var(--line);text-decoration:none;transition:background-color .35s}
.index a > :not(svg){transition:transform .35s var(--ease)}
.index a:hover > :not(svg){transform:translateX(12px)}
.index a:hover{background:linear-gradient(90deg,rgba(128,6,46,.22),rgba(128,6,46,0) 60%)}
.index b{font-size:var(--t-title);font-weight:600;line-height:1.2;letter-spacing:-.01em}
.index .index__area:empty{display:none}
.index .index__area{color:var(--ink-3);font-size:var(--t-label)}
.index svg{width:20px;height:20px;color:var(--ink-3);transition:color .2s,transform .3s var(--ease)}
.index a:hover svg{color:var(--magenta-on-dark);transform:translateX(3px)}

.areas{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin-top:var(--s-8)}
.areas span{margin-right:var(--s-2);color:var(--ink-3);font-size:var(--t-label)}
.areas a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;font-size:var(--t-label);font-weight:500;text-decoration:none;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .2s,background-color .2s}
.areas a:hover{box-shadow:inset 0 0 0 1px var(--magenta-on-dark);background:rgba(223,7,79,.1)}

/* Si tocca / si gioca (sezione chiara) */
.dual{background:var(--paper);color:var(--paper-ink)}
.dual h2{font-size:var(--t-display-l);max-width:15em}
.dual--minor h2{font-size:var(--t-heading)}
.dual__intro{margin-top:var(--s-6);max-width:60ch;font-size:var(--t-lead);color:var(--paper-ink-2)}
.dual__grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:var(--s-16)}
.dual__col{padding:0 clamp(24px,5vw,72px)}
.dual__col:first-child{padding-left:0}.dual__col:last-child{padding-right:0}
.dual__col h3{font-size:var(--t-heading);margin-bottom:var(--s-4)}
.dual__col ul{list-style:none;margin:0;padding:0}
.dual__col li{padding:var(--s-3) 0;border-bottom:1px solid rgba(20,10,13,.12);font-size:1.125rem}
.dual__col li:first-child{border-top:1px solid rgba(20,10,13,.12)}
.dual__seam{position:absolute;left:50%;top:0;bottom:0;width:6px;margin-left:-3px;border-radius:999px;background:linear-gradient(180deg,#80062E 0%,#B80843 45%,#DF074F 100%)}

/* People & Factory */
.pf__lead{color:var(--ink-2);font-size:var(--t-lead)}
#people{padding-bottom:var(--s-24)}
.pf__grid{display:grid;grid-template-columns:3fr 2fr;gap:var(--s-4)}
.pf__tile{margin:0;position:relative;border-radius:var(--radius);overflow:hidden;background:var(--ground-3);min-height:440px;text-decoration:none;display:block}
.pf__tile svg,.pf__tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pf__tile figcaption,.pf__tile .pf__cap{position:absolute;left:0;right:0;bottom:0;padding:90px clamp(20px,2.6vw,32px) clamp(20px,2.6vw,28px);background:linear-gradient(180deg,rgba(5,2,3,0),rgba(5,2,3,.9) 70%)}
.pf__tile h3{font-size:var(--t-heading)}
.pf__tile p{margin-top:var(--s-2);color:var(--ink-2);font-size:var(--t-label)}
.pf__tile figure{margin:0}
.pf__tile--light{background:#f0eaec}
.pf__tile--light figcaption{background:linear-gradient(180deg,rgba(240,234,236,0),rgba(240,234,236,.96) 62%)}
.pf__tile--light h3{color:var(--paper-ink)}
.pf__tile--light p{color:var(--paper-ink-2)}
/* Frase sotto le due foto, centrata */
.pf__claim{margin-top:var(--s-14);font-size:var(--t-statement);font-weight:700;line-height:1.25;text-align:center;text-wrap:balance;color:var(--ink)}
.mission{margin:var(--s-24) 0 0;padding:0}
.mission p{max-width:22em;font-size:var(--t-statement);font-weight:300;line-height:1.3;letter-spacing:-.015em}
.mission p::before{content:"";display:block;width:96px;height:6px;border-radius:999px;background:var(--bar);margin-bottom:var(--s-8)}
.mission footer{margin-top:var(--s-6);font-size:var(--t-label);color:var(--ink-3)}
.partners{display:flex;width:fit-content;margin:var(--s-4) 0 0 auto}

/* Clienti */
.clients h2{font-size:var(--t-display-l);margin-bottom:var(--s-10)}
.clients ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0}
.clients li{font-size:var(--t-statement);font-weight:600;letter-spacing:-.02em;line-height:1.3;color:#fff;white-space:nowrap}
.clients li:not(:last-child)::after{content:"/";margin:0 .45em;font-weight:300;color:var(--magenta-deep)}
.clients{padding-top:0}

/* Contatti */
.contact{background:var(--magenta);color:#fff;position:relative;overflow:hidden}
.contact__grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:48px;align-items:end}
.contact h2{font-size:var(--t-display-l);line-height:1.06;letter-spacing:-.03em}
.contact__actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-10)}
.contact__info{margin:0;font-size:var(--t-value);line-height:1.5}
.contact__info > div + div{margin-top:var(--s-4)}
.contact__info a{text-decoration:none}
.contact__info a:hover{text-decoration:underline}
.contact__info dt{font-size:var(--t-meta);font-weight:500;color:#fff}

.contact__info dd{margin:var(--s-1) 0 0;font-size:var(--t-value);font-weight:500}
.contact__direct dd{font-size:var(--t-title);font-weight:600;letter-spacing:-.01em}
.contact .btn--ghost{box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
.contact .btn--ghost:hover{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px #fff}

/* Footer */
.foot{padding:56px 0 40px;border-top:1px solid var(--line)}
.foot__top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:28px}
.foot__top img{height:64px;width:auto}
.foot nav ul{display:flex;flex-wrap:wrap;gap:4px 8px;list-style:none;margin:0;padding:0}
.foot nav a{display:block;padding:10px 12px;border-radius:8px;text-decoration:none;color:var(--ink-2);font-size:var(--t-label)}
.foot nav a:hover{color:#fff;background:rgba(255,255,255,.05)}
.foot__legal{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-3);font-size:var(--t-meta);color:var(--ink-3)}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .nav__links{display:none}
  .nav__menu{display:block}
  .nav{gap:8px}
  .nav__right{display:flex;align-items:center;gap:8px}
  .case{aspect-ratio:4/5;min-height:0}
  .dual__grid{grid-template-columns:1fr}
  .dual__col{padding:0}
  .dual__seam{position:relative;left:auto;top:auto;bottom:auto;display:block;width:96px;height:6px;margin:56px 0;background:var(--bar)}
  .pf__grid{grid-template-columns:1fr}
  .pf__tile{min-height:360px}
  .contact__grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  body{font-size:1rem}
  .nav{top:10px;width:calc(100% - 20px);height:60px;padding-left:16px}
  .nav__logo img{height:32px}
  .nav__cta{padding:0 16px}
  .hero{min-height:620px}
  .hero__copy{padding-top:112px}
  .clients ul{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2) var(--s-4)}
  .clients li{white-space:normal;font-size:var(--t-title);line-height:1.25}
  .clients li:not(:last-child)::after{content:none}
  .index a{grid-template-columns:minmax(0,1fr);row-gap:2px}
  .index .index__area{grid-column:1;grid-row:2}
  .index svg{grid-column:2;grid-row:1 / span 2}
  .contact__actions .btn{width:100%;justify-content:center}
  .contact__actions .btn span{overflow:hidden;text-overflow:ellipsis}
}
@media (min-width:901px){.nav__right{display:flex;align-items:center}}

/* ---------- Pagina progetto ---------- */
.p-hero{padding:clamp(128px,16vh,180px) 0 0}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin-bottom:var(--s-6);font-size:var(--t-meta);color:var(--ink-3)}
.crumbs a{color:var(--ink-2);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs [aria-current]{color:#fff}
.p-hero h1{font-size:var(--t-display-xl);line-height:1;letter-spacing:-.035em;max-width:14em}
.p-hero__line{margin-top:var(--s-6);max-width:60ch;font-size:var(--t-lead);line-height:1.55;color:var(--ink-2)}
.p-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-6);margin:var(--s-10) 0 0;padding:var(--s-6) 0 0;border-top:1px solid var(--line)}
.p-meta dt,.p-credits dt{font-size:var(--t-meta);font-weight:500;color:var(--ink-3)}
.p-meta dd,.p-credits dd{margin:var(--s-1) 0 0;font-size:var(--t-value);font-weight:500}
.p-cover{position:relative;margin-top:var(--s-10);aspect-ratio:16/8;min-height:320px;border-radius:var(--radius);overflow:hidden;background:var(--ground-3)}
.p-cover > [data-art]{position:absolute;inset:0}
.slot-label{position:absolute;left:14px;bottom:14px;z-index:2;max-width:calc(100% - 28px);padding:6px 12px;border-radius:999px;background:rgba(5,2,3,.78);color:#fff;font-size:var(--t-caption);font-weight:500;line-height:1.3;pointer-events:none}
.p-story{display:grid;gap:var(--s-16)}
.p-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:var(--s-6) var(--s-16);align-items:start}
.p-row h2{font-size:var(--t-heading)}
.p-row p{font-size:var(--t-lead);line-height:1.6;color:var(--ink-2);max-width:62ch}
.p-row p + p{margin-top:16px}
.ph{color:var(--ink-3);border:1px dashed rgba(255,90,140,.5);border-radius:8px;padding:10px 14px}
span.ph{display:inline-block;padding:1px 8px;border-radius:6px;line-height:1.5}
.dual .ph{color:var(--paper-ink-2);border-color:rgba(184,8,67,.45)}
.p-gallery__title{font-size:var(--t-heading);margin-bottom:var(--s-8)}
.p-gallery{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s-4)}
.p-gallery figure{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;background:var(--ground-3);min-height:260px;min-width:0}
.p-gallery figure > [data-art]{position:absolute;inset:0}
.p-gallery .g-wide{grid-column:span 6;aspect-ratio:16/7}
.p-gallery .g-half{grid-column:span 3;aspect-ratio:4/3}
.p-gallery .g-tall{grid-column:span 2;aspect-ratio:3/4}
.p-gallery .g-big{grid-column:span 4;aspect-ratio:auto}
.p-video{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:var(--ground-3)}
.p-video > [data-art]{position:absolute;inset:0}
.p-video__play{position:absolute;left:50%;top:50%;z-index:2;transform:translate(-50%,-50%);display:grid;place-items:center;width:88px;height:88px;border-radius:50%;background:var(--magenta);box-shadow:0 14px 30px -12px rgba(0,0,0,.8)}
.p-video__play svg{width:28px;height:28px;margin-left:4px;fill:#fff}
.p-credits{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;margin:0;border-top:1px solid var(--line)}
.p-credits div{padding:18px 0;border-bottom:1px solid var(--line)}


.p-next{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;padding:clamp(40px,6vw,72px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-decoration:none}
.p-next__label{display:block;font-size:var(--t-label);color:var(--ink-3)}
.p-next__name{display:block;margin-top:var(--s-2);font-size:var(--t-display-l);font-weight:800;line-height:1;letter-spacing:-.03em;transition:color .25s}
.p-next__area{display:block;margin-top:10px;color:var(--magenta-on-dark);font-weight:500}
.p-next__thumb{position:relative;width:clamp(96px,12vw,160px);aspect-ratio:1/2.25;border-radius:var(--radius);overflow:hidden;transition:transform .5s var(--ease)}
.p-next__thumb > [data-art]{position:absolute;inset:0}
.p-next:hover .p-next__name{color:var(--magenta-on-dark)}
.p-next:hover .p-next__thumb{transform:rotate(-4deg) translateY(-6px)}
@media (max-width:900px){
  .p-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-row{grid-template-columns:1fr}
  .p-gallery .g-wide,.p-gallery .g-half,.p-gallery .g-tall,.p-gallery .g-big{grid-column:span 6;aspect-ratio:4/3;min-height:0}
  .p-cover{aspect-ratio:4/5}
}
@media (max-width:560px){
  .p-next{grid-template-columns:1fr}
  .p-next__thumb{display:none}
  .p-video__play{width:68px;height:68px}
}
.p-gap{margin-top:var(--s-24)}
.works-list{padding-top:var(--s-10)}
.pt-0{padding-top:0}

/* ---------- Form di contatto (dal layout 7) ---------- */
.contact__grid--form{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);align-items:start;gap:var(--s-16)}
.contact__direct{margin-top:var(--s-8)}
.brief__intro{margin:0 0 var(--s-6);font-size:var(--t-label);line-height:1.5;color:var(--paper-ink-2)}
.brief{background:#fff;color:var(--paper-ink);border-radius:20px;padding:clamp(22px,3vw,40px);box-shadow:0 30px 60px -30px rgba(0,0,0,.45)}
.brief fieldset{margin:0;padding:0;border:0;min-width:0}
.brief legend,.field > label{display:block;margin-bottom:var(--s-2);font-size:var(--t-meta);font-weight:600;color:var(--paper-ink)}
.field__opt{font-weight:400;color:var(--paper-ink-2)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.chips label{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;font-size:var(--t-label);font-weight:500;line-height:1.25;cursor:pointer;box-shadow:inset 0 0 0 1px #d6cbcf;transition:background-color .2s,color .2s,box-shadow .2s}
.chips label:hover{box-shadow:inset 0 0 0 1px var(--magenta-deep)}
.chips input:checked + label{background:var(--magenta);color:#fff;box-shadow:none}
.chips input:focus-visible + label{outline:2px solid var(--burgundy);outline-offset:3px}
.brief__goals{margin-bottom:var(--s-6)}
.brief__row{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s-4)}
.field{margin-bottom:var(--s-6);min-width:0}
.brief input[type=text],.brief input[type=email],.brief select,.brief textarea{display:block;width:100%;min-height:50px;padding:12px 14px;border:1px solid #cfc3c7;border-radius:12px;background:#fff;color:var(--paper-ink);font-weight:400;font-size:1rem;line-height:1.4;font-family:inherit;transition:border-color .2s,box-shadow .2s}
.brief select{appearance:none;-webkit-appearance:none;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%2380062E' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px}
.brief textarea{resize:vertical;min-height:96px}
.brief input::placeholder,.brief textarea::placeholder{color:#6f5f64}
.brief input:focus,.brief select:focus,.brief textarea:focus{outline:none;border-color:var(--magenta-deep);box-shadow:0 0 0 3px rgba(223,7,79,.18)}
.brief [aria-invalid=true]{border-color:var(--magenta-deep);box-shadow:0 0 0 3px rgba(184,8,67,.14)}
.field__err{margin:var(--s-2) 0 0;min-height:0;font-size:var(--t-caption);font-weight:500;color:var(--magenta-deep)}
.field__err:empty{display:none}
/* Asterisco sui dati necessari e legenda in grigio chiaro sotto il consenso privacy */
.req{margin-left:2px;color:var(--magenta-deep)}
.brief__legend{margin:var(--s-4) 0 0;font-size:var(--t-caption);color:#6f5f64}
.check{display:flex;align-items:flex-start;gap:12px;margin-top:4px}
.check input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--magenta);cursor:pointer}
.check label{font-size:var(--t-meta);line-height:1.5;color:var(--paper-ink-2)}
.check a{color:var(--burgundy);text-decoration:underline}
.brief__send{margin-top:var(--s-6);width:100%;justify-content:center;min-height:54px;font-size:1rem}
/* Spento finché mancano dati necessari: grigio, senza ombra, non cliccabile */
.brief__send:disabled,.brief__send:disabled:hover{background:#e3d9dc;color:#8a7b80;box-shadow:none;cursor:not-allowed;transform:none}
.brief__status{margin:var(--s-3) 0 0;font-size:var(--t-meta);color:var(--paper-ink-2)}
.brief__status:empty{display:none}
.contact__info dd a{color:#fff}
@media (max-width:1100px){.contact__grid--form{grid-template-columns:1fr;gap:var(--s-10)}.contact__grid--form .contact__info{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s-4) var(--s-8)}.contact__grid--form .contact__info > div + div{margin-top:0}}
@media (max-width:560px){.brief__row{grid-template-columns:1fr}}
.contact__more{margin-top:var(--s-8)}
.contact__direct dd a{word-break:break-word}

/* ---------- Media veri nelle pagine progetto ---------- */
.p-cover img,.p-gallery figure img,.p-next__thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Video: in copertina e in galleria tengono le proporzioni originali, senza tagli (sono spesso registrazioni dello schermo) */
.p-cover--video,.p-cover.p-cover--video{aspect-ratio:auto;min-height:0}
.p-cover video{display:block;width:100%;height:auto}
.p-gallery .g-video{aspect-ratio:auto;min-height:0;background:#1d1d1d}
.p-gallery .g-video video{display:block;width:100%;height:auto}
.p-gallery .g-big img{position:absolute}
.p-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;display:block}

/* ---------- La factory: un capannone, due reparti ---------- */
.factory{background:#fff;color:var(--paper-ink)}
.factory h2{font-size:var(--t-display-l);max-width:15em;line-height:1.2} /* accenti (ciò) e discendenti (regia) non si toccano tra le righe */
.factory__intro{margin-top:var(--s-6);max-width:60ch;font-size:var(--t-lead);line-height:1.55;color:var(--paper-ink-2)}

/* ---------- Pagine di testo (privacy) ---------- */
.legal__note{margin-top:var(--s-6);max-width:60ch}
.legal__body{max-width:calc(68ch + 2 * var(--gutter))}
.legal__body h2{font-size:var(--t-heading);margin:var(--s-14) 0 var(--s-4)}
.legal__body h2:first-child{margin-top:0}
.legal__body p{font-size:var(--t-lead);line-height:1.65;color:var(--ink-2);max-width:68ch}
.legal__body a{color:#fff}
.legal__date{margin-top:var(--s-14);font-size:var(--t-meta)}
/* Capannone che prova: ogni servizio porta a un progetto o a una categoria */
.factory{padding-bottom:var(--s-24)}

/* ---------- Tutti i progetti: in evidenza, miniature, filtri ---------- */
.case-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
.case-grid:empty{display:none}
.case--grid{aspect-ratio:4/3;min-height:0}
.case--grid + .case--grid{margin-top:0}
.case--grid .case__media img{width:100%;height:100%;object-fit:cover;display:block}
.case--grid h3{font-size:var(--t-heading)}
.index__thumb{position:relative;display:block;width:44px;height:56px;border-radius:6px;overflow:hidden;background:var(--ground-3);flex:none}
.index a{grid-template-columns:44px minmax(0,1.4fr) minmax(0,1fr)}
.index a:has(.index__area:empty){grid-template-columns:44px minmax(0,1fr)}
.works-filter a[aria-current="page"]{background:var(--magenta);box-shadow:none;color:#fff}
.works-count{margin-top:var(--s-4);font-size:var(--t-meta);color:var(--ink-3)}
.works-empty{margin-top:var(--s-10);color:var(--ink-2)}
.works-empty a{color:#fff}
[data-cat][hidden]{display:none!important}
@media (max-width:900px){.case-grid{grid-template-columns:1fr}}
@media (max-width:560px){
  .index a{grid-template-columns:44px minmax(0,1fr)}
  .index__thumb{grid-row:1 / span 2}
  .index a b{grid-column:2;grid-row:1}
  .index .index__area{grid-column:2;grid-row:2}
  .index a svg{grid-column:3;grid-row:1 / span 2}
}
.index__thumb{position:relative!important;inset:auto!important}
.index__thumb svg{position:absolute;inset:0;width:100%;height:100%;display:block}


/* ---------- Fisico e Digitale ---------- */
/* Fisico e Digitale affiancati, separati dalla barra del logo (in colonna su telefono) */

/* ---------- Rifinitura: aree toccabili ≥44px ---------- */
.nav__logo{min-height:44px}
.nav__sub-toggle{width:44px;margin-left:-8px}
.contact__info dd a{display:inline-flex;align-items:center;min-height:44px}
.crumbs a{min-width:44px}
.index__thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* foto verticali affiancate in galleria (es. capi sul manichino) */
.p-gallery .g-portrait{aspect-ratio:3/4}
@media (max-width:900px){.p-gallery .g-half.g-portrait{aspect-ratio:3/4}}

/* ---------- Visualizzatore foto ---------- */
.is-zoomable{cursor:zoom-in}
.is-zoomable:focus-visible{outline:3px solid var(--magenta-on-dark);outline-offset:-3px}
.lightbox-open{overflow:hidden}
.lightbox{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(5,2,3,.96);color:#fff;overflow:hidden}
.lightbox::backdrop{background:rgba(5,2,3,.96)}
.lightbox:not([open]){display:none}
.lightbox__stage{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.lightbox__img{display:block;max-width:min(92vw,1800px);max-height:calc(100dvh - 140px);width:auto;height:auto;object-fit:contain;cursor:zoom-in;transform-origin:center;transition:transform .25s var(--ease);will-change:transform;-webkit-user-drag:none}
.lightbox.is-zoomed .lightbox__img{cursor:grab}
.lightbox.is-zoomed .lightbox__img:active{cursor:grabbing;transition:none}
.lightbox__btn{position:absolute;z-index:2;display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.1);color:#fff;cursor:pointer;transition:background-color .2s}
.lightbox__btn:hover{background:rgba(255,255,255,.2)}
.lightbox__btn:focus-visible{outline:2px solid var(--magenta-on-dark);outline-offset:3px}
.lightbox__btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lightbox__close{top:16px;right:16px}
.lightbox__prev{left:16px;top:50%;transform:translateY(-50%)}
.lightbox__next{right:16px;top:50%;transform:translateY(-50%)}
.lightbox.is-single .lightbox__prev,.lightbox.is-single .lightbox__next{display:none}
.lightbox.is-zoomed .lightbox__prev,.lightbox.is-zoomed .lightbox__next{opacity:.35}
.lightbox__bar{position:absolute;z-index:2;left:50%;bottom:16px;transform:translateX(-50%);display:flex;align-items:center;gap:var(--s-2);padding:4px 4px 4px 16px;border-radius:999px;background:rgba(255,255,255,.08)}
.lightbox__bar .lightbox__btn{position:static}
.lightbox__count{font-size:var(--t-meta);color:var(--ink-2);min-width:3.5em}
@media (max-width:560px){.lightbox__prev,.lightbox__next{top:auto;bottom:16px;transform:none}.lightbox__img{max-height:calc(100dvh - 160px)}}
@media (prefers-reduced-motion:reduce){.lightbox__img{transition:none}}
.lightbox__zoom{min-width:56px;min-height:48px;padding:0 var(--s-2);border:0;border-radius:999px;background:none;color:#fff;font-family:inherit;font-weight:600;font-size:var(--t-meta);line-height:1;font-variant-numeric:tabular-nums;cursor:pointer}
.lightbox__zoom:hover{background:rgba(255,255,255,.12)}
.lightbox__zoom:focus-visible{outline:2px solid var(--magenta-on-dark);outline-offset:2px}

/* ---------- Critica 13 ottobre: ingressi per risultato, processo, schede in arrivo ---------- */
/* Menu mobile: "Works" è un'etichetta, non un doppione di "Tutti i progetti" */
.nav__panel-label{display:flex;align-items:center;min-height:40px;padding:0 14px;font-size:var(--t-meta);font-weight:600;color:var(--ink-3)}

/* Quattro ingressi: colonne tra filetti, non card. Punto croce per il fisico, pixel per il digitale */
.doors{padding:var(--s-24) 0 var(--s-40)}
.doors h2{font-size:var(--t-display-l);max-width:14em;margin-bottom:var(--s-14)}
.doors__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.door{position:relative;display:flex;flex-direction:column;padding:var(--s-8) var(--s-8) 0 0}
.door + .door{padding-left:var(--s-8);border-left:1px solid var(--line)}
.door__motif{display:block;width:96px;height:12px;margin-bottom:var(--s-6)}
.door__motif path{stroke:var(--magenta-on-dark)}
.door__motif rect{fill:var(--magenta-on-dark)}
.door h3{font-size:min(var(--t-heading),2.125rem);line-height:1.08;letter-spacing:-.025em;text-wrap:balance}
.door h3 a{color:#fff;text-decoration:none}
.door h3 a:hover{color:var(--magenta-on-dark)}
.door > p{margin-top:var(--s-4);color:var(--ink-2);font-size:var(--t-body);line-height:1.6;max-width:32ch}
.door > .door__proof{margin-top:var(--s-3);font-size:var(--t-meta);color:var(--ink-3)}
.door__proof a{color:var(--ink-2);text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:.25em}
.door__proof a:hover{color:#fff;text-decoration-color:var(--magenta-on-dark)}
.door__go{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1) var(--s-6);margin-top:auto!important;padding-top:var(--s-6)}
.door__go a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:var(--t-label);font-weight:600;color:#fff;text-decoration:none}
.door__go a svg{width:16px;height:16px;color:var(--magenta-on-dark);transition:transform .3s var(--ease)}
.door__go a:hover svg{transform:translateX(3px)}
.door__go a + a{font-weight:500;color:var(--ink-2);text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:.3em}
.door__go a + a:hover{color:#fff;text-decoration-color:var(--magenta-on-dark)}
@media (max-width:1280px){
  .doors__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .door:nth-child(3){padding-left:0;border-left:0}
  .door:nth-child(n+3){margin-top:var(--s-10);border-top:1px solid var(--line)}
}
@media (max-width:640px){
  .doors__list{grid-template-columns:1fr}
  .door,.door + .door{padding:var(--s-6) 0 var(--s-2);border-left:0}
  .door + .door{margin-top:var(--s-6);border-top:1px solid var(--line)}
  .door > p{max-width:none}
}

/* Il processo: quattro passi uniti da una cucitura */
.process{margin-top:var(--s-24)}
.process__title{font-size:var(--t-heading);letter-spacing:-.025em;margin-bottom:var(--s-8)}
.process__steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-8)}
.process__steps li{position:relative;padding-top:var(--s-8)}
.process__steps li::before{content:"";position:absolute;left:0;top:5px;width:12px;height:12px;border-radius:50%;background:var(--magenta)}
.process__steps li:not(:last-child)::after{content:"";position:absolute;left:22px;right:calc(-1 * var(--s-8) + 10px);top:10px;border-top:2px dashed rgba(184,8,67,.45)}
.process__steps b{display:block;font-size:var(--t-title);font-weight:600;letter-spacing:-.015em;color:var(--paper-ink)}
.process__steps span{display:block;margin-top:var(--s-2);font-size:var(--t-body);line-height:1.55;color:var(--paper-ink-2);max-width:30ch}
@media (max-width:900px){
  .process__steps{grid-template-columns:1fr;gap:0}
  .process__steps li{padding:0 0 var(--s-8) var(--s-10)}
  .process__steps li::before{top:6px}
  .process__steps li:not(:last-child)::after{left:5px;right:auto;top:26px;bottom:2px;border-top:0;border-left:2px dashed rgba(184,8,67,.45)}
}

/* Righe del capannone ancora senza foto */

/* Muro clienti: ogni nome porta alla sua pagina */
.clients li a{color:inherit;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.18em;text-decoration-color:transparent;transition:text-decoration-color .3s var(--ease)}
.clients li a:hover{text-decoration-color:var(--magenta-on-dark)}

/* Card dell'anello e righe dell'indice senza foto vera */
.card--soon .card__cap i{color:var(--ink-2)}
.card--soon .card__cap i svg{display:none}
.index__soon{display:inline-block;margin-left:var(--s-2);padding:1px 8px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);font-size:var(--t-caption-sub);color:var(--ink-3);white-space:nowrap}

/* Pagina progetto senza testi o foto: niente segnaposto, una nota e due uscite */
.p-cover--soon{background:var(--ground-3)}
.p-cover__soon{position:absolute;left:16px;bottom:16px;z-index:2;padding:6px 12px;border-radius:999px;background:rgba(5,2,3,.78);color:#fff;font-size:var(--t-caption);font-weight:500}
.p-soon{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-6) var(--s-10);padding-top:var(--s-8);border-top:1px solid var(--line)}
.p-soon__msg{font-size:var(--t-lead);color:var(--ink-2);max-width:40ch}
.p-soon__go{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-8)}

/* Works: il caso più completo apre la griglia a tutta larghezza */
.case--lead{grid-column:1 / -1;aspect-ratio:16/7}
@media (max-width:900px){.case--lead{aspect-ratio:4/3}}

/* Portatili bassi (1366×768 meno il browser): titolo e spazi più compatti, così l'anello resta leggibile sopra la piega */
@media (max-height:780px) and (min-width:700px){
  .hero__copy{padding-top:clamp(96px,14vh,116px)}
  .hero h1{font-size:clamp(2.5rem,.6rem + 3vw + 3.2vh,4.75rem)}
  .hero__sub{margin-top:var(--s-4)}
  .hero__actions{margin-top:var(--s-6)}

}
/* Telefono: frecce e barra dello zoom su due righe; percorso senza la pagina corrente (la ripete il titolo) */
@media (max-width:560px){
  .lightbox__bar{bottom:72px}
  .lightbox__img{max-height:calc(100dvh - 210px)}
  .crumbs [aria-current],.crumbs span[aria-hidden]:has(+ [aria-current]){display:none}
}
/* Tavole di marchio (loghi, palette): intere, su bianco, mai ritagliate */
.p-cover--board,.p-gallery .g-board{background:#fff}
.p-cover--board img,.p-gallery .g-board img{object-fit:contain}
@media (max-width:900px){.p-cover--board{aspect-ratio:2/1;min-height:0}}
.case--board .case__media{background:#fff}
/* Contenuti non ancora forniti: la sezione resta, il testo lo dice */
.pending{color:var(--ink-3);font-weight:400}
.p-row p.pending{font-size:var(--t-body)}
@media (max-width:900px){.p-gallery .g-tall{aspect-ratio:3/4}} /* foto verticali: niente ritaglio a 4:3 su telefono */
/* video verticali in galleria: ritaglio 4:5 centrato, così non diventano altissimi */
.p-gallery .g-video.g-crop{aspect-ratio:4/5}
.p-gallery .g-video.g-crop video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* slide di presentazione in galleria: intere, su fondo scuro, senza ritaglio */
.p-gallery .g-slide{aspect-ratio:16/9;min-height:0;background:#0b0a1a}
.p-gallery .g-slide img{object-fit:contain}
/* Pagina servizio Fashion Gaming: il capo fisico e il suo gemello nel gioco, affiancati */
.fg-twin{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4);margin-top:var(--s-10)}
.fg-twin figure{position:relative;margin:0;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:var(--ground-3)}
.fg-twin img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fg-twin figcaption{position:absolute;left:var(--s-4);bottom:var(--s-4);right:var(--s-4);display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:8px;background:rgba(5,2,3,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:var(--t-meta);color:var(--ink-2);max-width:max-content}
.fg-twin figcaption b{font-size:var(--t-label);font-weight:600;color:#fff}
.fg-twin figure + figure figcaption b::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:2px;background:var(--magenta-on-dark);vertical-align:1px}
.fg-twin figure:first-child figcaption b::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--magenta-on-dark);vertical-align:1px}
.doors__list--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.fg-services{padding-top:var(--s-16)}
.fg-process{margin-top:0}
@media (max-width:1280px){.doors__list--3 .door:nth-child(3){padding-left:var(--s-8);border-left:1px solid var(--line);margin-top:0;border-top:0}}
@media (max-width:899px){.doors__list--3{grid-template-columns:1fr}.doors__list--3 .door,.doors__list--3 .door + .door,.doors__list--3 .door:nth-child(3){padding:var(--s-6) 0 var(--s-2);border-left:0}.doors__list--3 .door + .door{margin-top:var(--s-6);border-top:1px solid var(--line)}}
@media (max-width:599px){.fg-twin{grid-template-columns:1fr}}
/* Ricerca e Sviluppo: un progetto per riga, immagine e testo affiancati */
.rd__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.rd__list li{border-bottom:1px solid var(--line)}
.rd__item{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:var(--s-6) var(--s-16);align-items:center;padding:var(--s-10) 0;color:#fff;text-decoration:none}
.rd__thumb{position:relative;display:block;aspect-ratio:16/10;border-radius:var(--radius);overflow:hidden;background:var(--ground-3)}
.rd__thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.rd__text{display:flex;flex-direction:column;align-items:flex-start}
.rd__tag{font-size:var(--t-label);font-weight:600;color:var(--magenta-on-dark)}
.rd__name{margin-top:var(--s-2);font-size:var(--t-display-l);font-weight:800;line-height:1;letter-spacing:-.03em;transition:color .25s}
.rd__desc{margin-top:var(--s-4);font-size:var(--t-lead);line-height:1.55;color:var(--ink-2);max-width:46ch}
.rd__go{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:var(--s-4);font-size:var(--t-label);font-weight:600}
.rd__go svg{width:16px;height:16px;color:var(--magenta-on-dark);transition:transform .3s var(--ease)}
.rd__item:hover .rd__name{color:var(--magenta-on-dark)}
.rd__item:hover .rd__thumb img{transform:scale(1.03)}
.rd__item:hover .rd__go svg{transform:translateX(3px)}
.rd__item:focus-visible{outline:2px solid #fff;outline-offset:6px;border-radius:var(--radius)}
@media (max-width:899px){.rd__item{grid-template-columns:1fr;padding:var(--s-8) 0}}
@media (prefers-reduced-motion:reduce){.rd__thumb img,.rd__go svg{transition:none}}
.p-gallery .g-45{aspect-ratio:4/5}

/* Home: "Un'unica regia…" sta sul fondo nero subito dopo l'hero, "Da cosa partiamo?" sul fondo bianco sotto */
.factory--dark{background:var(--ground);color:#fff}
.factory--dark .factory__intro{color:var(--ink-2)}
.factory--dark .process__steps b{color:#fff}
.factory--dark .process__steps span{color:var(--ink-2)}
.factory--dark .process__steps li::before{background:var(--magenta-on-dark)}
.factory--dark .process__steps li:not(:last-child)::after{border-top-color:rgba(255,90,140,.45)}

.doors--light{--line:var(--paper-line);background:#fff;color:var(--paper-ink)}
.doors--light .door__motif path{stroke:var(--magenta)}
.doors--light .door__motif rect{fill:var(--magenta)}
.doors--light .door h3,.doors--light .door h3 a{color:var(--paper-ink)}
.doors--light .door h3 a:hover{color:var(--magenta-deep)}
.doors--light .door > p{color:var(--paper-ink-2)}
.doors--light .door > .door__proof{color:var(--paper-ink-2)}
.doors--light .door__proof a{color:var(--paper-ink);text-decoration-color:rgba(20,10,13,.3)}
.doors--light .door__proof a:hover{color:var(--magenta-deep);text-decoration-color:var(--magenta)}
.doors--light .door__go a{color:var(--paper-ink)}
.doors--light .door__go a svg{color:var(--magenta)}
.doors--light .door__go a + a{color:var(--paper-ink-2);text-decoration-color:rgba(20,10,13,.3)}
.doors--light .door__go a + a:hover{color:var(--paper-ink);text-decoration-color:var(--magenta)}
.doors--light a:focus-visible{outline-color:var(--magenta)}
/* "Un'unica regia…": foto dello studio (laboratorio a sinistra, postazioni gaming a destra) velata di nero al 50% */
/* la foto sta in un livello alto quanto la sezione a tendine chiuse (--fh, misurata dallo script): aprendo le tendine la sezione cresce ma la foto non si ingrandisce; sotto sfuma nel nero */
.factory--dark{position:relative;isolation:isolate;background:var(--ground)}
/* la foto resta ferma rispetto alla finestra (effetto "finestra" sullo studio) mentre la sezione scorre; le sfumature in alto e in basso scorrono con la sezione */
.factory--dark::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(var(--ground) 0%,rgba(0,0,0,.8) 24%,rgba(0,0,0,.8) 86%,var(--ground) 100%),url("media/sfondo-regia.jpg") center / cover no-repeat fixed}
/* telefoni e tablet (iOS ignora lo sfondo fisso): foto normale, alta quanto la sezione a tendine chiuse */
@media (hover:none),(max-width:899px){.factory--dark::before{bottom:auto;height:min(var(--fh,100%),820px);background:linear-gradient(var(--ground) 0%,rgba(0,0,0,.8) 12%,rgba(0,0,0,.8) 70%,var(--ground) 100%),url("media/sfondo-regia.jpg") 24% center / cover no-repeat}}
/* Fisico / Digitale: ogni sottocategoria è una tendina (details) che apre i progetti d'esempio */
/* Logo SUD in apertura della sezione Fisico/Digitale (da animare) */
.factory__logo{display:block;width:clamp(180px,22vw,320px);height:auto;margin:0 auto var(--s-10)}
.factory--dark .wrap > h2,.factory--dark .factory__intro{margin-left:auto;margin-right:auto;text-align:center}
.factory--dark .wrap > h2{font-size:calc(var(--t-display-l) - 10px)}

/* Sezioni allineate al menu: il contenuto parte dal logo SUD e finisce con "Contattaci" */
.nav{padding:0 16px}
@media (max-width:560px){:root{--gutter:26px}.nav{padding:0 10px 0 16px}}


/* "Come lavoriamo" centrato (su desktop; su telefono resta la linea verticale a sinistra) */
.process__title{text-align:center}
@media (min-width:901px){
  .process__steps li{text-align:center}
  .process__steps span{margin-left:auto;margin-right:auto}
  .process__steps li::before{left:50%;margin-left:-6px}
  .process__steps li:not(:last-child)::after{left:calc(50% + 12px);right:calc(12px - 50% - var(--s-8))}
}
/* "Da cosa partiamo?" resta alla larghezza di prima (non allineata al menu) */
.doors--light > .wrap{max-width:1320px;padding:0 clamp(16px,4vw,56px)}

/* Voci del menu centrate nella barra (il logo a sinistra e IT|EN + Contattaci a destra hanno larghezze diverse) */
@media (min-width:901px){.nav > nav{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}}

/* Fascia loghi tra "Una doppia anima…" e "Da cosa partiamo?": scorrimento continuo, non interattivo */
.logos{position:relative;overflow:hidden;padding:var(--s-8) 0;background:var(--magenta);pointer-events:none;user-select:none}
.logos__mask{-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.logos__track{display:flex;width:max-content;animation:logos-scroll 45s linear infinite}
.logos__list{display:flex;align-items:center;gap:72px;margin:0;padding:0 36px;list-style:none}
.logos__list li{display:flex;align-items:center;height:48px}
.logos__ph{display:block;height:28px;width:auto;color:rgba(255,255,255,.75)}
@keyframes logos-scroll{to{transform:translateX(-50%)}}
@media (max-width:560px){.logos{padding:var(--s-6) 0}.logos__list{gap:48px;padding:0 24px}.logos__ph{height:22px}}


/* icone dei filtri più spesse, leggibili anche piccole */
.hero__filter svg{stroke-width:2.2}

/* "Una doppia anima…": il puntino delle i di "fisica" e "design" in magenta (un disco sopra il puntino originale) */
.idot{position:relative}
.idot::after{content:"";position:absolute;left:.039em;top:.224em;width:.23em;height:.23em;border-radius:50%;background:var(--magenta)} /* misurato sul puntino della i di Poppins 800 */

/* People & Factory (e le altre testate di sezione): titolo e testo non si sovrappongono più */
@media (min-width:1100px){.section__head{display:flex;flex-wrap:wrap}.section__head > p{max-width:34em}}

/* Contatti: con la nuova larghezza il form va sotto al titolo, e l'email resta su una riga */
.contact__grid--form{grid-template-columns:1fr;gap:var(--s-10)}
.contact__grid--form .contact__info{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s-4) var(--s-8)}
.contact__grid--form .contact__info > div + div{margin-top:0}
.contact__info dd a[href^="mailto:"]{white-space:nowrap}

/* Contatti: icona Instagram tra le informazioni e il form */
.contact__social{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;margin-top:var(--s-6);border-radius:50%;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7);transition:background-color .2s,color .2s}
.contact__social svg{width:24px;height:24px}
.contact__social:hover{background:#fff;color:var(--magenta)}
.contact__social:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* "Da cosa partiamo?": i link "Vedi…" sottolineati */
.doors--light .door__go a{text-decoration:underline;text-decoration-color:var(--magenta);text-decoration-thickness:2px;text-underline-offset:.3em}
.doors--light .door__go a:hover{color:var(--magenta-deep)}
/* Hero inglese: il sottotitolo sta su una riga sola (su telefono va a capo normalmente) */
/* sottotitolo EN: niente nowrap, la frase è più lunga */
/* Hero: il testo centrato non segue la larghezza del menu, così "The Real Phygital Company." resta su due righe */
.hero__copy.wrap{max-width:1320px}
/* "Guarda i progetti" in fondo all'hero, sotto le card dell'anello (lo script lascia lo spazio sotto la ruota) */
.hero__cta{position:absolute;left:0;right:0;bottom:max(20px,3vh);z-index:3;display:flex;justify-content:center;pointer-events:none}
.hero__cta .btn{pointer-events:auto}
.hero__cta.rise{animation-delay:.5s}

/* Filtri dell'hero: su desktop icona + nome, su tablet e telefono solo icona */
@media (min-width:900px){
  .hero__filter:not(.hero__filter--all){width:auto;padding:0 18px 0 14px}
  .hero__filter-label{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:nowrap}
  .hero__filter svg{width:18px;height:18px}
}

/* Telefono e tablet: aree da toccare almeno 44px (selettore lingua) */
@media (max-width:900px){
  .nav__lang > *{min-width:44px;min-height:44px}
}

/* Anello: la card davanti mostra sempre il suggerimento "Apri il progetto" */
.card.is-front .card__cap{transform:translateY(0)}
.card.is-front .card__cap i{opacity:1}
@media (hover:none){.card.is-front .card__cap i{display:flex}}

/* Didascalie dell'anello: l'area va su due righe invece di essere tagliata ("Gaming × Fashion", "App · Gioco · Mappa") */
.card__cap span{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.3}

/* Fascia clienti: per ora i nomi scritti, in bianco sul magenta */
.logos__list--names{gap:56px}
.logos__list--names li{height:48px;font-size:1.0625rem;font-weight:700;letter-spacing:-.01em;color:#fff;white-space:nowrap}
@media (max-width:560px){.logos__list--names{gap:40px}.logos__list--names li{font-size:.9375rem}}
/* con "riduci movimento" la fascia si ferma: i nomi vanno a capo e restano fermi */
@media (prefers-reduced-motion:reduce){
  .logos__track{animation:none;width:auto}
  .logos__list[aria-hidden="true"]{display:none}
  .logos__list--names{flex-wrap:wrap;justify-content:center;row-gap:8px;padding:0 var(--gutter)}
  .logos__mask{-webkit-mask-image:none;mask-image:none}
}

/* "Da cosa partiamo?": invito a chiamare sotto le porte */
.doors__call{margin-top:var(--s-10);font-size:var(--t-body);color:var(--paper-ink-2)}
.doors__call a{color:var(--paper-ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--magenta);text-decoration-thickness:2px;text-underline-offset:.3em}
.doors__call a:hover{color:var(--magenta-deep)}
/* secondo link delle porte ("Parliamone"): più leggero di "Vedi…" */
.doors--light .door__go a + a{font-weight:500;color:var(--paper-ink-2);text-decoration-color:rgba(20,10,13,.3);text-decoration-thickness:1px}

/* Contatti: la promessa del referente unico sotto il titolo */
.contact__promise{margin-top:var(--s-4);font-size:var(--t-lead);font-weight:500;color:#fff}

/* Home, "Tre divisioni": triangolo che ruota piano; i loghi seguono i vertici restando orizzontali.
   Il logo che arriva in alto apre la sua scheda; cliccando un logo lo si porta in alto. */
.dv{overflow:hidden;padding-top:var(--s-24)}
.dv > .wrap{max-width:1320px;padding:0 clamp(16px,4vw,56px)}
.dv__head{text-align:center;margin:0 auto var(--s-10)}
.dv__head h2{font-size:var(--t-display-l)}
.dv__head p{max-width:42em;margin:var(--s-4) auto 0;text-wrap:balance;color:var(--ink-2);font-size:var(--t-lead)}
.dv__grid{display:grid;gap:var(--s-10);align-items:center}
@media (min-width:980px){.dv__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--s-16)}}
.dv__stage{position:relative;width:min(100%,620px);aspect-ratio:1;margin:0 auto}
.dv__stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.dv__logo{position:absolute;left:0;top:0;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;will-change:transform;-webkit-tap-highlight-color:transparent;transition:opacity .5s}
.dv__logo img{display:block;width:27%;height:auto;transition:transform .35s var(--ease),filter .35s var(--ease)}
.dv__cap{max-width:100%;text-align:center;font-size:var(--t-caption);font-weight:600;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:var(--c)}
.dv__logo:hover img,.dv__logo:focus-visible img,.dv__logo[aria-pressed="true"] img{transform:scale(1.06);filter:drop-shadow(0 0 16px var(--c))}
.dv__logo[aria-pressed="false"]{opacity:.6}
.dv__logo:hover{opacity:1}
.dv__logo:focus-visible{outline:2px solid var(--c);outline-offset:8px;border-radius:8px}
.dv__panel{display:grid}
.dv__card{grid-area:1/1;border-left:1px solid var(--c);padding:4px 0 4px clamp(20px,3vw,32px);transition:opacity .6s var(--ease),visibility .6s}
.dv__card[hidden]{display:block;visibility:hidden;opacity:0}
.dv__eyebrow{margin:0;font-size:var(--t-meta);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--c)}
.dv__card h3{margin-top:var(--s-2);font-size:var(--t-heading)}
.dv__lead{margin:var(--s-4) 0 0;color:var(--ink-2);font-size:var(--t-lead);line-height:1.55;max-width:34ch}
.dv__units{list-style:none;margin:var(--s-6) 0 0;padding:0;display:grid;gap:var(--s-4)}
.dv__units li{color:var(--ink-2);line-height:1.5}
.dv__units strong{display:block;color:#fff;font-weight:600}
@media (prefers-reduced-motion:reduce){.dv__card,.dv__logo img{transition:none}}
/* "3" e "1" del titolo: evidenziati come una selezione di testo, cifra bianca su magenta */
.dv__hl{display:inline-block;padding:0 .12em;margin:0 .02em;background:var(--magenta);color:#fff;line-height:1.05}
.dv__nw{white-space:nowrap}

/* "Fisico e digitale uniti dal design": parole evidenziate come una selezione di testo */
.hl{display:inline-block;padding:0 0 .14em;background:var(--magenta);color:#fff;line-height:1.1} /* sotto: spazio per le discendenti (la g di design) */
.hl--inv{background:#fff;color:var(--magenta)}
.factory--dark .wrap > h2{font-size:calc((var(--t-display-l) - 10px) * .64)}

/* Logo SUD della sezione: entra in dissolvenza, poi la parte fucsia della D si accende per mezzo secondo */
.factory__mark{position:relative;display:block;width:clamp(180px,22vw,320px);margin:-24px auto calc(var(--s-10) + 44px)} /* mezza riga più in alto, il titolo resta dov'era */
.factory__mark .factory__logo{width:100%;margin:0}
.factory__accent{position:absolute;inset:0;width:100%;height:auto;pointer-events:none}
.factory__mark.is-wait{opacity:0}
.factory__mark.is-in{animation:markIn 3s cubic-bezier(.4,0,.2,1) forwards}
@keyframes markIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.factory__mark.is-in,.factory__mark.is-in .factory__glow{animation:none}}
@media (min-width:760px){.factory--dark .wrap > h2{max-width:none;white-space:nowrap}}
/* Bagliore circolare: dal secondo 1,5 (a metà del fade) una luce gira due volte lungo la parte fucsia della D, 1 s a giro.
   Il centro della maschera (76% 40%) è il centro della curva della D nel file del logo. */
@property --glow-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.factory__glow{position:absolute;inset:0;width:100%;height:auto;pointer-events:none;opacity:0;
  filter:brightness(2.08) drop-shadow(0 0 8px rgba(255,45,122,1)) drop-shadow(0 0 23px rgba(223,7,79,.91));
  -webkit-mask-image:conic-gradient(from var(--glow-a) at 76% 40%,transparent 0deg,#000 50deg,#000 80deg,transparent 140deg,transparent 360deg);
          mask-image:conic-gradient(from var(--glow-a) at 76% 40%,transparent 0deg,#000 50deg,#000 80deg,transparent 140deg,transparent 360deg)}
.factory__mark.is-in .factory__glow{animation:markSweep 1s linear 1.5s 2}
@keyframes markSweep{0%{--glow-a:-90deg;opacity:0}15%{opacity:1}85%{opacity:1}100%{--glow-a:270deg;opacity:0}}

/* "Da cosa partiamo?": i due link di ogni porta uno sotto l'altro, così "Parliamone" è allineato in tutte e quattro */
.doors--light .door__go{flex-direction:column;align-items:flex-start;align-self:flex-start;gap:0} /* link a bandiera a sinistra; il gruppo è largo quanto il più lungo dei due */
.doors--light .door__go a + a{align-self:center} /* pulsante centrato sul link: se il link è più corto, il pulsante parte dal margine sinistro */

/* Fascia magenta: loghi bianchi. Larghezza e altezza (negli attributi) danno a tutti la stessa area visiva, altezza massima 64 px */
.logos__list--img{gap:64px}
.logos__list--img li{height:72px}
.logos__list--img img{display:block;max-width:none}
@media (max-width:560px){.logos__list--img{gap:44px}.logos__list--img li{zoom:.72}}
@media (prefers-reduced-motion:reduce){.logos__list--img{flex-wrap:wrap;justify-content:center;row-gap:16px;padding:0 var(--gutter)}}

/* Porte: «Configura un preventivo» è il pulsante pieno magenta, «Scopri» resta il link secondario sopra */
.doors--light .door__go a + a{margin-top:var(--s-4);min-height:48px;padding:0 20px;border-radius:999px;line-height:1;white-space:nowrap;background:var(--magenta);color:#fff;font-weight:600;text-decoration:none;
  box-shadow:0 10px 24px -14px rgba(20,10,13,.55);transition:background-color .25s var(--ease),transform .25s var(--ease)}
.doors--light .door__go a + a:hover{background:var(--magenta-deep);color:#fff}
.doors--light .door__go a + a:focus-visible{outline:2px solid var(--magenta-deep);outline-offset:3px}
.doors--light .door__go a + a:active{transform:translateY(1px)}
/* «Scopri» occupa sempre lo spazio di due righe, appoggiato in basso: i pulsanti restano allineati anche se un link va a capo */
@media (min-width:641px){.doors--light .door__go a:first-child{min-height:3.2em;align-items:flex-end}}

/* Filtri dell'hero: icona + nome a ogni larghezza (le etichette sono brevi) */
.hero__filter:not(.hero__filter--all){width:auto;padding:0 18px 0 14px}
.hero__filter-label{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:nowrap}
.hero__filter svg{width:18px;height:18px}
/* Telefono: una sola riga che scorre di lato; centrata quando c'è posto, sfumata ai bordi quando non c'è */
@media (max-width:599px){
  .hero__filters{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;pointer-events:auto;width:100vw;flex:0 0 100vw;max-width:none;margin:0 calc(50% - 50vw);padding:4px 20px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent)}
  .hero__filters::-webkit-scrollbar{display:none}
  .hero__filter{flex:none;scroll-snap-align:center}
  .hero__filter:first-child{margin-left:auto}
  .hero__filter:last-child{margin-right:auto}
  .hero__filter:not(.hero__filter--all){padding:0 16px 0 12px}
}

/* Consenso privacy: area da toccare di 44px, la casella disegnata resta di 22px */
.check{gap:2px;margin-left:-11px}
.check input{-webkit-appearance:none;appearance:none;width:44px;height:44px;margin:-10px 0 0;border-radius:6px;background:
  linear-gradient(#fff,#fff) center/18px 18px no-repeat,
  linear-gradient(var(--paper-ink-2),var(--paper-ink-2)) center/22px 22px no-repeat}
.check input:hover{background:linear-gradient(#fff,#fff) center/18px 18px no-repeat,linear-gradient(var(--magenta-deep),var(--magenta-deep)) center/22px 22px no-repeat}
.check input:checked{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M5.5 11.5l3.5 3.5 7.5-8' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px 22px no-repeat,linear-gradient(var(--magenta),var(--magenta)) center/22px 22px no-repeat}
.check input[aria-invalid="true"]:not(:checked){background:linear-gradient(#fff,#fff) center/18px 18px no-repeat,linear-gradient(var(--burgundy),var(--burgundy)) center/22px 22px no-repeat}
.check input:focus-visible{outline:2px solid var(--burgundy);outline-offset:-4px}
.check label{padding-top:2px}

/* Triangolo su telefono: didascalie su due righe, così le due in basso non si avvicinano */
@media (max-width:559px){.dv__cap{max-width:10.5em;letter-spacing:.04em;text-wrap:balance}}

/* "Da cosa partiamo?": la r tocca la t, un filo di spazio dopo la r */
.kern-rt{letter-spacing:.035em}

/* Piè di pagina: link legali (privacy, cookie, informazioni societarie) */
.foot__links{display:flex;flex-wrap:wrap;align-items:center}
.foot .foot__links a{display:inline-flex;align-items:center;min-height:44px;padding:0;border-radius:0;font-size:inherit;color:inherit;text-decoration:underline;text-decoration-color:rgba(255,255,255,.25);text-underline-offset:.25em;transition:color .2s,text-decoration-color .2s}
.foot .foot__links a:hover{background:none;color:#fff;text-decoration-color:var(--magenta-on-dark)}
.foot__links span{white-space:pre;margin:0 .3em}
.foot__legal{align-items:center}
.legal__body h2{scroll-margin-top:110px}
.foot__legal > span:first-child{flex-basis:100%}

/* Configuratore del modulo contatti: titolo e stima del budget di partenza */
.brief__title{margin:0 0 var(--s-2);font-size:clamp(1.375rem,1.1rem + 1vw,1.875rem);line-height:1.15;color:var(--paper-ink);text-wrap:balance}
/* La stima è sempre al suo posto, in fondo al passo 1, come riga di risultato sotto un filetto: vuota mostra solo l'invito a scegliere */
.brief__estimate{display:grid;gap:2px;padding-top:var(--s-4);border-top:1px solid var(--paper-line)}
.brief__estimate-label{font-size:var(--t-meta);font-weight:600;color:var(--paper-ink-2)}
.brief__estimate-range{font-size:clamp(1.375rem,1.1rem + 1vw,1.875rem);font-weight:600;line-height:1.2;color:var(--paper-ink);font-variant-numeric:tabular-nums}
.brief__estimate-note{font-size:var(--t-meta);color:var(--paper-ink-2)}
.brief__estimate.is-empty .brief__estimate-label{color:var(--paper-ink)}
.brief__estimate-range[hidden]{display:none}

/* Due passi numerati: il progetto (con la stima), poi i dati per ricontattare */
.brief__intro{margin-bottom:var(--s-8)}
.brief__step + .brief__step{margin-top:var(--s-10);padding-top:var(--s-10);border-top:1px solid var(--paper-line)}
.brief__step-title{display:flex;align-items:center;gap:12px;margin:0 0 var(--s-6);font-size:var(--t-lead);font-weight:700;line-height:1.2;color:var(--paper-ink)}
.brief__num{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--magenta);color:#fff;font-size:.9375rem;font-weight:700;font-variant-numeric:tabular-nums}

.field[hidden]{display:none}

/* Configuratore: i cinque obiettivi su una sola riga, a colonne uguali (il testo lungo va a capo dentro il pulsante), e più aria prima delle opzioni */
.brief .brief__goals{margin-bottom:var(--s-10)}
/* Stessi riquadri anche su telefono: due colonne, l'ultimo obiettivo occupa tutta la riga */
.brief__goals .chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.brief__goals .chips label{justify-content:center;height:100%;min-height:56px;padding:8px 10px;border-radius:12px;text-align:center;text-wrap:balance}
.brief__goals .chips label:last-of-type{grid-column:1 / -1}
@media (min-width:760px){
  .brief__goals .chips{grid-template-columns:repeat(5,minmax(0,1fr))}
  .brief__goals .chips label:last-of-type{grid-column:auto}
}

/* ---------- Divisioni, entrata ----------
   Titolo: il magenta riempie da sinistra prima il riquadro del 3, poi quello dell'1.
   Le classi le mette sud.js (solo senza "riduci movimento"): senza script il titolo è quello di sempre. */
.dv__head .dv__hl{position:relative;isolation:isolate}
.dv__head.is-wait .dv__hl,.dv__head.is-in .dv__hl{background:none}
.dv__head.is-wait .dv__hl::after,.dv__head.is-in .dv__hl::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--magenta);clip-path:inset(0 100% 0 0)}
.dv__head.is-in .dv__hl::after{animation:dvFuse .55s cubic-bezier(.65,0,.35,1) .15s forwards}
.dv__head.is-in .dv__hl + .dv__hl::after{animation-delay:.55s}
@keyframes dvFuse{to{clip-path:inset(0 0 0 0)}}

/* Triangolo: i loghi compaiono mentre i vertici si aprono (la geometria la disegna sud.js) */
.dv__stage.is-unborn .dv__logo{opacity:0;transition:none}
.dv__stage.is-born .dv__logo{transition:opacity .9s var(--ease) .5s}

/* Cambio divisione: la scheda che entra arriva in sequenza, quella che esce sparisce più in fretta */
.dv__card[hidden]{transition-duration:.25s}
.dv__card:not([hidden]) :is(h3,.dv__lead,.dv__units li){animation:dvIn .6s var(--ease) both}
.dv__card:not([hidden]) .dv__lead{animation-delay:.06s}
.dv__card:not([hidden]) .dv__units li:nth-child(1){animation-delay:.12s}
.dv__card:not([hidden]) .dv__units li:nth-child(2){animation-delay:.16s}
.dv__card:not([hidden]) .dv__units li:nth-child(3){animation-delay:.2s}
.dv__card:not([hidden]) .dv__units li:nth-child(4){animation-delay:.24s}
.dv__card:not([hidden]) .dv__units li:nth-child(5){animation-delay:.28s}
@keyframes dvIn{from{opacity:0;transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){.dv__card:not([hidden]) :is(h3,.dv__lead,.dv__units li){animation:none}}

/* ---------- "Come lavoriamo": il filo cuce i quattro passaggi ----------
   Il tratteggio fra un punto e l'altro si scopre come una cucitura; ogni punto si accende quando il filo lo raggiunge
   e il testo del passaggio arriva subito dopo. Le classi le mette sud.js (solo senza "riduci movimento"). */
.process.is-wait .process__steps li::before{transform:scale(0)}
.process.is-wait .process__steps li::after{clip-path:inset(0 100% 0 0)}
.process.is-wait .process__steps :is(b,span){opacity:0;transform:translateY(8px)}
.process.is-in .process__steps li::before{animation:procDot .5s var(--ease) calc(var(--k) * .55s) both}
.process.is-in .process__steps li::after{animation:procThread .5s cubic-bezier(.65,0,.35,1) calc(var(--k) * .55s + .15s) both}
.process.is-in .process__steps :is(b,span){animation:procText .6s var(--ease) calc(var(--k) * .55s + .05s) both}
.process.is-in .process__steps span{animation-delay:calc(var(--k) * .55s + .12s)}
.process__steps li:nth-child(1){--k:0}.process__steps li:nth-child(2){--k:1}.process__steps li:nth-child(3){--k:2}.process__steps li:nth-child(4){--k:3}
@keyframes procDot{from{transform:scale(0)}}
@keyframes procThread{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes procText{from{opacity:0;transform:translateY(8px)}}
@media (max-width:900px){
  .process.is-wait .process__steps li::after{clip-path:inset(0 0 100% 0)}
  @keyframes procThread{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
}



/* ---------- Divisioni con i progetti (le ex tendine Fisico/Digitale) ----------
   Sotto ogni voce i progetti che la mostrano, come pillole nel colore della divisione. */
.dv__head h2{max-width:none;margin-left:auto;margin-right:auto}
.dv__works{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s-2)}
.dv__works a{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:999px;font-size:var(--t-meta);font-weight:500;line-height:1.2;color:#fff;text-decoration:none;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 50%,transparent);transition:background-color .2s,box-shadow .2s}
.dv__works a:hover{background:color-mix(in srgb,var(--c) 16%,transparent);box-shadow:inset 0 0 0 1px var(--c)}
.dv__works a:focus-visible{outline:2px solid var(--c);outline-offset:2px}
@media (max-width:900px){.dv__works a{min-height:44px;padding:0 16px}}
/* Progetti di ogni voce: il titolo in bianco apre la sua tendina (details/summary), con la sola freccetta */
.dv__drop{position:relative;display:block}
.dv__drop summary{display:inline-flex;align-items:center;gap:10px;cursor:pointer;list-style:none;border-radius:4px}
.dv__drop summary::-webkit-details-marker{display:none}
.dv__drop summary::after{content:"";flex:none;width:7px;height:7px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:translateY(-3px) rotate(45deg);transition:transform .2s var(--ease),border-color .2s}
.dv__drop[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.dv__drop summary:hover::after,.dv__drop[open] summary::after{border-color:var(--c)}
.dv__drop summary:focus-visible{outline:2px solid var(--c);outline-offset:4px}
.dv__drop .dv__works{position:absolute;left:0;top:calc(100% + 8px);z-index:20;min-width:220px;max-width:min(320px,80vw);margin:0;padding:6px;
  display:flex;flex-direction:column;gap:2px;background:var(--ground-2);border:1px solid color-mix(in srgb,var(--c) 40%,transparent);border-radius:var(--radius);box-shadow:0 18px 40px rgba(0,0,0,.55)}
.dv__drop .dv__works a{min-height:40px;padding:0 12px;border-radius:8px;box-shadow:none}
.dv__drop .dv__works a:hover{box-shadow:none}
.dv__units li:has(.dv__drop[open]){position:relative;z-index:20}
@media (max-width:900px){.dv__drop summary{min-height:44px}.dv__drop .dv__works a{min-height:44px}}

/* ---------- People & Factory: due riquadri uguali ----------
   Stessa larghezza e stessa forma (quadrata) per The Factory e The People, su computer e su telefono:
   la foto verticale perde un po' in alto e in basso, quella orizzontale un po' ai lati (vedi object-position nell'HTML). */
.pf__grid{align-items:start}
@media (min-width:901px){.pf__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pf__tile,.pf__tile--light{min-height:0;aspect-ratio:1/1}
/* la sfumatura sotto la didascalia parte più in basso: copre meno foto */
.pf__tile figcaption{padding-top:56px}