/* ==========================================================
   GMAN · Geremia Manente — stile
   Notte blu, rosso del logo, acciaio per la rete.
   ========================================================== */
:root{
  --night:#04060b;
  --panel:#0a0f18;
  --panel-a:rgba(8,12,20,.74);
  --line:rgba(220,230,242,.13);
  --red:#ff1e24;
  --red-d:#b3121a;
  --steel:#3a4a62;
  --ice:#e8eef6;
  --mute:#8f9bb0;
  --gut:clamp(16px,6vw,96px);
  --display:'Unbounded',system-ui,sans-serif;
  --text:'IBM Plex Sans',system-ui,sans-serif;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--night); -webkit-text-size-adjust:100%; overflow-x:clip; }
body{
  margin:0; background:var(--night); color:var(--ice);
  font-family:var(--text); font-size:17px; line-height:1.65; font-weight:400;
  overflow-x:clip; -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
h1,h2,h3{ font-family:var(--display); font-weight:500; margin:0; letter-spacing:-.02em; line-height:1.08; }
p{ margin:0; }
::selection{ background:var(--red); color:#fff; }
:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }
[hidden]{ display:none!important; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.skip{ position:fixed; left:12px; top:-60px; z-index:300; background:var(--red); color:#fff; padding:10px 16px; text-decoration:none; }
.skip:focus{ top:12px; }

/* contenuti dal pannello: nasconde per un istante il testo predefinito */
.c-wait [data-c], .c-wait [data-k]{ visibility:hidden; }

/* ---------------- scena 3D di sfondo ---------------- */
#scene{ position:fixed; inset:0; width:100vw; height:100vh; height:100lvh; z-index:0; display:block; }
.scene-veil{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(4,6,11,.75) 100%),
    linear-gradient(180deg, rgba(4,6,11,.55) 0%, transparent 18%);
}
html.no-3d body{
  background:
    radial-gradient(60% 50% at 75% 30%, rgba(255,30,36,.12), transparent 70%),
    radial-gradient(70% 60% at 20% 80%, rgba(58,74,98,.35), transparent 70%),
    var(--night);
  background-attachment:fixed;
}
main,.foot{ position:relative; z-index:1; }

/* barra di avanzamento */
.progress{ position:fixed; left:0; right:0; top:0; height:2px; z-index:60; pointer-events:none; }
.progress i{ display:block; height:100%; background:var(--red); transform:scaleX(0); transform-origin:left; box-shadow:0 0 12px var(--red); }

/* ---------------- barra in alto ---------------- */
.nav{
  position:fixed; z-index:50; left:0; right:0; top:0;
  display:flex; align-items:center; gap:2rem; padding:14px var(--gut);
  transition:background .4s, backdrop-filter .4s, padding .4s;
}
html.scrolled .nav{ background:rgba(4,6,11,.72); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); padding-top:8px; padding-bottom:8px; }
.nav-logo img{ height:46px; width:auto; transition:height .4s; }
html.scrolled .nav-logo img{ height:38px; }
.nav-links{ display:flex; gap:1.8rem; margin-left:auto; }
.nav-links a{ text-decoration:none; font-size:15px; color:var(--mute); transition:color .25s; }
.nav-links a:hover{ color:var(--ice); }
.nav-call{
  text-decoration:none; font-family:var(--display); font-size:13px; letter-spacing:.02em;
  padding:10px 18px; border:1px solid rgba(255,30,36,.55); border-radius:40px; white-space:nowrap;
  transition:background .25s, border-color .25s;
}
.nav-call:hover{ background:var(--red); border-color:var(--red); }
.nav-menu{ display:none; margin-left:auto; width:44px; height:44px; border:1px solid var(--line); border-radius:50%; background:rgba(4,6,11,.5); cursor:pointer; position:relative; }
.nav-menu span:not(.sr){ position:absolute; left:13px; right:13px; height:1.5px; background:var(--ice); transition:transform .3s, top .3s; }
.nav-menu span:nth-child(1){ top:17px; } .nav-menu span:nth-child(2){ top:25px; }
html.menu-open .nav-menu span:nth-child(1){ top:21px; transform:rotate(45deg); }
html.menu-open .nav-menu span:nth-child(2){ top:21px; transform:rotate(-45deg); }
.menu{
  position:fixed; inset:0; z-index:45; background:rgba(4,6,11,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  display:flex; flex-direction:column; justify-content:center; gap:1.1rem; padding:90px var(--gut) 40px;
}
.menu[hidden]{ display:none; }
.menu a{ font-family:var(--display); font-size:clamp(1.6rem,7vw,2.4rem); text-decoration:none; }
.menu a.menu-call{ margin-top:1.4rem; font-size:1.1rem; color:var(--red); }

/* ---------------- pulsanti ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:16px 28px; min-height:52px; text-decoration:none; font-weight:600; font-size:15.5px;
  border-radius:40px; border:1px solid transparent; cursor:pointer;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, background .3s, border-color .3s;
}
.btn-red{ background:var(--red); color:#fff; box-shadow:0 10px 30px -10px rgba(255,30,36,.6); }
.btn-red:hover{ transform:translateY(-3px); box-shadow:0 18px 40px -12px rgba(255,30,36,.75); }
.btn-line{ border-color:rgba(232,238,246,.3); background:rgba(4,6,11,.35); }
.btn-line:hover{ border-color:var(--ice); transform:translateY(-3px); }

/* ---------------- apertura ---------------- */
.hero{ position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center; padding:120px var(--gut) 110px; }
.hero::before{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg, rgba(4,6,11,.88) 0%, rgba(4,6,11,.55) 38%, transparent 64%); }
.hero-in{ max-width:780px; transform-style:preserve-3d; will-change:transform,opacity; }
.hero-who{ color:var(--mute); font-size:16px; margin-bottom:1.6rem; display:flex; align-items:center; gap:.8rem; }
.hero-who::before{ content:''; width:28px; height:2px; background:var(--red); flex:none; }
.hero-title{ font-size:clamp(2.3rem,6vw,5.9rem); font-weight:500; line-height:1.02; letter-spacing:-.035em; perspective:900px; transform-style:preserve-3d; }
.hl{ display:block; }
.hl > span{ display:inline-block; transform-style:preserve-3d; }
.hl-red{ color:var(--red); }
.hero-sub{ margin-top:1.8rem; max-width:34em; font-size:clamp(16px,1.35vw,19px); color:#c3ccd9; }
.hero-cta{ margin-top:2.4rem; display:flex; flex-wrap:wrap; gap:14px; perspective:600px; }
.hero-scroll{
  position:absolute; left:var(--gut); bottom:34px; display:flex; align-items:center; gap:14px;
  font-size:13.5px; color:var(--mute);
}
.hero-scroll i{ width:1px; height:44px; background:linear-gradient(var(--red),transparent); animation:drop 2.2s ease-in-out infinite; transform-origin:top; }
@keyframes drop{ 0%{ transform:scaleY(0); } 50%{ transform:scaleY(1); } 100%{ transform:scaleY(1); opacity:0; } }

/* ---------------- intestazioni di sezione ---------------- */
.sec-title{ font-size:clamp(2rem,4.6vw,4.2rem); letter-spacing:-.03em; perspective:800px; }
.sec-title .w{ display:inline-block; overflow:visible; }
.sec-title .w > i, .cont-title .w > i{ display:inline-block; font-style:normal; transform-style:preserve-3d; }
.sec-intro{ margin-top:1.1rem; max-width:36em; color:var(--mute); font-size:17.5px; }

/* ---------------- servizi ---------------- */
.servizi{ padding-top:16vh; }
.servizi .sec-head{ padding:0 var(--gut); max-width:calc(760px + 2*var(--gut)); }
.serv{
  position:relative; min-height:118vh; display:flex; align-items:center;
  padding:10vh var(--gut); perspective:1400px; overflow:clip;
}
/* sito web: sezione lunga, la scheda resta ferma mentre il laptop si apre */
.serv-tall{ min-height:250vh; align-items:flex-start; }
.serv-tall .serv-card{ position:sticky; top:clamp(90px,18vh,180px); }
.serv-right{ justify-content:flex-end; }
.serv-ghost{
  position:absolute; inset:0; display:flex; align-items:center; pointer-events:none; z-index:0; perspective:1000px;
}
.serv-ghost span{
  display:block; white-space:nowrap; font-family:var(--display); font-weight:700; letter-spacing:-.04em;
  font-size:clamp(4rem,13vw,13rem); line-height:1; color:transparent;
  -webkit-text-stroke:1px rgba(220,230,242,.11); transform-style:preserve-3d;
}
.serv-right .serv-ghost{ justify-content:flex-end; }
.serv-card{
  position:relative; z-index:1; width:min(540px,100%);
  background:var(--panel-a); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line); padding:clamp(26px,3.4vw,44px);
  transform-style:preserve-3d; will-change:transform,opacity;
}
/* angolari rossi: come le tacche di un mirino */
.serv-card::before,.serv-card::after{ content:''; position:absolute; width:26px; height:26px; border:2px solid var(--red); pointer-events:none; }
.serv-card::before{ left:-1px; top:-1px; border-right:0; border-bottom:0; }
.serv-card::after{ right:-1px; bottom:-1px; border-left:0; border-top:0; }
.serv-icon svg{ width:50px; height:50px; fill:none; stroke:var(--red); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; margin-bottom:1.4rem; }
.serv-card h3{ font-size:clamp(1.45rem,2.3vw,2.1rem); margin-bottom:1rem; }
.serv-text{ color:#c3ccd9; }
.serv-list{ list-style:none; margin:1.6rem 0 0; padding:1.4rem 0 0; border-top:1px solid var(--line); display:grid; gap:.7rem; perspective:600px; }
.serv-list li{ position:relative; padding-left:22px; font-size:15.5px; }
.serv-list li::before{ content:''; position:absolute; left:0; top:.62em; width:8px; height:8px; background:var(--red); transform:rotate(45deg); }

/* ---------------- progetti ---------------- */
.progetti{ position:relative; padding:14vh 0 10vh; overflow:hidden; }
.proj-stage{ position:relative; }
.proj-head{ padding:0 var(--gut); max-width:calc(820px + 2*var(--gut)); }
.proj-filters{ display:flex; flex-wrap:wrap; gap:8px; padding:1.6rem var(--gut) 0; }
.proj-filters button{
  padding:9px 16px; border-radius:30px; border:1px solid var(--line); background:rgba(4,6,11,.5);
  font-size:14px; cursor:pointer; color:var(--mute); transition:all .25s;
}
.proj-filters button:hover{ color:var(--ice); border-color:rgba(232,238,246,.35); }
.proj-filters button[aria-pressed="true"]{ background:var(--red); border-color:var(--red); color:#fff; }
.proj-ring{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; padding:2rem var(--gut) 0; }
.proj-nav{ display:none; }
.proj-static{ list-style:none; padding:0; margin:0; display:grid; gap:1rem; grid-column:1/-1; }
.proj-static h3{ font-size:1.1rem; }
.proj-static p{ color:var(--mute); font-size:15px; }
.pcard{
  display:flex; flex-direction:column; text-align:left; padding:0; cursor:pointer;
  background:var(--panel); border:1px solid var(--line); overflow:hidden;
  transition:border-color .4s, box-shadow .4s;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.pcard:hover, .pcard.on{ border-color:rgba(255,30,36,.6); box-shadow:0 30px 80px -24px rgba(255,30,36,.38); }
.pc-media{ display:block; aspect-ratio:4/3; overflow:hidden; background:#070b13; }
.pc-media img, .pc-media .art{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.8,.2,1); }
.pcard:hover .pc-media img, .pcard:hover .pc-media .art{ transform:scale(1.05); }
.pc-body{ display:flex; flex-direction:column; gap:.45rem; padding:18px 20px 22px; }
.pc-cat{ color:var(--red); font-size:13px; font-weight:500; }
.pc-title{ font-family:var(--display); font-size:1.08rem; line-height:1.25; letter-spacing:-.01em; }
.pc-sum{ color:var(--mute); font-size:14.5px; line-height:1.55; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.proj-empty{ color:var(--mute); }

/* con le animazioni: cilindro 3D bloccato a schermo */
html.motion-on .progetti:not(.flat){ height:100vh; height:100svh; padding:0; }
html.motion-on .progetti:not(.flat) .proj-stage{ height:100%; display:flex; flex-direction:column; padding-top:clamp(84px,12vh,130px); }
html.motion-on .progetti:not(.flat) .proj-ring{
  display:block; position:relative; flex:1; padding:0; perspective:1900px; perspective-origin:50% 40%;
  transform-style:preserve-3d; min-height:0;
}
html.motion-on .progetti:not(.flat) .pcard{
  position:absolute; left:50%; top:50%; width:min(340px,72vw);
  transform-style:preserve-3d; will-change:transform,opacity;
}
html.motion-on .progetti:not(.flat) .proj-nav{ display:flex; align-items:center; justify-content:center; gap:22px; padding:0 0 clamp(20px,4vh,40px); }
.proj-nav button{ width:48px; height:48px; border-radius:50%; border:1px solid var(--line); background:rgba(4,6,11,.5); cursor:pointer; display:grid; place-items:center; transition:border-color .25s, background .25s; }
.proj-nav button:hover{ border-color:var(--red); background:rgba(255,30,36,.12); }
.proj-nav svg{ width:20px; height:20px; fill:none; stroke:var(--ice); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.pn-count{ font-family:var(--display); font-size:14px; min-width:4.5em; text-align:center; color:var(--mute); }
.flat .pcard{ transform:none!important; opacity:1!important; visibility:visible!important; }

/* ---------------- metodo ---------------- */
.metodo{ position:relative; padding:14vh var(--gut); }
.met-head{ max-width:760px; }
.steps{ list-style:none; margin:3rem 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
.step{
  position:relative; background:var(--panel-a); border:1px solid var(--line); padding:30px 28px 32px;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.step-n{
  display:block; font-family:var(--display); font-weight:700; font-size:clamp(3rem,6vw,5.4rem); line-height:1;
  color:transparent; -webkit-text-stroke:1.5px var(--red); margin-bottom:1rem;
}
.step h3{ font-size:clamp(1.25rem,2vw,1.7rem); margin-bottom:.7rem; }
.step p{ color:#c3ccd9; }
html.motion-on .metodo{ height:100vh; height:100svh; padding:0; }
html.motion-on .met-stage{ position:relative; height:100%; perspective:900px; perspective-origin:50% 45%; overflow:hidden; }
html.motion-on .met-head{ position:absolute; z-index:2; left:var(--gut); top:clamp(90px,14vh,140px); transform-style:preserve-3d; }
html.motion-on .steps{ position:absolute; inset:0; margin:0; display:block; transform-style:preserve-3d; }
html.motion-on .step{ position:absolute; left:50%; top:56%; width:min(560px,86vw); will-change:transform,opacity; transition:border-color .5s, box-shadow .5s; }
html.motion-on .step.on{ border-color:rgba(255,30,36,.55); box-shadow:0 40px 100px -30px rgba(255,30,36,.35); }

/* ---------------- chi sono ---------------- */
.chi{ position:relative; min-height:100vh; display:flex; align-items:center; padding:16vh var(--gut); }
.chi::before{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(90deg, rgba(4,6,11,.85), rgba(4,6,11,.4) 55%, transparent 80%); }
.chi-in{ max-width:860px; perspective:1000px; }
.chi-quote{ margin-top:2rem; font-family:var(--display); font-weight:300; font-size:clamp(1.45rem,3vw,2.6rem); line-height:1.3; letter-spacing:-.015em; }
.chi-quote .w{ display:inline; } .chi-quote .w > i{ font-style:normal; }
.chi-text{ margin-top:2rem; max-width:38em; color:#c3ccd9; font-size:18px; }
.chi-logo{ margin-top:2.6rem; width:170px; height:auto; }

/* ---------------- contatti ---------------- */
.contatti{ position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:16vh var(--gut) 10vh; }
.contatti::before{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(60% 55% at 50% 50%, rgba(4,6,11,.82), transparent 100%); }
.cont-in{ max-width:1100px; display:flex; flex-direction:column; align-items:center; }
.cont-title{ font-size:clamp(2rem,5vw,4.4rem); letter-spacing:-.03em; perspective:800px; max-width:14em; }
.cont-text{ margin-top:1.2rem; color:#c3ccd9; max-width:32em; font-size:18px; }
.cont-tiles{ margin-top:2.8rem; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; width:min(820px,100%); perspective:900px; }
.ctile{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:.3rem; text-align:left; text-decoration:none;
  padding:22px 22px 20px; background:var(--panel-a); border:1px solid var(--line); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  transition:border-color .3s, transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
}
.ctile:hover{ border-color:rgba(255,30,36,.6); transform:translateY(-4px); box-shadow:0 24px 50px -24px rgba(255,30,36,.45); }
.ct-ico svg{ width:26px; height:26px; fill:none; stroke:var(--red); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; margin-bottom:.6rem; }
.ct-label{ font-size:14px; color:var(--mute); }
.ct-val{ font-family:var(--display); font-size:1.05rem; letter-spacing:-.01em; word-break:break-word; }
.cont-meta{ margin-top:2rem; display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem 1.6rem; color:var(--mute); font-size:15px; }

/* ---------------- piè di pagina ---------------- */
.foot{ display:flex; flex-wrap:wrap; gap:.6rem 2rem; justify-content:center; padding:28px var(--gut) 36px; color:var(--mute); font-size:13.5px; border-top:1px solid var(--line); background:rgba(4,6,11,.85); }
.foot a{ color:var(--mute); }
.foot a:hover{ color:var(--ice); }

/* ---------------- scheda progetto ---------------- */
.modal{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:20px; }
.modal[hidden]{ display:none; }
.pm-back{ position:absolute; inset:0; background:rgba(2,3,6,.8); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.pm-card{
  position:relative; width:min(1080px,100%); max-height:calc(100vh - 40px); max-height:calc(100dvh - 40px); overflow:auto;
  display:grid; grid-template-columns:1.15fr 1fr; background:var(--panel); border:1px solid var(--line);
  overscroll-behavior:contain;
}
.pm-close{ position:absolute; right:12px; top:12px; z-index:3; width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:rgba(4,6,11,.75); cursor:pointer; display:grid; place-items:center; }
.pm-close svg, .lightbox svg{ width:20px; height:20px; stroke:var(--ice); stroke-width:1.8; fill:none; stroke-linecap:round; }
.pm-media{ background:#070b13; display:flex; flex-direction:column; min-height:0; }
.pm-main{ flex:1; min-height:280px; }
.pm-main img, .pm-main .art{ width:100%; height:100%; object-fit:cover; cursor:zoom-in; }
.pm-main .art{ cursor:default; }
.pm-thumbs{ display:flex; gap:6px; padding:6px; overflow-x:auto; }
.pm-thumbs button{ flex:0 0 76px; height:56px; padding:0; border:1px solid var(--line); cursor:pointer; background:none; }
.pm-thumbs img{ width:100%; height:100%; object-fit:cover; }
.pm-body{ padding:clamp(26px,3.6vw,48px); }
.pm-cat{ color:var(--red); font-size:14px; font-weight:500; margin-bottom:.8rem; }
.pm-body h2{ font-size:clamp(1.5rem,2.6vw,2.2rem); margin-right:40px; }
.pm-client{ margin-top:.6rem; color:var(--mute); font-size:15px; }
.pm-text{ margin-top:1.4rem; color:#c3ccd9; display:grid; gap:1rem; font-size:16.5px; }
.pm-tags{ list-style:none; padding:0; margin:1.6rem 0 0; display:flex; flex-wrap:wrap; gap:8px; }
.pm-tags li{ font-size:13px; padding:6px 12px; border:1px solid var(--line); border-radius:30px; color:var(--mute); }
.pm-link{ margin-top:1.8rem; }
.lightbox{ position:fixed; inset:0; z-index:120; background:rgba(2,3,6,.95); display:flex; align-items:center; justify-content:center; padding:20px; cursor:zoom-out; }
.lightbox[hidden]{ display:none; }
.lightbox img{ max-width:100%; max-height:100%; object-fit:contain; }
.lightbox button{ position:absolute; right:16px; top:16px; width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:none; display:grid; place-items:center; cursor:pointer; }
html.modal-open, html.menu-open{ overflow:hidden; }

/* ---------------- smartphone ---------------- */
@media (max-width:900px){
  .nav-links{ display:none; }
  .nav-menu{ display:block; margin-left:0; }
  .nav{ gap:12px; }
  .nav-call{ margin-left:auto; }
}
@media (max-width:760px){
  body{ font-size:16px; }
  .nav-logo img{ height:38px; }
  .nav-call{ padding:9px 14px; font-size:12px; }
  .hero{ align-items:flex-end; padding-bottom:120px; }
  .hero::before{ background:linear-gradient(0deg, rgba(4,6,11,.92) 0%, rgba(4,6,11,.7) 50%, rgba(4,6,11,.15) 100%); }
  .hero-cta .btn{ flex:1 1 auto; }
  .serv{ min-height:auto; padding:18vh var(--gut); }
  .serv-tall{ min-height:220vh; }
  .serv-tall .serv-card{ top:auto; bottom:4vh; }
  .serv-right{ justify-content:flex-start; }
  .serv-card{ background:rgba(8,12,20,.82); }
  .pm-card{ grid-template-columns:1fr; }
  .pm-main{ min-height:0; aspect-ratio:4/3; }
  .chi::before{ background:rgba(4,6,11,.6); }
  .proj-filters{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:4px; -webkit-mask:linear-gradient(90deg,#000 85%,transparent); mask:linear-gradient(90deg,#000 85%,transparent); }
  .proj-filters::-webkit-scrollbar{ display:none; }
  .proj-filters button{ flex:none; }
  html.motion-on .progetti:not(.flat) .proj-stage{ padding-top:76px; }
  html.motion-on .progetti:not(.flat) .sec-intro{ font-size:15px; margin-top:.6rem; }
  html.motion-on .progetti:not(.flat) .pcard{ width:min(300px,66vw); }
  .pc-sum{ -webkit-line-clamp:2; }
}
@media (max-width:400px){
  .nav-call{ display:none; }
  .nav-menu{ margin-left:auto; }
}

/* ---------------- riduci movimento ---------------- */
@media (prefers-reduced-motion: reduce){
  *{ animation:none!important; transition:none!important; }
}

/* mockup laptop nella scheda dei siti web */
.mock{ height:100%; min-height:300px; display:flex; align-items:center; justify-content:center; padding:8% 7%; perspective:1400px;
  background:radial-gradient(70% 60% at 50% 60%, rgba(255,30,36,.18), transparent 70%), #070b13; }
.mock-lap{ width:100%; transform:rotateX(12deg) rotateY(-16deg) rotateZ(1deg); transform-style:preserve-3d; transition:transform 1s cubic-bezier(.2,.8,.2,1); }
.mock:hover .mock-lap{ transform:rotateX(4deg) rotateY(-5deg); }
.ml-lid{ background:#07090d; border:2px solid #59616e; border-radius:12px 12px 4px 4px; padding:3% 3% 3.6%; box-shadow:0 40px 60px -30px rgba(0,0,0,.9); }
.ml-lid img{ display:block; width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top; border-radius:2px; cursor:zoom-in; }
.ml-base{ position:relative; height:16px; margin:0 -7%; background:linear-gradient(#d5dae1,#8a919c 70%,#5b616b); border-radius:2px 2px 16px 16px; box-shadow:0 30px 40px -18px rgba(0,0,0,.9); }
.ml-base::before{ content:''; position:absolute; left:42%; right:42%; top:0; height:6px; background:#9aa1ab; border-radius:0 0 8px 8px; }

/* anteprime dei lavori nelle schede dei servizi */
.serv-works{ margin-top:1.5rem; padding-top:1.2rem; border-top:1px solid var(--line); }
.sw-label{ display:block; font-size:13.5px; color:var(--mute); margin-bottom:.7rem; }
.sw-row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.sw{ display:flex; flex-direction:column; gap:6px; padding:0; background:none; border:0; cursor:pointer; text-align:left; }
.sw-img{ display:block; aspect-ratio:4/3; overflow:hidden; border:1px solid var(--line); background:#070b13; transition:border-color .3s, transform .4s cubic-bezier(.2,.8,.2,1); }
.sw-img img, .sw-img .art{ width:100%; height:100%; object-fit:cover; display:block; }
.sw-t{ font-size:12.5px; line-height:1.35; color:#c3ccd9; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sw:hover .sw-img{ border-color:rgba(255,30,36,.7); transform:translateY(-3px) rotateX(6deg); }
.sw:hover .sw-t{ color:var(--ice); }