:root{
  --bg:#000000;--bg-2:#050706;--bg-3:#0a0c0b;
  --panel:rgba(255,255,255,.022);--panel-2:rgba(255,255,255,.045);
  --line:rgba(141,255,205,.16);--line-2:rgba(255,255,255,.072);
  --green:#8DFFCD;--green-bright:#c9ffe6;--green-soft:rgba(141,255,205,.12);
  --steel:#58585F;--lilac:#D0CFEC;
  --ink:#eafff4;--muted:#7f8a86;--muted-2:#54605b;
  --metal:linear-gradient(176deg,#fff 0%,#dcdce1 14%,#58585F 40%,#f4f4f6 50%,#3c3c42 64%,#cfcfd6 84%,#8a8a91 100%);
  --maxw:1300px;--r:13px;--brand:"Michroma",sans-serif;--disp:"Saira",sans-serif;--body:"Saira",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.55}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--green);color:#03241a}
body[data-lang="en"] .l-it{display:none!important}
body[data-lang="it"] .l-en{display:none!important}
.bg-fx{position:fixed;inset:0;z-index:0;pointer-events:none}
.bg-grid{position:absolute;inset:-2px;background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);background-size:70px 70px;mask-image:radial-gradient(130% 100% at 50% 0,#000 35%,transparent 82%);opacity:.32}
.bg-glow{position:absolute;width:1200px;height:1200px;left:50%;top:-420px;transform:translateX(-50%);background:radial-gradient(circle,rgba(141,255,205,.16),rgba(141,255,205,.03) 40%,transparent 66%)}
.bg-scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px);opacity:.5}
main,header,footer{position:relative;z-index:2}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 30px}
.eyebrow{font-family:var(--brand);font-weight:400;letter-spacing:.26em;text-transform:uppercase;font-size:10.5px;color:var(--green);display:inline-flex;gap:12px;align-items:center}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--green);opacity:.7}
h1,h2,h3{font-family:var(--disp);font-weight:200;letter-spacing:-.01em;line-height:1.05;margin:0}
b,strong{font-weight:500}
header{position:sticky;top:0;z-index:60;backdrop-filter:blur(16px);background:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.25));border-bottom:1px solid var(--line-2)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center}
.brand .logo{height:28px;width:auto;display:block;fill:var(--ink);transition:fill .25s}
.brand:hover .logo{fill:var(--green)}
.nav-links{display:flex;gap:32px;align-items:center}
.nav-links a{font-size:13px;color:var(--muted);transition:.25s;position:relative}
.nav-links a:hover{color:var(--ink)}
.nav-right{display:flex;align-items:center;gap:18px}
.lang{display:flex;border:1px solid var(--line-2);border-radius:999px;overflow:hidden;font-family:var(--brand);font-size:10.5px}
.lang button{background:none;border:0;color:var(--muted);padding:7px 12px;cursor:pointer;font-family:inherit;letter-spacing:.05em;transition:.2s}
.lang button.on{background:var(--green);color:#03241a}
.lang.lang-text{border:0;border-radius:0;overflow:visible;font-size:9px;gap:6px;align-items:center}
.lang.lang-text button{padding:2px 1px;color:var(--muted-2);letter-spacing:.16em;background:none}
.lang.lang-text button.on{background:none;color:var(--green)}
.lang.lang-text button:hover{color:var(--ink)}
.lang-sep{color:var(--muted-2);opacity:.45;font-family:var(--brand);font-size:8.5px;line-height:1}
.btn{display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border-radius:999px;font-weight:500;font-size:13px;cursor:pointer;transition:.25s;border:1px solid transparent;font-family:var(--disp)}
.btn-primary{background:var(--green);color:#03241a}
.btn-primary:hover{box-shadow:0 8px 34px rgba(141,255,205,.42);transform:translateY(-1px)}
.btn-ghost{border-color:var(--line-2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--green);color:var(--green)}
.hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;overflow:hidden;padding-bottom:64px}
.hero-video{position:absolute;inset:0;z-index:0;background:#000}
.hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-scrim{position:absolute;inset:0;z-index:1;background:radial-gradient(120% 90% at 70% 20%,transparent,rgba(0,0,0,.45) 70%),linear-gradient(180deg,rgba(0,0,0,.55) 0,transparent 22% 42%,rgba(0,0,0,.85) 86%,var(--bg) 100%)}
.hero-inner{position:relative;z-index:3;max-width:880px}
.hero h1{font-size:clamp(42px,7.4vw,96px);font-weight:200;margin:24px 0 22px;letter-spacing:-.02em}
.hero h1 em{font-style:normal;font-weight:300;background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{font-size:clamp(15px,1.5vw,18.5px);color:#cdd5cf;max-width:600px;margin:0 0 32px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-foot{position:absolute;bottom:22px;left:0;width:100%;z-index:3}
.hero-foot .wrap{display:flex;justify-content:space-between;align-items:center;color:var(--muted-2);font-family:var(--brand);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase}
.hero-foot .wrap span:first-child::before{content:"";display:inline-block;width:6px;height:6px;background:var(--lilac);margin-right:10px;vertical-align:middle}
.marquee{border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);padding:17px 0;overflow:hidden;background:var(--panel);white-space:nowrap;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee .track{display:inline-flex;gap:48px;animation:scroll 42s linear infinite;align-items:center}
.marquee span{font-family:var(--brand);font-size:13px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;display:inline-flex;align-items:center;gap:48px}
.marquee span::after{content:"";width:5px;height:5px;background:var(--green);border-radius:50%;opacity:.6}
@keyframes scroll{to{transform:translateX(-50%)}}
section{padding:112px 0;position:relative}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:26px;margin-bottom:56px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(28px,4.2vw,52px)}
.sec-head p{color:var(--muted);max-width:430px;margin:16px 0 0;font-size:14.5px}
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;perspective:1100px}
.cap{position:relative;border:1px solid var(--line-2);border-radius:var(--r);padding:30px 26px 32px;background:linear-gradient(180deg,var(--panel-2),transparent);overflow:hidden;transition:transform .25s ease,border-color .4s,box-shadow .4s;min-height:228px;transform-style:preserve-3d;will-change:transform}
.cap::before{content:"";position:absolute;inset:0;background:radial-gradient(280px circle at var(--gx,50%) var(--gy,0%),var(--green-soft),transparent 62%);opacity:0;transition:opacity .4s}
.cap:hover{border-color:var(--green);transform:translateY(-4px);box-shadow:0 18px 50px -24px rgba(141,255,205,.35)}
.cap:hover::before{opacity:1}
.cap .num{font-family:var(--brand);font-size:11px;letter-spacing:.16em;color:var(--green)}
.cap.core .num::after{content:"CORE";margin-left:10px;background:var(--green);color:#03241a;padding:2px 7px;border-radius:4px;font-size:9px;letter-spacing:.08em}
.cap h3{font-size:21px;margin:18px 0 12px;font-weight:300}
.cap p{color:var(--muted);font-size:13.5px;margin:0}
.cap .tools{margin-top:16px;font-family:var(--brand);font-size:9.5px;color:var(--muted-2);letter-spacing:.05em}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:32px}
.filters button{background:var(--panel);border:1px solid var(--line-2);color:var(--muted);padding:9px 18px;border-radius:999px;cursor:pointer;font-family:var(--brand);font-size:10px;letter-spacing:.08em;text-transform:uppercase;transition:.25s}
.filters button.on,.filters button:hover{border-color:var(--green);color:var(--ink)}
.filters button.on{background:var(--green-soft)}
.works{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.work{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line-2);grid-column:span 6;aspect-ratio:16/10;background:var(--bg-2);cursor:pointer;transition:border .4s,box-shadow .4s}
.work.wide{grid-column:span 8}.work.small{grid-column:span 4}.work.tall{grid-column:span 6}
.work img{position:absolute;left:0;top:-9%;width:100%;height:118%;object-fit:cover;transform:translate3d(0,var(--py,0px),0) scale(var(--sc,1));transition:transform .35s cubic-bezier(.2,.7,.2,1),filter .5s;filter:grayscale(.4) brightness(.74) contrast(1.06)}
.work:hover img{--sc:1.08;filter:grayscale(0) brightness(.94)}
.work::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,rgba(3,6,4,.92));z-index:1}
.work:hover{border-color:var(--green);box-shadow:0 26px 64px -22px rgba(141,255,205,.4)}
.work .meta{position:absolute;left:0;bottom:0;z-index:2;padding:24px;width:100%}
.work .cat{font-family:var(--brand);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--green);margin-bottom:9px;display:block}
.work .meta h3{font-size:22px;font-weight:300}
.work .client{color:var(--muted);font-size:12.5px;margin-top:5px}
.work .arrow{position:absolute;top:18px;right:18px;z-index:2;width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;background:rgba(4,5,6,.5);opacity:0;transform:scale(.8);transition:.35s}
.work:hover .arrow{opacity:1;transform:none;border-color:var(--green);color:var(--green)}
.work.hide{display:none}
.clients-wall{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden}
.cw{display:grid;place-items:center;min-height:118px;border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);font-family:var(--brand);font-size:13px;letter-spacing:.06em;color:var(--muted-2);text-transform:uppercase;text-align:center;padding:14px;transition:.3s;position:relative}
.cw:hover{color:var(--ink);background:var(--panel)}
.cw:hover::after{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:var(--green)}
.press-feat{display:flex;align-items:center;gap:34px;flex-wrap:wrap;margin-bottom:42px;opacity:.8}
.press-feat span{font-family:var(--brand);font-size:14px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.press-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.press-card{border:1px solid var(--line-2);border-radius:var(--r);padding:24px;background:linear-gradient(180deg,var(--panel-2),transparent);transition:.35s;display:flex;flex-direction:column;gap:12px;min-height:160px}
.press-card:hover{border-color:var(--green);transform:translateY(-4px)}
.press-card .src{font-family:var(--brand);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.press-card h3{font-size:17px;font-weight:300;line-height:1.2;flex:1}
.press-card .read{font-family:var(--brand);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.press-card:hover .read{color:var(--green)}
.approach{background:linear-gradient(180deg,transparent,var(--bg-2))}
.steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-2)}
.step{padding:34px 24px 40px;border-right:1px solid var(--line-2);position:relative;transition:.4s}
.step:last-child{border-right:0}.step:hover{background:var(--panel)}
.step .n{font-family:var(--brand);font-size:12px;color:var(--green);letter-spacing:.16em}
.step h3{font-size:19px;margin:16px 0 10px;font-weight:300}
.step p{color:var(--muted);font-size:13px;margin:0}
.step .bar{position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--green);transition:width .5s}
.step:hover .bar{width:100%}
.stats{display:flex;gap:16px;flex-wrap:wrap;margin-top:54px}
.stat{flex:1;min-width:160px;border:1px solid var(--line-2);border-radius:var(--r);padding:26px;background:var(--panel)}
.stat b{font-family:var(--disp);font-size:40px;font-weight:300;display:block;background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{color:var(--muted);font-size:11px;font-family:var(--brand);letter-spacing:.08em;text-transform:uppercase}
.ig-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:8px;align-items:start}
.ig{position:relative;aspect-ratio:4/5;border-radius:11px;overflow:hidden;border:1px solid var(--line-2);cursor:pointer;display:block;will-change:transform}
.ig img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) brightness(.78);transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .5s}
.ig:hover img{transform:scale(1.09);filter:grayscale(0) brightness(1)}
.ig::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.72));opacity:0;transition:.35s}
.ig:hover::after{opacity:1}
.ig .iglabel{position:absolute;left:0;bottom:0;z-index:2;width:100%;padding:13px 14px;display:flex;justify-content:space-between;align-items:center;font-family:var(--brand);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--green);opacity:0;transform:translateY(8px);transition:.35s}
.ig:hover .iglabel{opacity:1;transform:none}
.ig-cta{display:flex;justify-content:center;margin-top:40px}
.lb{position:fixed;inset:0;z-index:140;display:none;align-items:center;justify-content:center;padding:28px;background:rgba(0,0,0,.84);backdrop-filter:blur(9px)}
.lb.open{display:flex}
.lb-card{position:relative;max-width:720px;width:100%;background:var(--bg-2);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 40px 120px -30px rgba(141,255,205,.32)}
.lb-card>img{width:100%;max-height:60vh;object-fit:cover;display:block}
.lb-body{padding:24px 26px 28px}
.lb-body h3{font-size:24px;font-weight:300;margin:12px 0 8px}
.lb-close{position:absolute;top:13px;right:13px;z-index:3;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);background:rgba(0,0,0,.5);color:var(--ink);cursor:pointer;font-size:16px;display:grid;place-items:center;transition:.25s}
.lb-close:hover{border-color:var(--green);color:var(--green)}
.contact{text-align:center;padding:150px 0}
.contact h2{font-size:clamp(36px,6.4vw,80px);max-width:920px;margin:0 auto 30px;font-weight:200}
.contact h2 em{font-style:normal;color:var(--green);font-weight:300}
.socials{margin-top:42px;display:flex;gap:28px;justify-content:center;font-family:var(--brand);font-size:11px;letter-spacing:.1em}
.socials a{color:var(--muted);text-transform:uppercase;transition:.25s}.socials a:hover{color:var(--green)}
footer{border-top:1px solid var(--line-2);padding:46px 0;background:var(--bg-2)}
.foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;color:var(--muted-2);font-size:12px}
.reveal{opacity:0;transform:translateY(30px);transition:1.15s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.back{display:inline-flex;align-items:center;gap:9px;font-family:var(--brand);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:26px 0 0;transition:.25s}
.back:hover{color:var(--green)}
.phero{position:relative;min-height:80vh;display:flex;align-items:flex-end;overflow:hidden;padding-bottom:54px}
.phero-media{position:absolute;inset:0;z-index:0}
.phero-media img{position:absolute;left:0;top:-10%;width:100%;height:120%;object-fit:cover;filter:grayscale(.15) brightness(.62)}
.phero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.5),transparent 30% 42%,rgba(0,0,0,.9) 92%,var(--bg))}
.phero-in{position:relative;z-index:3;width:100%}
.phero-in h1{font-size:clamp(40px,6.6vw,86px);font-weight:200;margin:18px 0 16px;max-width:15ch}
.phero-sub{display:flex;gap:16px;align-items:center;color:var(--muted);font-family:var(--brand);font-size:12px;letter-spacing:.08em;text-transform:uppercase;flex-wrap:wrap}
.phero-sub .pill{color:var(--green)}
.phero-cta{margin-top:28px;display:flex;gap:13px;flex-wrap:wrap}
.metabar{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));border-top:1px solid var(--line-2);border-left:1px solid var(--line-2)}
.metabar .m{padding:26px 22px 28px;border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.metabar .k{font-family:var(--brand);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:10px}
.metabar .v{font-size:15px;color:var(--ink)}
.pbody .lbl{font-family:var(--brand);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.block{margin:0 auto;max-width:var(--maxw);padding:0 30px}
.b-text{padding:30px 0}
.b-text .inner{max-width:760px}
.b-text h2{font-size:clamp(24px,3vw,34px);font-weight:200;margin:0 0 18px}
.b-text p{font-size:clamp(16px,1.5vw,19px);color:#d6ddd8;font-weight:200;margin:0 0 16px;line-height:1.6}
.b-quote{padding:24px 0}
.b-quote .q{padding:26px 30px;border-left:2px solid var(--green);background:linear-gradient(90deg,var(--green-soft),transparent);border-radius:0 var(--r) var(--r) 0;font-size:clamp(19px,2vw,26px);font-weight:200;line-height:1.3}
.b-image{padding:18px 0}
.b-image figure{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line-2)}
.b-image img{width:100%;display:block}
.b-image figcaption{font-family:var(--brand);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);margin-top:12px}
.b-duo{padding:18px 0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.b-duo .cell{border-radius:var(--r);overflow:hidden;border:1px solid var(--line-2);aspect-ratio:4/3}
.b-duo img{width:100%;height:116%;position:relative;top:-8%;object-fit:cover;display:block}
.b-gallery{padding:18px 0;display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.b-gallery .g{border-radius:11px;overflow:hidden;border:1px solid var(--line-2)}
.b-gallery .g:nth-child(3n+1){grid-column:span 4;aspect-ratio:16/9}
.b-gallery .g:nth-child(3n+2){grid-column:span 2;aspect-ratio:3/4}
.b-gallery .g:nth-child(3n+3){grid-column:span 3;aspect-ratio:3/2}
.b-gallery .g:nth-child(3n+4){grid-column:span 3;aspect-ratio:3/2}
.b-gallery .g img{width:100%;height:116%;position:relative;top:-8%;object-fit:cover;filter:grayscale(.2) brightness(.85);transition:filter .5s}
.b-gallery .g:hover img{filter:none}
.b-image video{width:100%;display:block}
.b-duo video{width:100%;height:116%;position:relative;top:-8%;object-fit:cover;display:block}
.b-gallery .g video{width:100%;height:116%;position:relative;top:-8%;object-fit:cover;display:block;background:var(--bg-2)}
.b-video{padding:18px 0}
.ytframe{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line-2);aspect-ratio:16/9;background:var(--bg-2)}
.ytframe .ytfacade{position:absolute;inset:0;display:block;cursor:pointer}
.ytframe img{width:100%;height:100%;object-fit:cover;filter:brightness(.68);transition:.4s}
.ytframe .ytfacade:hover img{filter:brightness(.85)}
.ytframe .ytplay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:78px;height:78px;border-radius:50%;border:1px solid var(--green);color:var(--green);display:grid;place-items:center;font-size:22px;background:rgba(0,0,0,.4);transition:.3s}
.ytframe .ytfacade:hover .ytplay{background:var(--green);color:#03241a;transform:translate(-50%,-50%) scale(1.06)}
.ytframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips span{font-family:var(--brand);font-size:10px;letter-spacing:.06em;color:var(--ink);border:1px solid var(--line-2);padding:8px 14px;border-radius:999px}
.sec-lbl{font-family:var(--brand);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--green);margin-bottom:24px;display:flex;align-items:center;gap:12px}
.sec-lbl::before{content:"";width:26px;height:1px;background:var(--green)}
.credits{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-2);border-left:1px solid var(--line-2)}
.credits .c{padding:22px 22px 26px;border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.credits .c .k{font-family:var(--brand);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.credits .c .v{font-size:15px;color:var(--ink)}
.nextp{position:relative;display:block;min-height:300px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line-2)}
.nextp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.4) brightness(.5);transition:.7s}
.nextp:hover img{transform:scale(1.05);filter:grayscale(0) brightness(.7)}
.nextp::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.8),transparent)}
.nextp .inner{position:relative;z-index:2;padding:54px 44px;display:flex;flex-direction:column;justify-content:center;min-height:300px}
.nextp .lbl{font-family:var(--brand);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--green);margin-bottom:12px}
.nextp h3{font-size:clamp(26px,3.6vw,44px);font-weight:200}
@media(max-width:980px){
  .nav-links{display:none}
  .cap-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .clients-wall{grid-template-columns:repeat(3,1fr)}
  .ig-grid{grid-template-columns:repeat(3,1fr)}
  .press-grid{grid-template-columns:1fr}
  .work,.work.wide,.work.small,.work.tall{grid-column:span 12}
  .b-gallery{grid-template-columns:repeat(2,1fr)}
  .b-gallery .g,.b-gallery .g:nth-child(n){grid-column:span 1;aspect-ratio:4/3}
  .b-duo{grid-template-columns:1fr}
  .credits{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){.cap-grid,.steps{grid-template-columns:1fr}.clients-wall{grid-template-columns:repeat(2,1fr)}.ig-grid{grid-template-columns:repeat(2,1fr)}.wrap,.block{padding:0 18px}section{padding:76px 0}.credits{grid-template-columns:1fr}}
.morework{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.mw{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line-2);aspect-ratio:4/3;display:block;background:var(--bg-2);transition:border .4s,box-shadow .4s}
.mw img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.4) brightness(.68);transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .5s}
.mw:hover img{transform:scale(1.06);filter:grayscale(0) brightness(.92)}
.mw::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,rgba(3,6,4,.92))}
.mw:hover{border-color:var(--green);box-shadow:0 20px 50px -22px rgba(141,255,205,.4)}
.mw .meta{position:absolute;left:0;bottom:0;z-index:2;padding:18px;width:100%}
.mw .cat{font-family:var(--brand);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--green);margin-bottom:6px;display:block}
.mw h3{font-size:18px;font-weight:300}
@media(max-width:780px){.morework{grid-template-columns:1fr}}

.pimg{transform:translate3d(0,var(--py,0px),0);will-change:transform}
.logo-wall{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden}
.logo-cell{display:grid;place-items:center;min-height:120px;padding:22px;border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.logo-cell img{max-width:80%;max-height:48px;width:auto;height:auto;object-fit:contain;opacity:.62;filter:grayscale(1);transition:opacity .6s ease,filter .4s}
.logo-cell:hover img{opacity:1;filter:none}
@media(max-width:980px){.logo-wall{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.logo-wall{grid-template-columns:repeat(2,1fr)}}
.press-marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);padding:6px 0}
.ptrack{display:flex;gap:18px;width:max-content;animation:scroll 75s linear infinite;padding:6px 30px}
.press-marquee:hover .ptrack{animation-play-state:paused}
.pcard{position:relative;overflow:hidden;flex:0 0 380px;border:1px solid var(--line-2);border-radius:var(--r);padding:26px;background:linear-gradient(180deg,var(--panel-2),transparent);display:flex;flex-direction:column;gap:13px;min-height:210px;transition:border .35s,box-shadow .35s;transform-style:preserve-3d;will-change:transform}
.pcard::before{content:"";position:absolute;inset:0;background:radial-gradient(300px circle at var(--gx,50%) var(--gy,0%),var(--green-soft),transparent 62%);opacity:0;transition:opacity .4s;z-index:0}
.pcard:hover::before{opacity:1}
.pcard:hover{border-color:var(--green);box-shadow:0 22px 60px -26px rgba(141,255,205,.4)}
.pcard>*{position:relative;z-index:1}
.pcard:hover{border-color:var(--green);transform:translateY(-3px)}
.pcard-top{display:flex;align-items:center;gap:10px}
.pfav{width:22px;height:22px;border-radius:5px;object-fit:contain;background:#fff;padding:2px;flex:0 0 auto}
.pcard-top span{font-family:var(--brand);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
.pcard p{color:var(--muted);font-size:13.5px;font-weight:300;margin:0;flex:1;line-height:1.5}
.pcard .read{font-family:var(--brand);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pcard:hover .read{color:var(--green)}
.press-card .src .pfav{margin-right:9px;vertical-align:middle;display:inline-block}
.igtype{position:absolute;top:9px;right:9px;z-index:3;width:24px;height:24px;border-radius:6px;background:rgba(0,0,0,.55);display:grid;place-items:center;font-family:var(--brand);font-size:11px;color:#fff;backdrop-filter:blur(4px)}
.igtype-post{display:none}
.igtype-reel::before{content:"\25B6"}
.igtype-tagged::before{content:"@"}
.pcard p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard:hover p{-webkit-line-clamp:6}
.ig{transition:transform .25s ease}
.ig-grid .ig:nth-child(4n+2){margin-top:28px}
.ig-grid .ig:nth-child(4n+3){margin-top:54px}
.ig-grid .ig:nth-child(4n+4){margin-top:14px}
@media(max-width:980px){.ig-grid .ig:nth-child(n){margin-top:0}}
.contact-lanes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1000px;margin:48px auto 0;text-align:left;perspective:1100px}
.lane{position:relative;border:1px solid var(--line-2);border-radius:var(--r);padding:28px 26px;background:linear-gradient(180deg,var(--panel-2),transparent);transition:border .35s,box-shadow .35s;transform-style:preserve-3d;will-change:transform}
.lane:hover{border-color:var(--green);box-shadow:0 18px 50px -26px rgba(141,255,205,.35)}
.lane-k{font-family:var(--brand);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--green);margin-bottom:14px}
.lane p{color:var(--muted);font-size:14px;font-weight:300;margin:0 0 22px;line-height:1.55;min-height:72px}
.lane .btn{width:100%;justify-content:center}
@media(max-width:780px){.contact-lanes{grid-template-columns:1fr}}

/* ===================== RESTYLE: angoli netti + tagli a 45° ===================== */
:root{
  --r:0px;
  --cut:14px;
  --clip:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
}
.cap,.work,.mw,.pcard,.lane,.press-card,.stat,.ytframe,.nextp,.lb-card,.clients-wall,.logo-wall,.b-image figure,.b-duo .cell{border-radius:0;clip-path:var(--clip)}
.ig,.b-gallery .g{border-radius:0;--cut:10px;clip-path:var(--clip)}
.btn{border-radius:0;--cut:10px;clip-path:var(--clip)}
.filters button,.chips span{border-radius:0;--cut:8px;clip-path:var(--clip)}
.work .arrow,.ytframe .ytplay,.lb-close,.lang-dots{border-radius:0;--cut:6px;clip-path:var(--clip)}
.igtype,.pfav,.cap.core .num::after,.marquee span::after{border-radius:0}
/* i bagliori passano a drop-shadow, visibili anche con il taglio */
.cap:hover{box-shadow:none;filter:drop-shadow(0 12px 20px rgba(141,255,205,.20))}
.work:hover{box-shadow:none;filter:drop-shadow(0 16px 26px rgba(141,255,205,.22))}
.mw:hover{box-shadow:none;filter:drop-shadow(0 12px 22px rgba(141,255,205,.22))}
.pcard:hover{box-shadow:none;filter:drop-shadow(0 12px 24px rgba(141,255,205,.22))}
.lane:hover{box-shadow:none;filter:drop-shadow(0 10px 20px rgba(141,255,205,.20))}
.btn-primary:hover{box-shadow:none;filter:drop-shadow(0 5px 14px rgba(141,255,205,.4))}
.lb-card{box-shadow:none;filter:drop-shadow(0 26px 50px rgba(141,255,205,.18))}

/* titolo hero senza gradiente */
.hero h1 em{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--ink)}

/* accenti lilla — pochi, tecnologici */
@keyframes g1pulse{0%,100%{opacity:.45;filter:drop-shadow(0 0 0 rgba(208,207,236,0))}50%{opacity:1;filter:drop-shadow(0 0 6px rgba(208,207,236,.8))}}
.hero-foot .wrap span:first-child::before{animation:g1pulse 3s ease-in-out infinite}
.igtype-reel{color:var(--lilac)}
.cap::after{content:"";position:absolute;top:4px;right:4px;width:20px;height:20px;pointer-events:none;opacity:0;transition:opacity .45s;background:linear-gradient(45deg,transparent calc(50% - 1px),var(--lilac) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px))}
.cap:hover::after{opacity:1}

/* instagram: tessere sempre centrate (anche le ultime spaiate) */
.ig-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;align-items:flex-start}
.ig-grid .ig{width:calc((100% - 42px)/4)}
@media(max-width:980px){.ig-grid .ig{width:calc((100% - 28px)/3)}}
@media(max-width:560px){.ig-grid .ig{width:calc((100% - 14px)/2)}}

/* what we do compatto su mobile: solo numero + servizio */
@media(max-width:560px){
  .cap{min-height:0;padding:15px 16px;display:flex;align-items:center;gap:14px}
  .cap p,.cap .tools{display:none}
  .cap h3{margin:0;font-size:16.5px}
}

/* cambio lingua su mobile: menu a tendina con tre puntini */
.lang-mobile{display:none;position:relative}
.lang-dots{background:none;border:1px solid var(--line-2);color:var(--ink);width:36px;height:30px;cursor:pointer;font-size:17px;line-height:1;display:grid;place-items:center}
.lang-menu{position:absolute;right:0;top:calc(100% + 10px);background:var(--bg-2);border:1px solid var(--line-2);min-width:150px;display:none;z-index:90;padding:6px 0;--cut:10px;clip-path:var(--clip)}
.lang-mobile.open .lang-menu{display:block}
.lang-menu button{display:block;width:100%;text-align:left;background:none;border:0;color:var(--muted);padding:10px 16px;font-family:var(--brand);font-size:10px;letter-spacing:.12em;cursor:pointer}
.lang-menu button:hover{color:var(--ink)}
.lang-menu button.on{color:var(--green)}
@media(max-width:640px){.lang.lang-text{display:none}.lang-mobile{display:block}}

/* ===== gallery proporzionali: righe giustificate per aspect-ratio, zero crop ===== */
.b-gal{padding:18px 0;display:flex;flex-direction:column;gap:12px}
.b-gal .grow{display:flex;gap:12px}
.b-gal .g{flex-grow:var(--ar);flex-shrink:1;flex-basis:0;min-width:0;aspect-ratio:var(--ar);overflow:hidden;border:1px solid var(--line-2);background:var(--bg-2);--cut:10px;clip-path:var(--clip)}
.b-gal .grow-c{justify-content:center}
.b-gal .grow-c .g{max-width:calc(var(--ar)/3.4*100%)}
.b-gal .g img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.15) brightness(.88);transition:filter .5s}
.b-gal .g:hover img{filter:none}
.b-gal .g video{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:700px){
  .b-gal .grow{flex-wrap:wrap}
  .b-gal .g,.b-gal .grow-c .g{flex:0 0 100%;max-width:100%}
}

/* ===== griglia lavori senza buchi ===== */
.works{grid-auto-flow:dense}

/* ===== transizioni di pagina (aurora hi-tech) ===== */
.pt{position:fixed;inset:0;z-index:200;pointer-events:none;opacity:0;
  background:
    radial-gradient(55% 75% at 18% 108%,rgba(141,255,205,.30),transparent 62%),
    radial-gradient(45% 65% at 86% -8%,rgba(208,207,236,.22),transparent 60%),
    linear-gradient(180deg,#000 0%,#020403 100%)}
body.pt-in .pt{animation:ptin 1s cubic-bezier(.55,.06,.25,1) forwards}
@keyframes ptin{0%{opacity:1}100%{opacity:0}}
body.pt-in main{animation:ptrise 1s cubic-bezier(.2,.8,.2,1) both}
@keyframes ptrise{0%{opacity:0;transform:translateY(22px)}100%{opacity:1;transform:none}}
body.pt-out .pt{animation:ptout .3s ease forwards}
@keyframes ptout{to{opacity:1}}

/* ===== intro: logo G con bagliore (solo home, una volta a sessione) ===== */
#intro{position:fixed;inset:0;z-index:240;background:#000;display:flex;align-items:center;justify-content:center;animation:iout .55s ease 1.9s forwards}
#intro .intro-in{display:flex;flex-direction:column;align-items:center;gap:26px}
#intro .logo{height:58px;width:auto;fill:var(--ink);animation:ilogo 1.5s cubic-bezier(.2,.8,.2,1) both}
@keyframes ilogo{0%{opacity:0;transform:scale(.82);filter:drop-shadow(0 0 0 rgba(141,255,205,0))}45%{opacity:1}100%{opacity:1;transform:scale(1);filter:drop-shadow(0 0 22px rgba(141,255,205,.55))}}
#intro .intro-bar{width:190px;height:1px;background:rgba(255,255,255,.10);position:relative;overflow:hidden}
#intro .intro-bar i{position:absolute;left:-45%;top:0;height:100%;width:45%;background:linear-gradient(90deg,transparent,var(--green) 55%,var(--lilac));animation:ibar 1.1s cubic-bezier(.4,0,.4,1) infinite}
@keyframes ibar{to{left:100%}}
@keyframes iout{to{opacity:0;visibility:hidden}}
body.no-intro #intro,html.no-intro #intro{display:none}

/* ===== lightbox zoom con tilt 3D ===== */
.zoom-ov{position:fixed;inset:0;z-index:260;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.9);backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .4s}
.zoom-ov.open{opacity:1;pointer-events:auto}
.zoom-card{position:relative;max-width:92vw;max-height:86vh;background:#000;border:1px solid var(--green);--cut:16px;clip-path:var(--clip);filter:drop-shadow(0 26px 70px rgba(141,255,205,.32));transition:transform .25s ease;will-change:transform}
.zoom-card img,.zoom-card video{width:100%;height:100%;object-fit:contain;display:block}
.zoom-x{position:absolute;top:20px;right:20px;z-index:2;width:42px;height:42px;border:1px solid var(--line-2);background:rgba(0,0,0,.55);color:var(--ink);cursor:pointer;font-size:15px;display:grid;place-items:center;--cut:6px;clip-path:var(--clip);transition:.25s}
.zoom-x:hover{border-color:var(--green);color:var(--green)}

/* ===== press: carosello verticale compatto su mobile ===== */
@keyframes vscroll{to{transform:translateY(-50%)}}
@media(max-width:640px){
  .press-marquee{max-height:330px;overflow:hidden;mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}
  .ptrack{flex-direction:column;width:auto;gap:12px;padding:10px 18px;animation:vscroll 32s linear infinite}
  .pcard{flex:0 0 auto;min-height:0;padding:13px 15px;gap:9px}
  .pcard p{-webkit-line-clamp:2;font-size:12px;line-height:1.4}
  .pcard .read{display:none}
}

/* ===== form contatti ===== */
button.lane{font:inherit;text-align:left;color:inherit;cursor:pointer}
.lane.on{border-color:var(--green);background:linear-gradient(180deg,rgba(141,255,205,.07),transparent)}
.lane.on .lane-k::after{content:"✓";margin-left:9px}
.cform{max-width:1000px;margin:26px auto 0;text-align:left}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cform input,.cform textarea{width:100%;background:var(--panel);border:1px solid var(--line-2);color:var(--ink);font-family:var(--body);font-weight:300;font-size:14.5px;padding:14px 16px;outline:none;transition:border .3s;--cut:8px;clip-path:var(--clip);resize:vertical}
.cform textarea{margin-top:14px}
.cform input:focus,.cform textarea:focus{border-color:var(--green)}
.cform ::placeholder{color:var(--muted-2)}
.cf-actions{display:flex;align-items:center;gap:18px;margin-top:16px;flex-wrap:wrap}
.cf-note{font-family:var(--brand);font-size:10px;letter-spacing:.08em;color:var(--green)}
@media(max-width:640px){.cf-row{grid-template-columns:1fr}}

/* ===================== TRANSIZIONI v2: aurora dinamica + scomposizione 3D ===================== */
.pt{display:none;position:fixed;inset:0;z-index:200;pointer-events:none;overflow:hidden;background:#000}
.pt::before{content:"";position:absolute;inset:-35%;background:conic-gradient(from 90deg at 50% 50%,transparent 0deg,rgba(141,255,205,.32) 60deg,transparent 140deg,rgba(208,207,236,.24) 220deg,transparent 300deg,rgba(141,255,205,.18) 360deg);filter:blur(70px);animation:aurSpin 3.2s linear infinite}
.pt::after{content:"";position:absolute;inset:-20%;background:radial-gradient(42% 55% at 28% 72%,rgba(141,255,205,.36),transparent 65%),radial-gradient(38% 50% at 76% 22%,rgba(208,207,236,.32),transparent 62%),radial-gradient(60% 45% at 55% 95%,rgba(141,255,205,.16),transparent 70%);filter:blur(48px);animation:aurDrift 2.6s ease-in-out infinite alternate}
@keyframes aurSpin{to{transform:rotate(1turn)}}
@keyframes aurDrift{from{transform:translate3d(-5%,3%,0) scale(1.02)}to{transform:translate3d(5%,-4%,0) scale(1.16)}}
body.pt-in .pt{display:block;animation:veilOut 1.05s cubic-bezier(.6,.05,.3,1) forwards}
body.pt-out .pt{display:block;animation:veilIn .38s ease-out forwards}
@keyframes veilOut{0%{opacity:1}100%{opacity:0;visibility:hidden}}
@keyframes veilIn{0%{opacity:0}100%{opacity:1}}
body.pt-in main,body.pt-out main{animation:none}
body.pt-in main>*{animation:secIn .9s cubic-bezier(.18,.8,.22,1) both}
body.pt-in main>*:nth-child(1){animation-delay:.06s}
body.pt-in main>*:nth-child(2){animation-delay:.14s}
body.pt-in main>*:nth-child(3){animation-delay:.22s}
body.pt-in main>*:nth-child(4){animation-delay:.30s}
body.pt-in main>*:nth-child(5){animation-delay:.38s}
body.pt-in main>*:nth-child(6){animation-delay:.46s}
body.pt-in main>*:nth-child(7){animation-delay:.54s}
body.pt-in main>*:nth-child(n+8){animation-delay:.62s}
@keyframes secIn{
  0%{opacity:0;transform:perspective(1000px) translateY(42px) translateZ(-80px) rotateX(7deg);filter:blur(8px)}
  62%{filter:blur(0) drop-shadow(0 14px 34px rgba(141,255,205,.14))}
  100%{opacity:1;transform:none;filter:none}}
body.pt-out main>*{animation:secOut .42s cubic-bezier(.5,.05,.5,.95) both}
body.pt-out main>*:nth-child(1){animation-delay:0s}
body.pt-out main>*:nth-child(2){animation-delay:.05s}
body.pt-out main>*:nth-child(3){animation-delay:.10s}
body.pt-out main>*:nth-child(n+4){animation-delay:.14s}
@keyframes secOut{to{opacity:0;transform:perspective(1000px) translateY(-30px) translateZ(70px) rotateX(-5deg);filter:blur(7px)}}
@media (prefers-reduced-motion:reduce){
  body.pt-in main>*,body.pt-out main>*{animation:none}
  .pt::before,.pt::after{animation:none}
}

/* ===================== INTRO v2: la G arriva dalla profondità, aurora viva ===================== */
#intro{animation:iout .5s ease 1.55s forwards;overflow:hidden}
#intro::before{content:"";position:absolute;inset:-35%;background:conic-gradient(from 0deg at 50% 50%,transparent 0deg,rgba(141,255,205,.20) 70deg,transparent 150deg,rgba(208,207,236,.16) 230deg,transparent 320deg);filter:blur(80px);animation:aurSpin 3.6s linear infinite}
#intro::after{content:"";position:absolute;inset:-20%;background:radial-gradient(40% 50% at 30% 70%,rgba(141,255,205,.20),transparent 62%),radial-gradient(34% 46% at 74% 24%,rgba(208,207,236,.18),transparent 60%);filter:blur(60px);animation:aurDrift 2.8s ease-in-out infinite alternate}
#intro .intro-in{position:relative;z-index:2;perspective:900px}
#intro .logo{animation:gApproach 1.45s cubic-bezier(.16,.84,.28,1) both}
@keyframes gApproach{
  0%{opacity:0;transform:translateZ(-640px) rotateX(18deg);filter:blur(12px)}
  55%{opacity:1;filter:blur(0) drop-shadow(0 0 28px rgba(141,255,205,.65))}
  82%{transform:translateZ(46px) rotateX(0deg)}
  100%{transform:translateZ(0);filter:drop-shadow(0 0 18px rgba(141,255,205,.5))}}

/* ===== lightbox: aurora verde animata dietro la cornice ===== */
.zoom-ov::before{content:"";position:absolute;left:50%;top:50%;width:min(96vw,1500px);height:min(92vh,1100px);transform:translate(-50%,-50%);pointer-events:none;
  background:
    radial-gradient(45% 45% at 38% 60%,rgba(141,255,205,.30),transparent 60%),
    radial-gradient(38% 42% at 68% 35%,rgba(141,255,205,.22),transparent 60%),
    radial-gradient(30% 35% at 55% 78%,rgba(208,207,236,.16),transparent 60%);
  filter:blur(60px);opacity:0;transition:opacity .5s;animation:zglow 4.5s ease-in-out infinite alternate}
.zoom-ov.open::before{opacity:1}
@keyframes zglow{from{transform:translate(-50%,-50%) rotate(-4deg) scale(.95)}to{transform:translate(-50%,-50%) rotate(4deg) scale(1.07)}}

/* ===================== TRANSIZIONI v3: scatter random destra→sinistra, fade verde ===================== */
.pt::before,.pt::after{display:none}
.pt{background:radial-gradient(55% 75% at 100% 50%,rgba(141,255,205,.14),transparent 62%),linear-gradient(270deg,rgba(141,255,205,.08),transparent 45%)}
body.pt-in .pt{display:block;animation:washOut .85s ease forwards}
body.pt-out .pt{display:block;animation:washIn .35s ease forwards}
@keyframes washOut{0%{opacity:1}100%{opacity:0;visibility:hidden}}
@keyframes washIn{0%{opacity:0}100%{opacity:1}}
body.pt-in main>*{animation:flyIn .8s cubic-bezier(.16,.8,.24,1) both}
body.pt-in main>*:nth-child(n){animation-name:flyIn;animation-delay:var(--dd,.05s)}
@keyframes flyIn{
  0%{opacity:0;transform:translateX(var(--dx,160px));filter:blur(6px) drop-shadow(-22px 0 30px rgba(141,255,205,.28))}
  60%{filter:blur(0) drop-shadow(-12px 0 24px rgba(141,255,205,.16))}
  100%{opacity:1;transform:none;filter:none}}
body.pt-out main>*{animation:flyOut .45s cubic-bezier(.55,.05,.65,1) both}
body.pt-out main>*:nth-child(n){animation-name:flyOut;animation-delay:var(--do,0s)}
@keyframes flyOut{
  to{opacity:0;transform:translateX(calc(-1 * var(--dx,160px)));filter:blur(6px) drop-shadow(-20px 0 28px rgba(141,255,205,.3))}}

/* ===================== form contatti in overlay ===================== */
.form-ov{position:fixed;inset:0;z-index:250;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.86);backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .35s}
.form-ov.open{opacity:1;pointer-events:auto}
.form-card{position:relative;width:min(680px,94vw);max-height:90vh;overflow:auto;background:var(--bg-2);border:1px solid var(--line);padding:34px 32px 30px;--cut:16px;clip-path:var(--clip);filter:drop-shadow(0 26px 60px rgba(141,255,205,.22));transform:translateY(16px) scale(.97);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.form-ov.open .form-card{transform:none}
.form-head h3{font-size:26px;font-weight:300}
.form-x{position:absolute;top:14px;right:14px;width:38px;height:38px;border:1px solid var(--line-2);background:rgba(0,0,0,.4);color:var(--ink);cursor:pointer;font-size:14px;display:grid;place-items:center;--cut:6px;clip-path:var(--clip);transition:.25s;z-index:2}
.form-x:hover{border-color:var(--green);color:var(--green)}
.form-card .cform{max-width:none;margin:22px 0 0}
@media(max-width:560px){.form-card{padding:26px 18px 22px}}

/* ===================== TRANSIZIONI v4: più random, più lente, zero scatti ===================== */
/* la pagina parte nascosta PRIMA del primo paint (script inline nell'head) — niente flash */
html.pt-pre main>*{opacity:0;animation:preSafe .01s linear 3.4s forwards}
@keyframes preSafe{to{opacity:1}}
body.pt-in main>*,body.pt-out main>*{will-change:transform,opacity}
/* solo transform+opacity (GPU): fluido, senza blur/ombre che scattano */
body.pt-in main>*:nth-child(n){animation:flyIn2 1.8s cubic-bezier(.65,0,.15,1) both;animation-delay:var(--dd,.05s)}
@keyframes flyIn2{
  0%{opacity:0;transform:translate(var(--dx,280px),var(--dy,0px))}
  100%{opacity:1;transform:none}}
body.pt-out main>*:nth-child(n){animation:flyOut2 .95s cubic-bezier(.65,0,.35,1) both;animation-delay:var(--do,0s)}
@keyframes flyOut2{
  0%{opacity:1;transform:none}
  100%{opacity:0;transform:translate(calc(-1 * var(--dx,280px)),var(--dy,0px))}}
html.wait,html.wait *{cursor:progress!important}

/* ===================== TRANSIZIONI v5: per-elemento, solo asse X, compone da sinistra ===================== */
body.pt-in main>*:nth-child(n),body.pt-out main>*:nth-child(n){animation:none}
body.pt-in main .ptel{animation:elIn 1.7s cubic-bezier(.65,0,.15,1) both;animation-delay:var(--dd,.1s);will-change:transform,opacity}
@keyframes elIn{0%{opacity:0;transform:translateX(var(--dx,280px))}100%{opacity:1;transform:none}}
body.pt-out main .ptel{animation:elOut .95s cubic-bezier(.65,0,.35,1) both;animation-delay:var(--do,0s);will-change:transform,opacity}
@keyframes elOut{0%{opacity:1;transform:none}100%{opacity:0;transform:translateX(calc(-1 * var(--dx,280px)))}}
html.noscrollsmooth{scroll-behavior:auto}
@media (prefers-reduced-motion:reduce){body.pt-in main .ptel,body.pt-out main .ptel{animation:none}}

/* ===================== reveal allo scroll v2: granulare, solo Y, lento e random ===================== */
.reveal{opacity:1;transform:none;transition:none} /* il vecchio reveal a sezioni si spegne */
main .sr{opacity:0;transform:translateY(var(--sy,70px));transition:opacity 1s cubic-bezier(.65,0,.15,1) var(--sd,0s),transform 1s cubic-bezier(.65,0,.15,1) var(--sd,0s)}
main .sr.srin{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){main .sr{opacity:1;transform:none;transition:none}}

/* ===================== social con icone: chip tagliati, glow in hover ===================== */
.socials{gap:14px;flex-wrap:wrap}
.soc{display:inline-flex;align-items:center;gap:10px;padding:11px 18px;border:1px solid var(--line-2);color:var(--muted);--cut:8px;clip-path:var(--clip);transition:color .3s,border-color .3s,filter .3s,transform .3s}
.soc svg{width:19px;height:19px;display:block}
.soc:hover{color:var(--green);border-color:var(--green);transform:translateY(-2px);filter:drop-shadow(0 0 14px rgba(141,255,205,.5))}

/* ===================== v7: via il velo (zero scatti), back/forward con View Transitions ===================== */
body.pt-in .pt,body.pt-out .pt{display:none;animation:none}
@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vtOut .3s cubic-bezier(.65,0,.35,1) both}
  ::view-transition-new(root){animation:vtIn .5s cubic-bezier(.65,0,.35,1) both}
}
@keyframes vtOut{to{opacity:0;transform:translateX(-60px)}}
@keyframes vtIn{from{opacity:0;transform:translateX(60px)}}

/* la scrim scura dell'hero progetto entra in fade DOPO l'immagine, mai prima */
body.pt-in .phero-scrim{opacity:0;animation:scrimIn .9s ease 1.75s forwards}
@keyframes scrimIn{to{opacity:1}}
@media (prefers-reduced-motion:reduce){body.pt-in .phero-scrim{opacity:1;animation:none}}

/* ===================== respiro tra le sezioni: dimezzato ===================== */
section{padding:58px 0}
.contact{padding:84px 0}
.sec-head{margin-bottom:34px}
@media(max-width:560px){section{padding:42px 0}}

.ig.sq{aspect-ratio:1/1}

/* ===================== v8: layout desktop più largo (con un po' d'aria ai lati) ===================== */
:root{--maxw:1420px}
@media(min-width:1800px){:root{--maxw:1540px}}

/* ===================== v8: billboard progetto incorniciato — aspect ratio fisso, zero upscale ===================== */
/* Le immagini di copertina (per lo più 1400px di larghezza) non vengono più stirate a 80vh full-bleed:
   il billboard è una cornice ~2.35:1 dentro la larghezza del sito, così l'immagine resta ~1:1 coi pixel reali. */
.phero{min-height:0;display:block;overflow:visible;padding:26px 0 10px}
.phero-frame{position:relative;overflow:hidden;aspect-ratio:2.35/1;display:flex;align-items:flex-end;background:var(--bg-2);border:1px solid var(--line-2);--cut:16px;clip-path:var(--clip)}
.phero-media{position:absolute;inset:0;z-index:0}
.phero-media img{position:absolute;left:0;top:-5%;width:100%;height:110%;object-fit:cover;filter:grayscale(.1) brightness(.72)}
.phero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.18),transparent 30% 46%,rgba(0,0,0,.86) 96%)}
.phero-in{position:relative;z-index:3;width:100%;padding:30px 36px 32px}
.phero-in h1{font-size:clamp(30px,4.2vw,62px);font-weight:200;margin:14px 0 12px;max-width:18ch}
.phero-cta{margin-top:20px}
@media(max-width:780px){
  .phero-frame{aspect-ratio:auto;min-height:380px}
  .phero-in{padding:22px 18px 22px}
}

/* ===================== v8.2: HIGHLIGHTS in home — 3 card "post" sulla stessa riga ===================== */
#highlights{padding-bottom:20px}
.hl-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start;perspective:1400px}
/* sfalsate a nido d'ape: alta — bassa — alta */
.hl:nth-child(2){margin-top:54px}
.hl{position:relative;display:flex;flex-direction:column;border:1px solid var(--line-2);background:linear-gradient(180deg,var(--panel-2),transparent);--cut:14px;clip-path:var(--clip);transition:border-color .35s,filter .35s,transform .3s ease;will-change:transform}
.hl:hover{border-color:var(--green);filter:drop-shadow(0 18px 30px rgba(141,255,205,.2))}
/* leggera deriva dell'immagine in direzione opposta al tilt: profondità percepita */
.hl-main img,.hl-main video{will-change:transform}
.hl-main{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg-2)}
.hl-main img,.hl-main video{width:100%;height:100%;object-fit:cover;filter:grayscale(.3) brightness(.8);transition:filter .6s,transform .9s cubic-bezier(.2,.7,.2,1)}
.hl:hover .hl-main img,.hl:hover .hl-main video{filter:none;transform:scale(1.04)}
.hl-num{position:absolute;top:12px;left:12px;z-index:2;font-family:var(--brand);font-size:10px;letter-spacing:.14em;color:var(--green);background:rgba(0,0,0,.55);border:1px solid var(--line);padding:5px 10px;backdrop-filter:blur(4px)}
/* due mini-still affiancati, da anteprima album: incuriosiscono senza rubare spazio */
.hl-strip{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-2);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.hl-x{aspect-ratio:21/10;overflow:hidden;background:var(--bg-2)}
.hl-x img,.hl-x video{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) brightness(.78);transition:filter .6s,transform .8s cubic-bezier(.2,.7,.2,1)}
.hl:hover .hl-x img,.hl:hover .hl-x video{filter:none}
.hl-x:hover img,.hl-x:hover video{transform:scale(1.06)}
.hl-body{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1}
.hl-body .cat{font-family:var(--brand);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--green);display:block;margin-bottom:9px}
.hl-body h3{font-size:20px;font-weight:300;line-height:1.15}
.hl-client{color:var(--muted);margin-top:7px;font-family:var(--brand);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase}
.hl-txt{color:#b9c3bd;font-weight:200;font-size:13.5px;line-height:1.55;margin:12px 0 18px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hl-cta{margin-top:auto;font-family:var(--brand);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);display:inline-flex;align-items:center;gap:8px;position:relative;align-self:flex-start}
.hl-cta::after{content:"";position:absolute;left:0;bottom:-6px;height:1px;width:0;background:var(--green);transition:width .4s}
.hl:hover .hl-cta::after{width:100%}
@media(max-width:1080px){.hl-list{grid-template-columns:1fr;max-width:560px;margin:0 auto}.hl:nth-child(2){margin-top:0}}

/* ===================== v8.3: card lavori più piccole, scale variate, ZERO buchi ===================== */
/* larghezze variate (6/4/3 colonne) ma ALTEZZA UNIFORME: le righe restano sempre piene.
   La varietà la danno i formati di crop diversi (panoramico/standard/quadrato-ish). */
.work,.work.wide,.work.small,.work.tall{aspect-ratio:auto;height:clamp(200px,18.5vw,270px)}
.work{grid-column:span 4}
.work.wide{grid-column:span 6}
.work.tall{grid-column:span 4}
.work.small{grid-column:span 3}
.work .meta{padding:20px}
.work .meta h3{font-size:19px}
.work .arrow{width:34px;height:34px;top:14px;right:14px}
@media(max-width:980px){
  /* mobile: 2 lavori per riga, si scrolla la metà */
  .work,.work.wide,.work.small,.work.tall{grid-column:span 6;height:auto;aspect-ratio:16/11}
  .works{gap:10px}
  .work .meta{padding:12px}
  .work .meta h3{font-size:13.5px}
  .work .client{font-size:9px;margin-top:3px}
  .work .arrow{display:none}
}

/* ===================== v8: Instagram wall a carosello ===================== */
.ig-wall{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.ig-row{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.ig-track{display:flex;gap:12px;width:max-content;animation:scroll 80s linear infinite;padding:4px 0}
.ig-rev .ig-track{animation-direction:reverse;animation-duration:96s}
.ig-row:hover .ig-track{animation-play-state:paused}
.ig-wall .ig{flex:0 0 auto;width:172px;aspect-ratio:4/5;margin-top:0}
.ig-wall .ig:hover{transform:translateY(-4px)}
@media(max-width:560px){.ig-wall .ig{width:126px}.ig-track{gap:9px}.ig-wall{gap:9px}}
@media (prefers-reduced-motion:reduce){.ig-track{animation:none}}