:root{
  --ink:#050507; --surf:#0A0A0E; --surf2:#101016; --paper:#fff;
  --volt:#CCFF00; --volt-dim:rgba(204,255,0,.32); --volt-bg:rgba(204,255,0,.07);
  --ash:#9C9CAE; --ash2:#6A6A7C; --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.16);
  --disp:'Syne','Oswald',-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --text:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --gut:clamp(16px,4vw,60px); --r:2px; --rail:60px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--text);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit}
::selection{background:var(--volt);color:#000}
:focus-visible{outline:2px solid var(--volt);outline-offset:3px}
h1,h2,h3{font-family:var(--disp);font-weight:800;text-transform:uppercase;
  letter-spacing:-.04em;line-height:.95;margin:0;text-wrap:balance}
h1{font-size:clamp(33px,8.4vw,120px)}
h2{font-size:clamp(26px,5vw,68px)}
h3{font-size:clamp(16px,2vw,24px);letter-spacing:-.02em}
p{margin:0 0 1.05em}
.mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ash)}
.volt{color:var(--volt)}
.wrap{padding:0 var(--gut);max-width:1680px;margin:0 auto}
.lede{font-size:clamp(16px,1.55vw,21px);line-height:1.5;color:#D9D9E2;max-width:58ch}

/* ---------------- rail ---------------- */
.rail{position:fixed;top:0;left:0;right:0;height:var(--rail);z-index:80;
  display:flex;align-items:center;gap:6px;padding:0 var(--gut);
  background:linear-gradient(180deg,rgba(5,5,7,.92),rgba(5,5,7,.55) 70%,transparent);
  transition:background .25s ease,border-color .25s ease;border-bottom:1px solid transparent}
body.scrolled .rail{background:rgba(5,5,7,.94);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.brand{font-family:var(--disp);font-weight:800;font-size:clamp(12px,1.5vw,16px);
  letter-spacing:.01em;text-transform:uppercase;margin-right:auto;white-space:nowrap;
  min-width:0;overflow:hidden;text-overflow:ellipsis}
.burger .bi{display:none}
@media (max-width:560px){
  .brand{font-size:11.5px;letter-spacing:0}
  .langbtn,.burger{padding:7px 9px;font-size:10px;letter-spacing:.08em}
  .langbtn{margin-left:5px}
}
@media (max-width:480px){
  .burger .bl{display:none}
  .burger .bi{display:block;font-size:15px;line-height:1}
  .burger{padding:6px 10px}
}
.brand i{font-style:normal;color:var(--volt)}
.nav{display:flex;gap:2px;align-items:center}
.nav a{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ash);padding:8px 11px;border-radius:var(--r);white-space:nowrap;transition:color .18s}
.nav a:hover{color:var(--paper)}
.nav a.on{color:var(--volt)}
.langbtn{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  background:transparent;border:1px solid var(--line2);color:var(--ash);
  padding:7px 10px;border-radius:var(--r);cursor:pointer;margin-left:8px;transition:.18s}
.langbtn:hover{border-color:var(--volt-dim);color:var(--volt)}
.burger{display:none;background:transparent;border:1px solid var(--line2);color:var(--paper);
  padding:8px 11px;border-radius:var(--r);cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.13em}
@media (max-width:1150px){
  .nav{position:fixed;inset:var(--rail) 0 auto 0;flex-direction:column;align-items:stretch;
    background:rgba(5,5,7,.985);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);
    padding:10px var(--gut) 22px;gap:0;display:none}
  .nav.open{display:flex}
  .nav a{padding:15px 0;border-bottom:1px solid var(--line);font-size:13px;letter-spacing:.16em}
  .burger{display:block;order:3}
  .langbtn{order:2}
}

/* ---------------- views ---------------- */
.view{display:none}
.view.on{display:block;animation:fade .45s ease both}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.view.on{animation:none}}

/* ---------------- hero ---------------- */
/* mobile: foto a tutto schermo dietro al testo */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;display:flex;align-items:flex-end}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.hero .veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,5,7,.66) 0,rgba(5,5,7,.12) 30%,rgba(5,5,7,.35) 52%,rgba(5,5,7,.95) 100%)}
.hero .inner{position:relative;width:100%;padding:0 var(--gut) clamp(26px,4.5vw,62px);max-width:1680px;margin:0 auto}
/* desktop: apertura divisa — la verticale resta intera */
@media (min-width:900px){
  .hero{display:grid;grid-template-columns:1.02fr .98fr;align-items:stretch;height:100svh}
  .hero>img{position:relative;inset:auto;grid-area:1/2/2/3;height:100svh;object-position:50% 34%}
  .hero .veil{grid-area:1/2/2/3;
    background:linear-gradient(90deg,var(--ink) 0%,rgba(5,5,7,.62) 26%,rgba(5,5,7,0) 62%)}
  .hero .inner{grid-area:1/1/2/2;align-self:center;max-width:none;margin:0;
    padding:0 clamp(28px,3vw,54px) 0 var(--gut)}
  .hero h1{font-size:clamp(48px,6.4vw,104px)}
}
.hero h1{margin:0 0 18px}
.hero h1 em{font-style:normal;display:block;color:var(--volt)}
.hero .cap{margin-top:20px;display:flex;gap:14px;align-items:baseline;flex-wrap:wrap}
.scrollcue{position:absolute;right:var(--gut);bottom:clamp(26px,4.5vw,62px);z-index:2;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--ash2);
  writing-mode:vertical-rl;display:flex;align-items:center;gap:10px}
.scrollcue::after{content:'';width:1px;height:44px;background:linear-gradient(var(--volt),transparent)}
@media (max-width:700px){.scrollcue{display:none}}

/* ---------------- marquee ---------------- */
.strip{border-block:1px solid var(--line);background:var(--surf);overflow:hidden;padding:14px 0}
.strip .row{display:flex;gap:46px;width:max-content;animation:sl 60s linear infinite}
@keyframes sl{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.strip span{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;color:var(--ash2);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.strip .row{animation:none}}

/* ---------------- section heads ---------------- */
.sec{padding:clamp(54px,7vw,120px) 0 0}
.shead{display:flex;justify-content:space-between;align-items:flex-end;gap:22px;flex-wrap:wrap}
.shead .mono{padding-bottom:6px}
.shead h2{max-width:18ch}

/* ---------------- mosaico home ---------------- */
.mosaic{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(8px,1vw,16px);
  padding:clamp(22px,3vw,40px) var(--gut) 0;max-width:1680px;margin:0 auto}
.mosaic .t{position:relative;overflow:hidden;background:var(--surf2);grid-column:span 2;
  cursor:zoom-in;aspect-ratio:3/2}
.mosaic .t.w3{grid-column:span 3}
.mosaic .t.w4{grid-column:span 4}
.mosaic .t.w6{grid-column:span 6}
.mosaic .t.tall{aspect-ratio:2/3}
.mosaic .t img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.mosaic .t:hover img{transform:scale(1.035)}
@media (max-width:900px){
  .mosaic{grid-template-columns:repeat(2,1fr)}
  .mosaic .t,.mosaic .t.w3,.mosaic .t.w4{grid-column:span 1}
  .mosaic .t.w6{grid-column:span 2}
}

/* ---------------- tiles gallerie ---------------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1vw,16px);
  padding:clamp(22px,3vw,40px) var(--gut) 0;max-width:1680px;margin:0 auto}
@media (max-width:820px){.tiles{grid-template-columns:1fr}}
.tile{position:relative;overflow:hidden;background:var(--surf2);display:block;aspect-ratio:4/5}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9;
  transition:opacity .4s,transform .8s cubic-bezier(.2,.7,.2,1)}
.tile:hover img{opacity:1;transform:scale(1.04)}
.tile .lab{position:absolute;inset:auto 0 0 0;padding:26px 22px 20px;
  background:linear-gradient(transparent,rgba(5,5,7,.35) 22%,rgba(5,5,7,.95))}
.tile .lab h3{margin:0 0 5px}
.tile .lab .mono{font-size:10.5px;letter-spacing:.16em;color:var(--volt)}

/* ---------------- galleria ---------------- */
.ghead{padding:calc(var(--rail) + clamp(40px,6vw,90px)) var(--gut) 0;max-width:1680px;margin:0 auto}
.ghead h2{margin-bottom:14px}
.ghead .note{color:var(--ash);max-width:56ch;font-size:15px;margin:12px 0 0}
.gcount{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ash2);margin-top:16px}
.cols{columns:3 340px;column-gap:clamp(8px,1vw,16px);padding:clamp(22px,3vw,38px) var(--gut) 0;max-width:1680px;margin:0 auto}
.cols figure{break-inside:avoid;margin:0 0 clamp(8px,1vw,16px);background:var(--surf2);cursor:zoom-in;position:relative;overflow:hidden}
.cols figure img{width:100%;height:auto;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.cols figure:hover img{transform:scale(1.03)}
.cols figcaption{padding:10px 12px 13px;font-family:var(--mono);font-size:11px;line-height:1.6;color:var(--ash2)}

/* ---------------- storie ---------------- */
.story{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,44px);align-items:center;
  padding:clamp(40px,5vw,90px) var(--gut) 0;max-width:1680px;margin:0 auto}
.story:nth-child(even) .simg{order:2}
@media (max-width:880px){.story{grid-template-columns:1fr}.story:nth-child(even) .simg{order:0}}
.story .simg{position:relative;overflow:hidden;background:var(--surf2);cursor:zoom-in;aspect-ratio:4/5}
.story .simg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.story .simg:hover img{transform:scale(1.04)}
.story .stx h2{margin:12px 0 16px}
.story .stx p{color:var(--ash);font-size:15.5px;max-width:52ch}
.pill{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--volt-dim);background:var(--volt-bg);
  color:var(--volt);border-radius:var(--r);padding:6px 13px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
.pill::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--volt)}

/* ---------------- about ---------------- */
.two{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(24px,3.4vw,64px);
  padding:clamp(26px,3vw,44px) var(--gut) 0;max-width:1680px;margin:0 auto}
@media (max-width:880px){.two{grid-template-columns:1fr}}
.two .bio p{color:#C8C8D4;font-size:16.5px;max-width:56ch}
.two .bio p.first{font-size:clamp(17px,1.7vw,22px);color:var(--paper);line-height:1.45}
.aw{display:grid;grid-template-columns:auto 1fr;gap:11px 20px;margin-top:8px;font-size:14px;align-items:baseline}
.aw dt{font-family:var(--mono);font-size:11px;color:var(--volt);letter-spacing:.1em}
.aw dd{margin:0;color:#C8C8D4}
.aw dd small{display:block;color:var(--ash2);font-size:11.5px;font-family:var(--mono);letter-spacing:.08em;margin-top:2px}
.listing{margin-top:26px}
.listing .mono{display:block;margin-bottom:11px;color:var(--volt);font-size:10.5px}
.listing ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.listing li{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--ash);
  border:1px solid var(--line);padding:6px 10px;border-radius:var(--r)}
.portrait{background:var(--surf2);overflow:hidden}
.portrait img{width:100%;height:auto}

/* ---------------- contatti ---------------- */
.contact{padding:calc(var(--rail) + clamp(40px,6vw,90px)) var(--gut) 0;max-width:1680px;margin:0 auto}
.cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:34px}
.cgrid>div{background:var(--ink);padding:22px 24px}
.cgrid dt{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--volt);margin-bottom:9px}
.cgrid dd{margin:0;font-size:15px;color:#D9D9E2;word-break:break-word}
.cgrid a:hover{color:var(--volt)}
.big-mail{display:inline-block;margin-top:30px;font-family:var(--disp);font-weight:800;
  text-transform:uppercase;letter-spacing:-.03em;font-size:clamp(20px,3.6vw,50px);
  color:var(--paper);border-bottom:3px solid var(--volt);padding-bottom:5px;line-height:1.1;word-break:break-word}
.big-mail:hover{color:var(--volt)}

/* ---------------- footer ---------------- */
footer{margin-top:clamp(60px,8vw,130px);border-top:1px solid var(--line);
  padding:26px var(--gut) 40px;background:var(--surf)}
.fin{max-width:1680px;margin:0 auto;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.fin p{font-family:var(--mono);font-size:10.5px;color:var(--ash2);margin:0;letter-spacing:.08em;line-height:1.9}
.fin a:hover{color:var(--volt)}

/* ---------------- blocchi e bottoni ---------------- */
.panel{padding:clamp(46px,6vw,96px) var(--gut) 0;max-width:1680px;margin:0 auto}
.panel>.mono{display:block;margin-bottom:6px}
.btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.btn{display:inline-block;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;border:1px solid var(--line2);padding:13px 20px;border-radius:var(--r);
  color:var(--paper);background:transparent;cursor:pointer;transition:.18s;text-align:center}
.btn:hover{border-color:var(--volt);color:var(--volt)}
.btn.fill{background:var(--volt);color:#000;border-color:var(--volt);font-weight:500}
.btn.fill:hover{background:#DBFF3A;color:#000}
.dl{display:grid;grid-template-columns:auto 1fr;gap:11px 26px;font-size:14.5px;margin-top:22px;align-items:baseline}
.dl dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--volt);padding-top:3px}
.dl dd{margin:0;color:#C8C8D4;line-height:1.6}
@media (max-width:640px){.dl{grid-template-columns:1fr;gap:4px 0}.dl dd{margin-bottom:14px}}

/* ---------------- progetti ---------------- */
.prj{padding:clamp(40px,5vw,86px) 0 0;border-top:1px solid var(--line);margin-top:clamp(34px,4vw,64px)}
.prj:first-of-type{border-top:none;margin-top:0}
.phead{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.phead h3{font-size:clamp(20px,3vw,38px);letter-spacing:-.03em}
.pmeta{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--volt)}
.pdesc{color:var(--ash);max-width:60ch;font-size:15px;padding-top:12px;margin:0}
.pcols{columns:4 260px}
.pcols figure{cursor:zoom-in}

/* ---------------- servizi ---------------- */
.cols4{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:22px}
.c4{background:var(--ink);padding:22px 22px 26px}
.c4 .cnum{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--volt);display:block;margin-bottom:14px}
.c4 h3{margin-bottom:9px}
.c4 p{margin:0;color:var(--ash);font-size:14px;line-height:1.6}
.two2{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:24px}
@media (max-width:820px){.two2{grid-template-columns:1fr}}
.trk{background:var(--ink);padding:24px 24px 28px}
.trk h3{margin:10px 0 14px;font-size:clamp(18px,2.4vw,28px)}
.trk ul{list-style:none;margin:0 0 22px;padding:0}
.trk li{font-size:14.5px;color:#C8C8D4;padding:9px 0 9px 18px;border-bottom:1px solid var(--line);position:relative}
.trk li::before{content:'';position:absolute;left:0;top:17px;width:6px;height:1px;background:var(--volt)}
.trk li:last-child{border-bottom:none}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:18px}
.plan{background:var(--ink);padding:22px 22px 26px}
.plan .mono{display:block;color:var(--volt);font-size:11px;letter-spacing:.18em}
.plan .hrs{font-family:var(--disp);font-weight:800;font-size:clamp(30px,4vw,50px);letter-spacing:-.04em;
  display:block;margin:8px 0 16px;line-height:1}
.plan ul{list-style:none;margin:0;padding:0}
.plan li{font-size:14px;color:var(--ash);padding:7px 0;border-bottom:1px solid var(--line)}
.plan li:last-child{border-bottom:none}

/* ---------------- modulo preventivo ---------------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px;max-width:820px}
.form .full{grid-column:1/-1}
@media (max-width:700px){.form{grid-template-columns:1fr}}
.form label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--volt);margin-bottom:7px}
.form input,.form select,.form textarea{width:100%;background:var(--surf2);color:var(--paper);
  border:1px solid var(--line2);border-radius:var(--r);padding:12px 13px;font-family:var(--text);font-size:15px}
.form textarea{min-height:110px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--volt);outline-offset:1px;border-color:var(--volt)}
.form select{appearance:none;cursor:pointer}
.form option{background:#0E0E13;color:#fff}
.formnote{font-family:var(--mono);font-size:10.5px;color:var(--ash2);letter-spacing:.06em;line-height:1.8;margin:14px 0 0}

/* ---------------- lightbox ---------------- */
.lb{position:fixed;inset:0;z-index:120;background:rgba(3,3,5,.97);display:none;
  align-items:center;justify-content:center;flex-direction:column;padding:clamp(12px,3vw,42px)}
.lb.on{display:flex}
.lb img{max-width:100%;max-height:calc(100vh - 150px);width:auto;height:auto;object-fit:contain}
.lb .lcap{margin-top:16px;font-family:var(--mono);font-size:11.5px;line-height:1.7;color:var(--ash);
  text-align:center;max-width:70ch;padding:0 10px}
.lb .lcap b{display:block;color:var(--ash2);font-size:10px;letter-spacing:.16em;margin-top:8px}
.lb button{position:absolute;background:transparent;border:1px solid var(--line2);color:var(--paper);
  width:46px;height:46px;border-radius:var(--r);cursor:pointer;font-size:19px;line-height:1;transition:.18s}
.lb button:hover{border-color:var(--volt);color:var(--volt)}
.lb .lx{top:clamp(12px,2.4vw,26px);right:clamp(12px,2.4vw,26px)}
.lb .lp{left:clamp(8px,2vw,26px);top:50%;transform:translateY(-50%)}
.lb .ln{right:clamp(8px,2vw,26px);top:50%;transform:translateY(-50%)}
@media (max-width:640px){.lb .lp{left:8px}.lb .ln{right:8px}.lb button{width:40px;height:40px}}

.lede.claim{font-family:var(--disp);font-weight:800;text-transform:uppercase;
  letter-spacing:-.03em;line-height:1;font-size:clamp(22px,3vw,42px);color:var(--paper);max-width:none}

.awline{display:block;max-width:62ch;line-height:1.9;font-size:10.5px;letter-spacing:.1em}
.awgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:20px}
.awgrid>div{background:var(--ink);padding:16px 18px;display:flex;gap:14px;align-items:baseline}
.awgrid dt{font-family:var(--mono);font-size:11px;color:var(--volt);letter-spacing:.1em;flex:0 0 auto;min-width:34px}
.awgrid dt.noyr{color:var(--ash2)}
.awgrid dd{margin:0;font-size:14px;color:#D9D9E2;line-height:1.45}
.awgrid dd small{display:block;font-family:var(--mono);font-size:10.5px;color:var(--ash2);
  letter-spacing:.08em;margin-top:3px}

/* ---------------- cursore tondo ---------------- */
.cur,.curdot{position:fixed;top:0;left:0;pointer-events:none;z-index:200;
  border-radius:50%;transform:translate3d(-50%,-50%,0);opacity:0}
.cur{width:34px;height:34px;border:1.5px solid var(--volt);
  transition:width .25s cubic-bezier(.2,.7,.2,1),height .25s cubic-bezier(.2,.7,.2,1),
             background-color .25s,border-color .25s,opacity .2s}
.curdot{width:5px;height:5px;background:var(--volt);transition:opacity .2s}
body.cur-on .cur,body.cur-on .curdot{opacity:1}
body.cur-on .cur.hot{width:74px;height:74px;background-color:rgba(204,255,0,.13)}
body.cur-on .cur.down{width:26px;height:26px;background-color:rgba(204,255,0,.28)}
@media (hover:hover) and (pointer:fine){
  body.cur-on,body.cur-on *{cursor:none!important}
}
@media not all and (hover:hover),(pointer:coarse){
  .cur,.curdot{display:none}
}
@media (prefers-reduced-motion:reduce){
  .cur{transition:opacity .2s}
}

/* ---------------- reveal ---------------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ---- indice dei progetti ---- */
.pindex{display:flex;flex-wrap:wrap;gap:8px;padding:6px 0 clamp(26px,3.4vw,44px)}
.pindex a{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ash);border:1px solid var(--line);border-radius:var(--r);padding:8px 12px;
  transition:color .18s,border-color .18s}
.pindex a:hover{color:var(--volt);border-color:var(--volt-dim)}
/* ---- teste di gruppo e di capitolo ---- */
.pgroup{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding:clamp(30px,4vw,58px) 0 clamp(14px,1.8vw,22px);border-top:1px solid var(--line2)}
.pgroup h3{font-size:clamp(19px,2.6vw,32px)}
.pgroup .mono{margin-left:auto}
.chap{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:clamp(16px,2.2vw,30px) 0 clamp(10px,1.2vw,16px)}
.chap h4{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(14px,1.5vw,18px);margin:0;color:var(--volt)}
.chap .mono{font-size:10.5px}
/* ---- rinvio da una galleria a un progetto ---- */
.crossref{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--ash);
  border-top:1px solid var(--line);padding:22px 0 clamp(30px,4vw,56px);margin:0;line-height:1.9}
.crossref a{border-bottom:1px solid var(--volt-dim)}
.crossref a:hover{border-bottom-color:var(--volt)}

/* ---- sequenza cronologica: si legge per righe, non per colonne ---- */
.seq{columns:auto!important;display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(8px,1vw,16px);align-items:start}
.seq figure{margin:0;display:flex;flex-direction:column}
.seq figure img{aspect-ratio:4/3;object-fit:cover;object-position:50% 42%;height:auto}
.seq figcaption{flex:1}
@media(max-width:1100px){.seq{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.seq{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.seq{grid-template-columns:1fr}}

/* ---- chi sono: il ritratto non si stira, la didascalia gli sta sotto ---- */
#v-about .two > .portrait{align-self:start}
#v-about .two > .portrait + p.mono{grid-column:2;align-self:start;margin:0}
@media(max-width:820px){#v-about .two > .portrait + p.mono{grid-column:1}}

/* ---- i quattro lavori in home: si riducono davvero sui piccoli schermi ---- */
.tiles.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.tiles.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.tiles.four{grid-template-columns:1fr}}

/* =====================================================================
   Respiro. Meno cose per schermata, piu' spazio fra una e l'altra,
   didascalie che non rubano la scena alle fotografie.
   ===================================================================== */

/* ---- piu' aria fra le sezioni ---- */
.sec{padding:clamp(72px,9vw,150px) 0 0}
.ghead{padding-top:calc(var(--rail) + clamp(56px,8vw,118px))}
.ghead .note{margin-top:18px;max-width:52ch;line-height:1.6}
.prj{padding-top:clamp(56px,6.5vw,108px);margin-top:clamp(48px,5.5vw,88px)}

/* ---- fotografie piu' grandi: tre colonne invece di quattro ---- */
.pcols{columns:3 320px}
.cols{column-gap:clamp(12px,1.4vw,22px);padding-top:clamp(28px,3.4vw,48px)}
.cols figure{margin-bottom:clamp(12px,1.4vw,22px)}
.seq{grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,22px)}
@media(max-width:1100px){.seq{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.seq{grid-template-columns:1fr}}

/* ---- didascalie discrete ---- */
.cols figcaption{font-size:10.5px;line-height:1.55;letter-spacing:.02em;
  color:#7A7A8C;padding:9px 2px 2px}
.seq figcaption{padding:9px 2px 2px}

/* Nelle gallerie di gara le didascalie sono venti di fila: le mostro
   al passaggio del mouse. Restano nell'HTML, quindi Google le legge lo
   stesso, e dove il mouse non c'e' (telefono) restano sempre visibili. */
@media(hover:hover) and (pointer:fine){
  #v-boxing .cols figcaption,
  #v-wrestling .cols figcaption,
  #v-basketball .cols figcaption{opacity:0;transition:opacity .25s ease}
  #v-boxing .cols figure:hover figcaption,
  #v-wrestling .cols figure:hover figcaption,
  #v-basketball .cols figure:hover figcaption{opacity:1}
}

/* ---- titoli un filo meno urlati ---- */
h2{font-size:clamp(26px,4.4vw,56px)}
.phead h3{font-size:clamp(19px,2.6vw,34px)}
.phead{gap:20px;row-gap:6px}
.pdesc{padding-top:16px;line-height:1.62}

/* ---- indice dei lavori: piu' quieto ---- */
.pindex{gap:7px;padding-bottom:clamp(30px,3.8vw,52px)}
.pindex a{color:var(--ash2);border-color:rgba(255,255,255,.07);padding:9px 13px}
.pindex a:hover{color:var(--volt);border-color:var(--volt-dim)}

/* ---- capitoli: piu' respiro sopra ---- */
.chap{padding-top:clamp(26px,3.2vw,44px)}

/* ---- pacchetti: senza il numerone, il nome del piano regge da solo ---- */
.plan .mono{font-size:12px;letter-spacing:.18em;color:var(--volt);display:block;
  padding-bottom:clamp(12px,1.4vw,18px)}
.plan ul{margin-top:0}

/* ---- contatti: sei voci, quindi colonne che dividono sei.
       Con auto-fit ne restavano quattro vuote con i bordi in vista. ---- */
.cgrid{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.cgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cgrid{grid-template-columns:1fr}}

/* ---- la scala dei pacchetti: dal singolo scatto alla collaborazione ---- */
.scala{list-style:none;margin:clamp(26px,3.2vw,44px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line)}
.scala li{background:var(--ink);padding:clamp(20px,2.4vw,30px);
  position:relative;display:flex;flex-direction:column;gap:10px}
.scala li .mono{font-size:11px;letter-spacing:.16em;color:var(--volt)}
.scala li p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ash)}
/* una freccia sottile fra un gradino e l'altro */
.scala li + li::before{content:'';position:absolute;left:-1px;top:clamp(20px,2.4vw,30px);
  width:1px;height:22px;background:var(--volt-dim)}
@media(max-width:1000px){.scala{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.scala{grid-template-columns:1fr}
  .scala li + li::before{left:clamp(20px,2.4vw,30px);top:-1px;width:22px;height:1px}}

/* ---- link a un video, dentro la scheda di un lavoro ---- */
.watch{margin:14px 0 0}
.watch a{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--volt);border-bottom:1px solid var(--volt-dim);padding-bottom:3px}
.watch a:hover{border-bottom-color:var(--volt)}

/* ---- citazione dal testo di un autore terzo, dentro la scheda ---- */
.cita{margin:clamp(16px,2vw,24px) 0 0;padding:0 0 0 clamp(14px,1.6vw,22px);
  border-left:1px solid var(--volt-dim);max-width:60ch}
.cita p{margin:0;font-size:15px;line-height:1.62;color:#C8C8D4;font-style:italic}
.cita cite{display:block;margin-top:10px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ash2);font-style:normal}

/* ---- testo lungo di un lavoro, apribile ---- */
.testo{border-top:1px solid var(--line);margin-top:clamp(18px,2.2vw,28px);
  padding-top:clamp(14px,1.8vw,20px);max-width:66ch}
.testo summary{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--volt);cursor:pointer;list-style:none}
.testo summary::-webkit-details-marker{display:none}
.testo summary::after{content:' +'}
.testo[open] summary::after{content:' \2212'}
.testo summary:hover{color:#fff}
.testo p{margin:clamp(14px,1.6vw,20px) 0 0;font-size:15px;line-height:1.68;color:#C8C8D4}
.testo .firma{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ash2);margin-top:clamp(18px,2vw,26px)}
html[lang="en"] .solo-it{display:none}
html:not([lang="en"]) .solo-en{display:none}

/* ---- apertura: cosa faccio e come chiedermelo, senza scorrere ---- */
.hero .pitch{margin:clamp(14px,1.6vw,20px) 0 0;font-family:var(--text);font-size:clamp(14px,1.15vw,16.5px);
  line-height:1.5;color:#D9D9E2;max-width:34ch;font-weight:400;letter-spacing:0;text-transform:none}
.hero .hero-btns{justify-content:flex-start;margin-top:clamp(18px,2vw,26px)}
.hero .hero-btns .btn{padding:13px 22px;font-size:11.5px}
@media(max-width:900px){.hero .pitch{max-width:100%}
  .hero .hero-btns{gap:10px}
  .hero .hero-btns .btn{padding:12px 16px;font-size:11px}}

/* ---------- schede dei lavori (home ATLETI / OLTRE LO SPORT) ---------- */
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px);
  padding:clamp(30px,3.6vw,50px) 0 clamp(46px,6vw,92px)}
.pcard{display:flex;flex-direction:column;border:1px solid var(--line);background:rgba(255,255,255,.015);
  transition:border-color .3s ease,transform .3s ease,background .3s ease}
.pcard:hover,.pcard:focus-visible{border-color:var(--volt-dim);background:rgba(255,255,255,.03);transform:translateY(-3px)}
.pcimg{display:block;overflow:hidden;aspect-ratio:4/3;background:var(--surf)}
.pcimg img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.pcard:hover .pcimg img{transform:scale(1.045)}
/* il testo si allunga quanto serve: cosi' "guarda il lavoro" resta allineato in tutta la riga */
.pctxt{display:flex;flex-direction:column;flex:1 1 auto;padding:15px 16px 17px}
.pctitle{display:block;font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(13.5px,1.15vw,17px);letter-spacing:-.02em;line-height:1.18}
.pcmeta{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--volt);padding-top:9px;line-height:1.55}
.pcgo{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ash2);padding-top:14px;margin-top:auto;transition:color .3s ease}
.pcard:hover .pcgo{color:var(--volt)}
@media(max-width:900px){.pcards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.pcards{grid-template-columns:1fr}}

/* nelle gallerie la didascalia compare passandoci sopra col mouse. Dove il mouse
   non c'e' (telefoni, tablet) resterebbe una fascia vuota: li' si vede sempre. */
@media (hover:none){
  #v-boxing .cols figcaption,
  #v-wrestling .cols figcaption,
  #v-basketball .cols figcaption{opacity:1}
}

/* i riconoscimenti sono 8 piu' il monogramma: 9 celle.
   Con auto-fit il numero di colonne cambia con la larghezza e resta un buco,
   quindi le colonne si fissano a 3 (9 = 3 righe piene) e sotto si passa a 1. */
.awgrid{grid-template-columns:repeat(3,1fr)}
@media(max-width:780px){
  .awgrid{grid-template-columns:1fr}
  .awgrid>div.mbmark{display:none}
}
.awgrid>div.mbmark{justify-content:center;align-items:center}
.mbmark dd{margin:0}
.mbmark span{font-family:var(--disp);font-weight:800;letter-spacing:-.05em;line-height:1;
  font-size:clamp(19px,2vw,28px);color:var(--ash2);transition:color .45s ease}
.mbmark i{font-style:normal;color:var(--volt)}
.awgrid:hover .mbmark span{color:var(--paper)}

a.wjlink{color:var(--volt);border-bottom:1px solid var(--volt-dim);transition:border-color .3s ease}
a.wjlink:hover{border-color:var(--volt)}

/* ---------- i video in home: reel verticali, una riga che si scorre ---------- */
.vrow{display:flex;gap:clamp(12px,1.3vw,20px);overflow-x:auto;scroll-snap-type:x proximity;
  padding:clamp(26px,3.2vw,44px) 0 16px;scrollbar-width:thin}
.vrow>figure{flex:0 0 clamp(186px,16vw,248px);scroll-snap-align:start;margin:0}
.vitem video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;
  background:var(--surf);border:1px solid var(--line)}
.vitem figcaption{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ash2);padding:9px 2px 0;line-height:1.55}
.vids .note{max-width:52ch}

/* ---------- pagina singola di un lavoro ---------- */
.lavoro{padding-top:calc(var(--rail) + clamp(30px,4vw,64px))}
.lavoro .prj{border-top:none;margin-top:0;padding-top:0}
.crumb{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ash2);padding:0 0 clamp(20px,2.6vw,34px)}
.crumb a{color:var(--ash2);border-bottom:1px solid transparent;transition:color .3s ease,border-color .3s ease}
.crumb a:hover{color:var(--volt);border-color:var(--volt-dim)}
.crumb span{color:var(--ash2);opacity:.55;padding:0 7px}
.pnav{display:flex;justify-content:space-between;align-items:stretch;gap:14px;flex-wrap:wrap;
  border-top:1px solid var(--line);margin-top:clamp(46px,6vw,92px);padding:clamp(22px,3vw,38px) 0 clamp(40px,5vw,72px)}
.pnav a{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ash2);border:1px solid var(--line);padding:12px 15px;line-height:1.5;
  transition:color .3s ease,border-color .3s ease;max-width:46%}
.pnav a:hover{color:var(--volt);border-color:var(--volt-dim)}
.pnav a b{display:block;font-weight:500;color:var(--paper);padding-top:5px;letter-spacing:.06em}
.pnav a:hover b{color:var(--volt)}
.pnav .avanti{margin-left:auto;text-align:right}
@media(max-width:560px){.pnav a{max-width:100%;flex:1 1 100%}.pnav .avanti{text-align:left}}