@font-face{font-family:Geist;src:url('/assets/geist.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Michroma;src:url('/assets/galleria/michroma.woff2') format('woff2');font-weight:400;font-display:swap}
:root{color-scheme:dark;--sab:env(safe-area-inset-bottom,0px);--bar:50px;--bw:2px;--fill:linear-gradient(180deg,#2b333c,#181d22);--ring:linear-gradient(180deg,#f4f8fbd9,#e9eef26b 60%,#e9eef2a6);--fillH:linear-gradient(180deg,#f6f9fb,#d2dce4);--ringH:linear-gradient(#f6f9fb,#f6f9fb);--void:#0c0e11;--graphite:#161a1f;--steel:#3a424b;--ice:#e9eef2;--muted:#a3adb7;--line:#e9eef224;--pad:max(clamp(20px,4.2vw,72px),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));--padb:clamp(18px,3.2vh,34px);--head:76px;--ease:cubic-bezier(.2,.7,.2,1)}
@media(min-resolution:1.5dppx){:root{--bw:1.5px}}
@media(min-resolution:2.5dppx){:root{--bw:1px}}
*{box-sizing:border-box}
html{font-size:16px;background:var(--void);scroll-padding-top:90px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--void);color:var(--ice);font-family:Geist,Arial,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit;text-decoration:none}
a,button{-webkit-tap-highlight-color:transparent}
/* i pulsanti non ereditano il carattere della pagina: senza questa riga «Informazioni e privacy» e la × uscivano in Arial */
button,input,textarea,select{font-family:inherit}
a:focus-visible,button:focus-visible{outline:2px solid #edf6ff;outline-offset:5px;border-radius:4px}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,figure{margin:0;padding:0}
ul{list-style:none}
::selection{background:#d8e3ec;color:#101316}
.skip{position:absolute;top:-100px;left:20px;padding:12px 20px;background:#fff;color:#111;z-index:30}
.skip:focus{top:10px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.eyebrow{font:500 12.5px/1.4 Geist,Arial,sans-serif;letter-spacing:.17em;text-transform:uppercase;color:#c9d3dc;display:flex;gap:12px;align-items:center}
.eyebrow::before{content:'';width:26px;height:1px;background:#c9d3dc;opacity:.75}
.button{display:inline-flex;gap:28px;align-items:center;justify-content:space-between;min-height:48px;padding:14px 24px;border:var(--bw) solid transparent;border-radius:999px;background:var(--fill) padding-box,var(--ring) border-box;box-shadow:0 8px 22px #0000004d;backdrop-filter:blur(10px);font-size:0.9375rem;font-weight:500;transition:background .25s,color .25s,border-color .25s,box-shadow .25s}
@media(hover:hover){.button:hover,html.gl .button:hover{background:var(--fillH) padding-box,var(--ringH) border-box;color:var(--void);box-shadow:0 10px 26px #0006}}
.button:focus-visible{background:var(--fill) padding-box,var(--ringH) border-box}

/* ---------- intestazione e confronto (comuni) ---------- */
.header{position:absolute;z-index:12;top:0;left:0;right:0;height:var(--head);padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand img{width:114px;height:auto}
.brand{color:var(--ice);display:block}
.brand-mark{display:block;width:94px;height:auto;overflow:visible}
.header nav{display:flex;gap:clamp(18px,2.6vw,42px);margin-left:auto;font-size:0.8125rem;letter-spacing:.03em}
.header nav a{padding:12px 4px;color:#cfd7de;position:relative}
.header nav a::after{content:'';position:absolute;left:4px;right:4px;bottom:6px;height:1px;background:var(--ice);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.header nav a[aria-current]{color:var(--ice)}
.header nav a[aria-current]::after{transform:scaleX(1)}
@media(hover:hover){.header nav a:hover{color:var(--ice)}.header nav a:hover::after{transform:scaleX(1)}}
.ni,.nl .short{display:none}
.nav-contact{display:inline-flex;align-items:center;gap:10px;min-height:42px;padding:0 18px;border-radius:999px;background:var(--ice);color:var(--void);font-size:0.8125rem;font-weight:500}
.compare{position:fixed;z-index:12;right:var(--pad);bottom:var(--padb);display:flex;gap:2px;align-items:center;padding:4px;background:#161a1fcc;border:1px solid #e9eef226;border-radius:999px;backdrop-filter:blur(14px);font-size:0.6875rem;white-space:nowrap}
.compare>span:first-child{padding:0 10px;color:var(--muted)}
.compare a{min-height:36px;padding:0 13px;border-radius:999px;display:flex;gap:7px;align-items:center;color:#c3ccd5}
.compare a[aria-current]{background:var(--ice);color:var(--void)}
@media(hover:hover){.compare a:not([aria-current]):hover{background:#ffffff14}}
.variant-letter{font-family:Michroma,Geist,sans-serif;font-size:0.625rem}

/* ---------- contenuti: pagina verticale semplice (senza JS, senza WebGL, movimento ridotto) ---------- */
.stage,.hud,.cursor-label{display:none}
main{display:block}
.st{padding:clamp(64px,9vw,128px) var(--pad);border-top:1px solid var(--line)}
.st h2{font-size:clamp(2rem,4.6vw,4.4rem);line-height:1.04;letter-spacing:-.035em;font-weight:500;margin-top:18px}
.st-head{margin-bottom:clamp(30px,4vw,56px)}
.st-copy{max-width:40rem}
.st-copy p:not(.eyebrow){color:var(--muted);font-size:clamp(1rem,1.3vw,1.2rem);margin-top:20px;max-width:46ch}
.st-copy .button{margin-top:28px}
.all-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:18px;padding:0 18px;border:var(--bw) solid transparent;border-radius:999px;background:var(--fill) padding-box,var(--ring) border-box;color:#dfe6ec;font-size:.875rem;font-weight:500;transition:background .25s,color .25s,border-color .25s}
@media(hover:hover){.all-link:hover{background:var(--fillH) padding-box,var(--ringH) border-box;color:var(--void)}}

.st-studio{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding-top:140px;border-top:0;overflow:hidden;background:#0c0e11 url('/assets/galleria/img/hero-poster.webp') 62% 40%/cover no-repeat}

.st-studio::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0c0e11 0%,#0c0e1100 25%,#0c0e11aa 78%,#0c0e11 100%),linear-gradient(90deg,#0c0e11cc,#0c0e1100 62%);pointer-events:none}
.hero-copy{position:relative;z-index:1}
@media(max-aspect-ratio:1/1){.st-studio{background-image:url('/assets/galleria/img/hero-poster-portrait.webp');background-position:50% 0}}
.hero-copy h1{font-size:clamp(3rem,8.4vw,7.4rem);line-height:.98;letter-spacing:-.05em;font-weight:500;margin-top:24px}
.hero-copy h1 span{color:#9fb0be}
.intro{font-size:clamp(1.05rem,1.5vw,1.3rem);color:#c4ced6;margin-top:24px;max-width:34ch}
.hero-copy .button{margin-top:30px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{display:grid;gap:14px;align-content:start;height:100%;padding:28px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(160deg,#1b2026,#12151a);position:relative;transition:border-color .3s,transform .3s var(--ease)}
@media(hover:hover){.card:hover{border-color:#e9eef266;transform:translateY(-3px)}}
.card .num{font:400 .6875rem Michroma,Geist,sans-serif;letter-spacing:.18em;color:var(--muted)}
.card h3{font-size:clamp(1.3rem,2vw,1.9rem);line-height:1.12;font-weight:500;letter-spacing:-.02em}
.card p{color:var(--muted);font-size:1rem;max-width:30ch}
.card .arrow{position:absolute;top:26px;right:26px;font-size:1.25rem}
.projects{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,3vw,48px)}
.project-link{display:block}
.project figure{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#0c0e11;aspect-ratio:4/3}
.project figure img{width:100%;height:100%;object-fit:contain;transition:transform .8s var(--ease)}
@media(hover:hover){.project-link:hover figure img{transform:scale(1.025)}}
.project-meta{display:grid;grid-template-columns:1fr auto;gap:4px 24px;margin-top:18px;align-items:baseline}
.project-no{grid-column:1/-1;font:400 .6875rem Michroma,Geist,sans-serif;letter-spacing:.18em;color:var(--muted)}
.project h3{font-size:clamp(1.3rem,2vw,1.8rem);font-weight:500;letter-spacing:-.02em}
.project .kind{font-size:0.8125rem;color:var(--muted)}
.project-meta p{grid-column:1/-1;color:var(--muted);font-size:1rem;margin-top:4px}
.project .open{grid-column:1/-1;margin-top:10px;font-size:0.875rem}
.room-fig{margin-top:36px;max-width:720px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.contact-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.contact-links a{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px 0 16px;border:var(--bw) solid transparent;border-radius:999px;background:var(--fill) padding-box,var(--ring) border-box;font-size:1rem;font-weight:500;transition:background .25s,color .25s,border-color .25s}
.contact-links .ci{flex:none;width:20px;height:20px}
@media(hover:hover){.contact-links a:hover{background:var(--fillH) padding-box,var(--ringH) border-box;color:var(--void)}}
.legal{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:64px;font-size:0.8125rem;color:var(--muted)}
@media(hover:hover){.legal a:hover{color:var(--ice)}}
.hero-poster{display:none}
@media(max-width:900px){.cards,.projects{grid-template-columns:1fr}html:not(.gl) .header{height:auto;flex-wrap:wrap;gap:4px 16px;padding-top:12px;padding-bottom:6px}html:not(.gl) .header nav{display:flex;flex-wrap:wrap;gap:0 14px;margin:0;width:100%}html:not(.gl) .nav-contact{display:none}.card{height:auto}}
@media(max-width:700px){.compare{position:static;margin:0 var(--pad) 28px;width:fit-content}.compare>span:first-child{display:none}}

/* ---------- modalita 3D ---------- */
html.gl,html.gl body{height:100%;overflow:hidden;overscroll-behavior:none;touch-action:pinch-zoom;-webkit-user-select:none;user-select:none}
html.gl body{position:fixed;inset:0;width:100%}
html.gl .stage{display:block;position:fixed;inset:0;z-index:0;background:var(--void)}
html.gl #scena{display:block;position:absolute;inset:0;width:100%;height:100%;outline:none}
html.gl.grabbing #scena{cursor:grabbing}
html.gl .veil{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 90% 85% at 50% 44%,transparent 58%,#101e2b45 100%),linear-gradient(180deg,#14253438 0,#14253400 20%,#14253400 80%,#14253445 100%)}
html.gl.is-leaving .veil{background:radial-gradient(ellipse 85% 75% at 50% 46%,transparent 52%,#05060899 100%),linear-gradient(0deg,#0c0e11,#0c0e11);opacity:calc(var(--leave,0))}
html.gl.is-leaving .st,html.gl.is-leaving .hud,html.gl.is-leaving .header{opacity:calc(1 - var(--leave,0)*1.4);transition:opacity .2s linear;pointer-events:none}
html.gl .header{position:fixed;background:linear-gradient(180deg,#182d3c70,#182d3c00)}
/* translateY e non translate3d: a riposo il testo non resta su un livello composito a parte, e Chrome lo disegna con l'antialias pieno */
html.gl .st{position:fixed;inset:0;z-index:2;padding:0;border:0;overflow:hidden;pointer-events:none;visibility:hidden;opacity:var(--p,0);transform:translateY(calc((1 - var(--p,0))*16px));transition:none}
html.gl.measuring .st{transform:none!important}   /* solo durante la misura degli spazi liberi (measureBands) */
html.gl .st[data-on]{visibility:visible}
html.gl #studio{display:block;min-height:0;background:none}
html.gl 
.st-studio::after{display:none}
html.gl .st a,html.gl .st button{pointer-events:auto}
html.gl .room-fig{display:none}
html.gl .st-head,html.gl .st-copy,html.gl .hero-copy{position:absolute;left:var(--pad);right:var(--pad);margin:0}
html.gl .st-head{top:calc(var(--head) + clamp(10px,4vh,48px));max-width:40rem}
html.gl .st-head h2,html.gl .st-copy h2{font-size:clamp(1.9rem,4.2vw,4.3rem)}
html.gl .st-copy,html.gl .hero-copy{bottom:calc(var(--padb) + 66px);max-width:min(47.5rem,100% - var(--pad)*2)}
html.gl .hero-copy h1{font-size:clamp(2.6rem,5.2vw,5.9rem);margin-top:18px}
html.gl .intro{margin-top:18px}
html.gl .hero-copy .button{margin-top:22px}
html.gl .st-copy p:not(.eyebrow){margin-top:16px}
/* percorsi: le carte seguono i pannelli 3D (posizione e scala assegnate dallo script) */
html.gl .cards{display:block;position:absolute;inset:0;pointer-events:none}
html.gl .cards li{display:block}
html.gl .card{position:absolute;left:0;top:0;transform-origin:50% 50%;width:var(--card-w,320px);height:420px;container-type:inline-size;padding:7cqw;gap:3cqw;background:linear-gradient(165deg,#e9eef214,#e9eef205);border-color:#e9eef238;border-radius:3cqw;will-change:transform;backdrop-filter:blur(8px) saturate(1.15);transition:border-color .3s,background .3s}
html.gl .card .num{font-size:max(0.625rem,2.8cqw)}
html.gl .card h3{font-size:clamp(1.125rem,8.4cqw,2.25rem);margin-top:auto}
html.gl .card p{font-size:clamp(0.8125rem,4.6cqw,1.125rem);max-width:none;margin-bottom:2cqw}
html.gl .card .arrow{top:6cqw;right:6cqw;font-size:clamp(1rem,6cqw,1.5rem)}
html.gl .card{align-content:stretch;grid-template-rows:auto 1fr auto auto}
html.gl .card h3{align-self:end}
html.gl[data-tier=low] .card,html.gl[data-tier=low] .button,html.gl[data-tier=low] .compare{backdrop-filter:none;background-color:#12161bd9}
/* progetti: una didascalia alla volta sotto lo schermo attivo */
html.gl .projects{display:block;position:absolute;inset:0;pointer-events:none}
html.gl .project{position:absolute;left:var(--pad);right:var(--pad);bottom:calc(var(--padb) + 66px);opacity:var(--p,0);visibility:hidden}
html.gl .project[data-on]{visibility:visible}
html.gl .project figure{display:none}
html.gl .project-link{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto;gap:6px clamp(20px,4vw,64px);align-items:end;max-width:94rem}
html.gl .project-meta{display:contents}
html.gl .project-no{grid-column:1;grid-row:1}
html.gl .project h3{grid-column:1;grid-row:2;font-size:clamp(1.8rem,3.6vw,3.6rem);line-height:1.02;letter-spacing:-.04em}
html.gl .project .kind{grid-column:1;grid-row:3;font-size:0.875rem}
html.gl .project-meta p{grid-column:2;grid-row:2/4;margin:0;align-self:end;font-size:clamp(.95rem,1.25vw,1.15rem);max-width:34ch}
html.gl .project .open{grid-column:3;grid-row:2/4;align-self:end;margin:0;display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 16px;border:var(--bw) solid transparent;border-radius:999px;background:var(--fill) padding-box,var(--ring) border-box;font-size:.8125rem;font-weight:400;transition:background .25s,color .25s}
@media(hover:hover){html.gl .project-link:hover .open{background:var(--fillH) padding-box,var(--ringH) border-box;color:var(--void)}}
html.gl .all-link{position:absolute;right:var(--pad);top:calc(var(--head) + clamp(10px,4vh,48px) + 6px);margin:0}
/* HUD agli angoli */
html.gl .hud{display:flex;position:fixed;z-index:3;left:var(--pad);right:var(--pad);bottom:var(--padb);align-items:flex-end;gap:24px;pointer-events:none;height:42px}
.hud-station{display:flex;align-items:baseline;gap:14px;font:400 .6875rem Michroma,Geist,sans-serif;letter-spacing:.2em;text-transform:uppercase;min-width:190px}
.hud-station [data-hud-num]{font-size:1.375rem;letter-spacing:.02em;color:var(--ice)}
.hud-station [data-hud-name]{color:var(--muted)}
.hud-progress{position:absolute;left:50%;bottom:6px;width:clamp(110px,14vw,220px);height:1px;background:#e9eef233;transform:translateX(-50%)}
.hud-progress .bar{position:absolute;inset:0;background:var(--ice);transform:scaleX(0);transform-origin:left;will-change:transform}
.hud-hint{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);font-size:0.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transition:opacity .6s;white-space:nowrap}
.hud-hint .when-touch{display:none}
/* invito animato: mouse con la rotellina che scorre (desktop) o un dito che striscia di lato (touch). Tre giri ben visibili, poi un respiro lento e discreto;
   sparisce al primo gesto (classe hinted) e non torna. Senza movimento resta un'icona ferma. */
.hud-hint{display:flex;align-items:center;gap:12px}
.cue{display:none;position:relative;flex:none;color:var(--ice)}
.cue-mouse{display:block;width:16px;height:26px;border:2px solid currentColor;border-radius:9px}
.cue-mouse b{position:absolute;left:50%;top:4px;width:2px;height:6px;margin-left:-1px;border-radius:2px;background:currentColor}
.cue-touch{width:48px;height:26px}
.cue-touch::before{content:'';position:absolute;left:2px;right:2px;top:12px;height:2px;border-radius:2px;background:linear-gradient(90deg,#e9eef200,#e9eef255)}
.cue-touch b{position:absolute;left:32px;top:6px;width:14px;height:14px;border-radius:50%;background:currentColor;opacity:0}
@media(pointer:coarse){.cue-mouse{display:none}.cue-touch{display:block}}
@keyframes cue-wheel{0%{transform:translateY(0);opacity:0}15%{opacity:1}65%{transform:translateY(9px);opacity:1}100%{transform:translateY(9px);opacity:0}}
@keyframes cue-wheel-idle{0%,100%{transform:translateY(0);opacity:.15}50%{transform:translateY(6px);opacity:.7}}
@keyframes cue-swipe{0%{transform:translateX(0) scale(.6);opacity:0}15%{transform:translateX(0) scale(1);opacity:1}70%{transform:translateX(-28px) scale(1);opacity:1}100%{transform:translateX(-28px) scale(.6);opacity:0}}
@keyframes cue-swipe-idle{0%,100%{transform:translateX(0) scale(.8);opacity:.15}50%{transform:translateX(-18px) scale(.9);opacity:.7}}
@media(prefers-reduced-motion:no-preference){
 .cue-mouse b{animation:cue-wheel 1.7s ease-in-out 1.2s 3,cue-wheel-idle 3.6s ease-in-out 6.3s infinite}
 .cue-touch b{animation:cue-swipe 1.9s ease-in-out 1.2s 3,cue-swipe-idle 3.8s ease-in-out 6.9s infinite}
}
@media(prefers-reduced-motion:reduce){.cue-mouse b{opacity:1;top:6px}.cue-touch b{opacity:.8;left:18px}}
html.hinted .hud-hint{opacity:0}
@media(pointer:coarse){.hud-hint .when-fine{display:none}.hud-hint .when-touch{display:inline}}
.cursor-label{display:block;position:fixed;z-index:20;left:0;top:0;pointer-events:none;padding:8px 14px;border-radius:999px;background:var(--ice);color:var(--void);font-size:0.75rem;font-weight:500;opacity:0;transition:opacity .2s;white-space:nowrap}
.cursor-label.on{opacity:1}
html:not(.gl) .cursor-label{display:none}
/* telefono in verticale: nav a barra in basso, bersagli piu grandi */
@media(max-width:760px){
 :root{--head:58px;--padb:calc(var(--sab) + var(--bar) + 14px)}
 .brand img{width:96px}.brand-mark{width:82px}
 .brand{display:flex;align-items:center;min-height:44px}
 html.gl .header nav,html.gl .bugbtn{height:calc(var(--bar) + var(--sab));background:#0c0e11ee;border-top:1px solid #e9eef226;z-index:13}
 html.gl .header nav{display:flex;position:fixed;left:0;right:16.6667%;bottom:0;margin:0;padding:0 0 var(--sab);gap:0;justify-content:stretch}
 html.gl .header nav a,html.gl .bugbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:var(--bar);padding:5px 0 0;text-align:center;font-size:11px;font-weight:400;letter-spacing:.01em;line-height:1.1;color:#9ba7b2}
 html.gl .header nav a{flex:1 1 0;min-width:0}
 html.gl .header nav a.nav-room{margin:0;padding:6px 0 0;border:0;border-radius:0;background:none;box-shadow:none;font-weight:400;color:#9ba7b2}
 html.gl .header nav a.nav-room::before{display:none}
 html.gl .header nav a[aria-current]{color:var(--ice)}
 html.gl .header nav a::after{top:0;bottom:auto;left:28%;right:28%;height:2px;border-radius:0 0 2px 2px}
 .ni{display:block;flex:none;width:24px;height:24px}
 .nl .long{display:none}.nl .short{display:inline}
 html.gl .bugbtn{right:0;bottom:0;width:16.6667%;gap:3px;padding:0 0 var(--sab);border:0;border-top:1px solid #e9eef226;border-radius:0;box-shadow:none}
 html.gl .bugbtn .bugslot{position:relative;left:auto;top:auto;display:block;width:32px;height:24px;flex:none}
 html.gl .bugbtn .bugrest,html.gl .bugbtn .bugcv{left:50%;top:50%;width:180px;height:114px;margin:-57px 0 0 -90px}
 html.gl .bugbtn .nl{position:static;opacity:1;transform:none;margin:0;color:inherit;text-shadow:none}
 html.gl .bugbtn:focus-visible,html.gl .header nav a:focus-visible{outline-offset:-4px;border-radius:10px}
 .nav-contact{display:none}
 html.gl .compare{position:fixed;margin:0;top:calc(var(--head)/2 - 24px);bottom:auto;right:var(--pad);padding:3px}
 html.gl .compare>span:first-child,html.gl .compare a>span:last-child{display:none}
 html.gl .compare a{padding:0;width:44px;min-height:44px;justify-content:center}
 .hud-station{min-width:0}
 .hud-station [data-hud-num]{font-size:1.125rem}
 html.gl .hud{bottom:calc(var(--padb) - 54px)}
 html.gl .hud-progress{display:none}
 html.gl .st-copy,html.gl .hero-copy,html.gl .project{bottom:calc(var(--padb) + 16px)}
}
/* telefono: didascalia in righe distinte sotto l'anteprima (titolo, tipo con «Apri il progetto», descrizione, «Approfondisci»); il contatore resta solo nella barra dei progetti */
html[data-layout=compact].gl .project-link{grid-template-columns:1fr auto;row-gap:2px}
html[data-layout=compact].gl .project-no{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html[data-layout=compact].gl .project h3{grid-column:1/-1;grid-row:1;font-size:clamp(1.6rem,7.6vw,2.4rem)}
html[data-layout=compact].gl .project .kind{grid-column:1;grid-row:2;align-self:center}
html[data-layout=compact].gl .project-meta p{grid-column:1/-1;grid-row:3;margin-top:6px;font-size:.98rem}
html[data-layout=compact].gl .project .open{grid-column:2;grid-row:2;align-self:center}
html[data-layout=compact].gl .project-link::after{content:'';grid-column:1/-1;grid-row:4;height:44px;margin-top:10px}   /* la riga di «Approfondisci», posato qui da trackVcue */
html[data-layout=compact].gl .hero-copy h1{font-size:clamp(2.6rem,11.5vw,4.6rem)}
html[data-layout=compact].gl .st-head h2,html[data-layout=compact].gl .st-copy h2{font-size:clamp(1.9rem,8.6vw,3.2rem)}
html[data-layout=compact].gl .intro{font-size:1rem}
@media(max-height:520px){
 :root{--head:54px}
 html.gl .legal{display:none}
 html.gl #percorsi .st-head h2{display:none}
 html.gl .project-meta p{display:none}
 html.gl .contact-links{display:flex;flex-wrap:wrap;gap:6px 28px}
 html.gl .contact-links a{border:0}
 html.gl .hero-copy h1{font-size:clamp(1.8rem,5vw,3rem)}
 html.gl .st-head h2,html.gl .st-copy h2{font-size:clamp(1.5rem,4vw,2.4rem)}
 html.gl .intro,html.gl .st-copy p:not(.eyebrow){display:none}
 /* schermo basso (telefono in orizzontale): titolo della sezione su una riga, contatore del progetto solo nella barra */
 html.gl #progetti .st-head h2 br{display:none}
 html.gl .project-no{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
/* telefono in orizzontale: come in verticale, «Contattami» lascia posto (resta «Contatti» nel menu) */
@media(max-height:520px) and (max-width:1000px){.nav-contact{display:none}}
@media(pointer:coarse){.header nav a,.contact-links a,.compare a{min-height:44px}.nav-contact{min-height:46px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* ---------- stanza dentro la scena ---------- */
.room-ui,.flash{display:none}
html.gl .flash{display:block;position:absolute;inset:0;pointer-events:none;background:#dcebf6;opacity:var(--flash,0);will-change:opacity}
html.gl.is-entering .st,html.gl.is-entering .hud,html.gl.is-entering .header,html.gl.is-entering .compare{opacity:calc(1 - var(--leave,0)*1.4);pointer-events:none}
html.gl.in-room .st,html.gl.in-room .hud,html.gl.in-room .compare,html.gl.in-room .header nav,html.gl.in-room .nav-contact{display:none}
html[data-layout=compact].gl:not(.in-room) .veil{background:radial-gradient(ellipse 85% 75% at 50% 46%,transparent 52%,#05060899 100%),linear-gradient(180deg,#0c0e11cc 0,#0c0e1100 16%,#0c0e1100 58%,#0c0e11cc 78%,#0c0e11ee 100%)}
html.gl.in-room .veil{background:radial-gradient(ellipse 90% 80% at 50% 48%,transparent 55%,#05060880 100%),linear-gradient(180deg,#0c0e1199 0,#0c0e1100 14%,#0c0e1100 76%,#0c0e11b3 100%)}
html.gl.in-room .room-ui{display:block;position:fixed;z-index:6;inset:0;pointer-events:none}
html.gl .room-ui>*{pointer-events:auto}
.room-exit,.room-open{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 22px;border:var(--bw) solid transparent;border-radius:999px;background:var(--fill) padding-box,var(--ring) border-box;backdrop-filter:blur(12px);color:var(--ice);font:inherit;font-size:.9375rem;white-space:nowrap;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
@media(hover:hover){.room-exit:hover,.room-open:hover{background:var(--fillH) padding-box,var(--ringH) border-box;color:var(--void)}}
.room-exit{position:absolute;left:var(--pad);top:calc(env(safe-area-inset-top,0px) + 18px)}
.room-open{position:absolute;right:var(--pad);bottom:calc(var(--sab) + var(--padb))}
.room-note{position:absolute;left:50%;bottom:calc(var(--sab) + var(--padb) + 14px);transform:translateX(-50%);margin:0;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:#e9eef2cc;white-space:nowrap;pointer-events:none;text-shadow:0 1px 12px #000a}
.room-frame{position:fixed;inset:0;width:100%;height:100%;border:0;z-index:3;background:#000;opacity:0;pointer-events:none;transition:opacity .7s ease}
html.room-live .room-frame{opacity:1;pointer-events:auto}
html.room-live .room-note,html.room-live .room-open{display:none}
html.gl.in-room .header{display:none}
html.gl.in-room .cursor-label{display:none}
html.gl[data-layout=wide] #stanza .st-copy{max-width:min(36rem,44vw)}
html.gl[data-layout=wide] #percorsi .st-head{max-width:min(100% - var(--pad)*2,70rem)}
@media(min-width:2400px){html{font-size:21px}:root{--head:96px}.brand img{width:140px}.brand-mark{width:116px}}
@media(min-width:3200px){html{font-size:27px}:root{--head:120px}.brand img{width:170px}.brand-mark{width:140px}}

/* ---------- prestazioni: niente sfocatura dello sfondo sopra il canvas (si ridisegna a ogni fotogramma) ---------- */
html.gl .button,html.gl .card,html.gl .compare,html.gl .room-exit,html.gl .room-open,html.gl .header nav,html.gl .nav-contact{backdrop-filter:none;-webkit-backdrop-filter:none}
html.gl .compare{background:#12161bf0}
html.gl .card{background-color:#12161b99}
html.gl .room-exit,html.gl .room-open{background:#0c0e11d9}

.perf-note{display:none}
html.gl .perf-note:not([hidden]){display:flex;position:fixed;z-index:20;left:50%;top:calc(var(--head) + 12px);transform:translateX(-50%);align-items:center;gap:14px;max-width:min(94vw,44rem);padding:10px 12px 10px 20px;border:1px solid #e9eef255;border-radius:999px;background:#0c0e11f2;font-size:.875rem;line-height:1.35}
.perf-note button{font:inherit;color:inherit;cursor:pointer;border:1px solid #e9eef255;background:none;border-radius:999px;padding:8px 16px;min-height:44px;white-space:nowrap}
.perf-note [data-perf-simple]{background:var(--ice);color:var(--void);border-color:var(--ice)}
.perf-note [data-perf-close]{padding:8px 12px;min-width:44px}
@media(max-width:760px){html.gl .perf-note:not([hidden]){border-radius:20px;flex-wrap:wrap;top:calc(var(--head) + 8px)}}

/* ---------- segnalazione: pulsante con il bug e modulo ---------- */
.bugbtn{position:fixed;z-index:9;right:var(--pad);bottom:var(--padb);display:block;width:64px;height:48px;padding:0;border:0;border-radius:14px;background:none;color:var(--ice);font:inherit;font-size:.75rem;font-weight:500;cursor:pointer;-webkit-tap-highlight-color:transparent}
@media(min-width:761px){body:has(.compare) .bugbtn{bottom:calc(var(--padb) + 62px)}}
.bugbtn:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
/* insetto libero nello spazio: niente pillola. Immagine ferma e scena 3D hanno la stessa misura e lo stesso centro, piu grandi del pulsante,
   cosi l'insetto puo scappare fuori; non intercettano i clic */
.bugslot{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.bugrest,.bugcv{position:absolute;left:-150px;top:-95px;width:300px;height:190px;max-width:none;pointer-events:none}
.bugcv{display:none}
.bugbtn.bug3d .bugcv{display:block}
.bugbtn.bug3d .bugrest{display:none}
/* la scritta compare sopra l'insetto quando ci si avvicina o si arriva con la tastiera: testo semplice, senza scatola */
.bugbtn .nl{position:absolute;right:2px;bottom:100%;margin-bottom:2px;white-space:nowrap;letter-spacing:.01em;color:#c9d3db;opacity:0;transform:translateY(4px);transition:opacity .25s,transform .35s var(--ease);pointer-events:none;text-shadow:0 1px 8px #0c0e11}
@media(hover:hover){.bugbtn:hover .nl{opacity:1;transform:none}}
.bugbtn:focus-visible .nl{opacity:1;transform:none}
.bugbtn.bug-hit .nl{opacity:0;transform:translateY(4px);transition-duration:.12s}
html.in-room .bugbtn,html.is-entering .bugbtn,html.is-leaving .bugbtn{display:none}
html.report-open{overflow:hidden}
.report[hidden]{display:none}
.report{position:fixed;z-index:30;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;background:#05060acc}
.report-box{position:relative;width:min(34rem,100%);max-height:calc(100dvh - 32px);overflow:auto;padding:28px 28px 24px;border:1px solid #e9eef233;border-radius:20px;background:#12161b;color:var(--ice)}
.report-box h2{font-size:1.5rem;line-height:1.15;letter-spacing:-.02em;font-weight:500}
.report-lead{margin-top:8px;color:var(--muted);font-size:.9375rem}
.report-x{position:absolute;top:12px;right:12px;width:44px;height:44px;border:0;background:none;color:var(--ice);font-size:1.5rem;cursor:pointer;border-radius:50%}
.report-box fieldset{margin:20px 0 0;padding:0;border:0;display:grid;gap:8px}
.rp-choice{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 16px;border:1px solid #e9eef233;border-radius:12px;cursor:pointer}
.rp-choice:has(input:checked){border-color:var(--ice);background:#e9eef214}
.rp-choice input,.rp-tech input{accent-color:#e9eef2;width:18px;height:18px;flex:none}
.rp-text{display:grid;gap:6px;margin-top:16px;font-size:.875rem;color:var(--muted)}
.rp-text textarea,.rp-text input{width:100%;padding:10px 12px;border:1px solid #e9eef233;border-radius:10px;background:#0c0e11;color:var(--ice);font:inherit;font-size:1rem}
.rp-tech{display:flex;gap:12px;align-items:flex-start;margin-top:16px;font-size:.875rem;line-height:1.4}
.report details{margin-top:12px;font-size:.8125rem;color:var(--muted)}
.report summary{cursor:pointer;padding:6px 0}
.report pre{margin:6px 0 0;padding:12px;border-radius:10px;background:#0c0e11;color:#c9d3dc;font:12px/1.5 ui-monospace,monospace;white-space:pre-wrap;word-break:break-word;max-height:11rem;overflow:auto}
.report-note{margin-top:14px;font-size:.8125rem;color:var(--muted)}
.report-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.report-actions .button[disabled]{opacity:.5;cursor:not-allowed}
html.gl .report-actions .ghost{background:none;border-color:#e9eef266;box-shadow:none}

/* ---------- schede dei percorsi: solo contenuto, il corpo e il bordo li disegna il pannello 3D ---------- */
html.gl .card{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr auto auto;align-content:stretch;gap:calc(var(--card-w,320px)*.022) calc(var(--card-w,320px)*.03);padding:calc(var(--card-w,320px)*.085) calc(var(--card-w,320px)*.08) calc(var(--card-w,320px)*.08);border:0;border-radius:calc(var(--card-w,320px)*.055);background:none;backdrop-filter:none;transform-origin:50% 50%}
html.gl .card:hover,html.gl .card:focus-visible{background:none;border:0}
/* terza consegna: sui telefoni (fascia bassa) restava lo sfondo quasi opaco della regola generale e copriva il pittogramma della scheda nel pozzo */
html.gl[data-tier=low] .card{background:none}
html.gl .card:focus-visible{outline:2px solid #edf6ff;outline-offset:-4px}
html.gl .card .num{grid-column:1;grid-row:1;align-self:center;font-size:max(.75rem,3.3cqw);letter-spacing:.2em;color:#c3ccd5}
html.gl .card .arrow{position:static;grid-column:2;grid-row:1;justify-self:end;display:grid;place-items:center;width:max(30px,10.5cqw);height:max(30px,10.5cqw);border:1px solid #e9eef266;border-radius:50%;font-size:clamp(.8rem,5.2cqw,1.2rem);line-height:1;transition:background .25s,color .25s}
html.gl .card:focus-visible .arrow{background:var(--ice);color:var(--void)}
@media(hover:hover){html.gl .card:hover .arrow{background:var(--ice);color:var(--void)}}
html.gl .card h3{grid-column:1/-1;grid-row:3;align-self:end;margin:0;font-size:clamp(1.3rem,9.6cqw,2.6rem);line-height:1.1;letter-spacing:-.025em}
html.gl .card p{grid-column:1/-1;grid-row:4;margin:0;font-size:clamp(.9rem,5cqw,1.25rem);line-height:1.38;color:#c3ccd5;max-width:none}

/* ---------- voce di menu «Stanza 3D» (la stanza non e piu una tappa del percorso) ---------- */
.header nav a.nav-room{display:inline-flex;align-items:center;gap:8px;margin-left:6px;padding:8px 16px;border:var(--bw) solid transparent;border-radius:999px;background:var(--fill) padding-box,var(--ring) border-box;color:var(--ice);font-weight:500}
.header nav a.nav-room::before{content:'';width:7px;height:7px;border-radius:50%;background:#ffb468;box-shadow:0 0 8px #ffb468aa}
.header nav a.nav-room::after{display:none}
@media(hover:hover){.header nav a.nav-room:hover{background:var(--fillH) padding-box,var(--ringH) border-box;color:var(--void)}}

/* ---------- avviso del sito (banner dal pannello) ---------- */
.site-banner{position:fixed;z-index:15;left:50%;top:10px;transform:translateX(-50%);max-width:min(92vw,40rem);padding:8px 18px;border:1px solid #e9eef244;border-radius:999px;background:#12161bf2;color:var(--ice);font-size:.8125rem;line-height:1.35;text-align:center;pointer-events:none}
html.in-room .site-banner{display:none}

.rp-trap{position:absolute;left:-9999px;top:auto;width:1px;height:1px;opacity:0;pointer-events:none}
.report-status{margin-top:10px;min-height:1.3em;font-size:.875rem;color:var(--ice)}
.report-note a{text-decoration:underline;text-underline-offset:3px}

/* ---------- telefono: bersagli di tocco, testi, barra e foglio informazioni ---------- */
.brand{padding:8px 0}
.legal-open{display:none}
.legal-list{display:grid;margin-top:18px}
.legal-list>*{display:flex;align-items:center;min-height:48px;padding:0 4px;border-top:1px solid var(--line);font-size:.9375rem}
.legal-list>span{color:var(--muted)}
.num,.project-no{font-size:max(.75rem,11px)}
html.gl[data-layout=compact] .legal{display:none}
html.gl[data-layout=compact] .legal-open{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:18px;padding:0 18px;border:var(--bw) solid transparent;border-radius:999px;background:var(--fill) padding-box,var(--ring) border-box;color:var(--ice);font:inherit;font-size:.875rem;cursor:pointer;pointer-events:auto}
html.gl[data-layout=compact] .st-head h2{font-size:clamp(1.5rem,7.4vw,3rem)}
/* telefono: i collegamenti «Tutti i servizi» e «Tutti i lavori» sono semplici testi in alto a destra, sulla riga dell'etichetta: niente pulsanti che mangiano spazio */
html.gl[data-layout=compact] .all-link{top:calc(var(--head) + clamp(10px,4vh,48px) - 15px);right:calc(var(--pad) - 8px);margin:0;padding:0 8px;min-height:44px;border:0;border-radius:0;background:none;box-shadow:none;color:#dfe6ec;font-size:.8125rem;letter-spacing:.01em;gap:6px}
html.gl[data-layout=compact] #progetti .st-head{max-width:100%}
html.gl[data-layout=compact] .legal-open{display:none}
html.gl[data-layout=compact] .project .open{border:0;background:none;box-shadow:none;padding:0 0 0 6px;min-height:44px;font-size:.875rem;font-weight:500;color:var(--ice)}
html.gl[data-layout=compact] .hero-copy .button{min-height:46px;padding:0 20px;font-size:.9375rem}
html.gl[data-layout=compact] .contact-links{gap:8px;margin-top:22px}
html.gl[data-layout=compact] .contact-links a{min-height:44px;padding:0 14px 0 12px;font-size:.9375rem;gap:8px}
html.gl[data-layout=compact] .cl-l{display:none}
html.gl[data-layout=compact] .contact-more{margin-top:14px;gap:0}
html.gl[data-layout=compact] .contact-more p{font-size:.8125rem;max-width:none}
html.gl[data-layout=compact] .contact-more .button{min-height:44px;padding:0;border:0;background:none;box-shadow:none;font-size:.9375rem;gap:8px;color:var(--ice);justify-content:flex-start}
/* sul telefono la barra in basso e gia l'indicatore della tappa: via il numero e la linea, resta un invito a scorrere sopra la barra */
html[data-layout=compact].gl .hud-station,html[data-layout=compact].gl .hud-progress{display:none}
html[data-layout=compact].gl .hud{bottom:calc(var(--sab) + var(--bar) + 2px);height:22px}
html[data-layout=compact].gl .hud-hint{bottom:-5px}
@media(pointer:coarse){html.gl .all-link{display:inline-flex;align-items:center;min-height:44px}}
html.gl #progetti .st-head{max-width:min(40rem,100% - 170px)}
html.gl[data-layout=compact] #progetti .st-head{max-width:100%}

/* tablet in verticale: nessuna barra in basso, quindi il pulsante di segnalazione diventa un tondo e le righe in basso gli lasciano posto */
@media(min-width:761px){
 html[data-layout=compact].gl .bugbtn{width:64px;height:48px;padding:0;right:var(--pad);bottom:calc(var(--sab) + 16px)}
 html[data-layout=compact].gl .bugbtn .nl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 html[data-layout=compact].gl .project{right:calc(var(--pad) + 92px)}
 html[data-layout=compact].gl #percorsi .all-link{right:calc(var(--pad) + 92px)}
 html[data-layout=compact].gl[data-layout] .legal-open{margin-right:90px}
}

/* ---------- progetti in orizzontale: lo schermo e una finestra verticale al centro; a sinistra numero, titolo e tipo, a destra descrizione e pulsante ---------- */
html.gl[data-layout=wide] .project{top:50%;bottom:auto;transform:translateY(-44%)}
html.gl[data-layout=wide] .project-link{grid-template-columns:minmax(0,24vw) minmax(0,1fr) minmax(0,21vw);max-width:none;align-items:start;column-gap:0}
html.gl[data-layout=wide] .project-no{grid-column:1;grid-row:1}
html.gl[data-layout=wide] .project h3{grid-column:1;grid-row:2;font-size:clamp(2rem,3.2vw,3.6rem)}
html.gl[data-layout=wide] .project .kind{grid-column:1;grid-row:3}
html.gl[data-layout=wide] .project-meta p{grid-column:3;grid-row:2;align-self:start;max-width:none;margin:0;font-size:clamp(.95rem,1.15vw,1.15rem)}
html.gl[data-layout=wide] .project .open{grid-column:3;grid-row:3;align-self:start;justify-self:start;margin-top:14px}
/* schermo basso e largo (telefono in orizzontale): tutta la didascalia nella colonna di sinistra, la destra resta libera */
@media(max-height:520px){
 html.gl[data-layout=wide] .project-link{grid-template-columns:minmax(0,32vw);row-gap:2px}
 html.gl[data-layout=wide] .project h3{grid-row:1;font-size:clamp(1.4rem,3.4vw,2.1rem)}
 html.gl[data-layout=wide] .project .kind{grid-row:2}
 html.gl[data-layout=wide] .project .open{grid-column:1;grid-row:3;margin-top:10px}
}
html[data-station=contatti] .hud-hint{opacity:0}

/* ---------- dettagli del progetto: secondo livello della scheda (testo sopra il pannello di vetro 3D) ---------- */
.pdetail{margin-top:22px;padding:20px;border:1px solid var(--line);border-radius:14px;background:#12161b99}
.pdetail dl{display:grid;gap:14px;margin:12px 0 0}
.pdetail dt{font:500 12.5px/1.4 Geist,Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#c9d3dc}
.pdetail dd{margin:4px 0 0;color:#d4dbe1;font-size:.9375rem;line-height:1.45}
.pd-no{font:500 12px/1.4 Geist,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#a3adb7}
.pd-quote{margin:16px 0 0;padding-left:14px;border-left:2px solid #e9eef266}
.pd-quote p{font-style:italic;color:var(--ice);line-height:1.4}
.pd-quote footer{margin-top:6px;font-size:.75rem;color:var(--muted)}
.pd-open{display:inline-flex;align-items:center;gap:8px;margin-top:16px;color:var(--ice);font-size:.875rem;font-weight:500}
html.gl .pdetail{position:absolute;left:0;top:0;transform-origin:50% 50%;margin:0;border:0;border-radius:0;background:none;container-type:inline-size;padding:8cqw 8.4cqw;display:flex;flex-direction:column;justify-content:center;gap:3.4cqw;opacity:var(--p,0);visibility:hidden;pointer-events:none;will-change:transform}
html.gl .pdetail[data-on]{visibility:visible}
html.gl .pdetail dl{gap:3.2cqw;margin:0}
html.gl .pdetail dt{font-size:max(9.5px,2.3cqw)}
html.gl .pdetail dd{margin-top:.6cqw;font-size:max(12px,3cqw);line-height:1.38}
html.gl .pd-no{font-size:max(9.5px,2.3cqw)}
html.gl .pd-quote{margin:0;padding-left:3cqw}
html.gl .pd-quote p{font-size:max(12px,2.9cqw)}
html.gl .pd-quote footer{font-size:max(10px,2.2cqw);margin-top:1cqw}
html.gl .pd-open{margin-top:.6cqw;min-height:44px;pointer-events:auto;font-size:max(12.5px,3cqw)}
@media(max-height:520px){html.gl .pdetail dd{font-size:max(11px,2.4cqw)}}
/* al secondo livello di un progetto (i dettagli) il titolo della sezione e il link lasciano spazio */
html.gl #progetti .st-head,html.gl #progetti .all-link{transition:opacity .35s}
html.gl.at-detail #progetti .st-head,html.gl.at-detail #progetti .all-link{opacity:0;pointer-events:none}

/* ---------- espansione verticale di un progetto: invito a scendere e testo dei dettagli (solo testo, niente altri oggetti 3D) ---------- */
.vcue{display:none}
html.gl .vcue{position:fixed;left:0;top:0;z-index:8;display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:0 12px 0 16px;border:1px solid transparent;border-radius:var(--r);background:var(--fill) padding-box,var(--ring) border-box;box-shadow:0 10px 24px -10px #000d;color:var(--ice);font:400 10px/1 Michroma,Geist,sans-serif;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;cursor:pointer;visibility:hidden;pointer-events:none;will-change:transform,opacity;transition:background .2s,color .2s}
.vcue-k{display:grid;place-items:center;width:18px;height:18px;border-left:1px solid #e9eef22e;padding-left:10px;box-sizing:content-box}
@keyframes vcue-nudge{0%,55%,100%{transform:translateY(0)}70%{transform:translateY(3px)}85%{transform:translateY(0)}}
@media(prefers-reduced-motion:no-preference){.vcue-k svg{animation:vcue-nudge 2.4s cubic-bezier(.4,0,.2,1) infinite}}
@media(hover:hover){html.gl .vcue:hover{background:var(--fillH) padding-box,var(--ringH) border-box;color:var(--void)}html.gl .vcue:hover .vcue-k{border-left-color:#0c0e1126}}
html.gl .vcue[data-on]{visibility:visible;pointer-events:auto}
html.gl .vcue:focus-visible{outline:2px solid #edf6ff;outline-offset:3px}
/* il secondo livello: un blocco di testo al centro dello schermo, su un velo scuro che segue lo sfondo */
html.gl .pdetail{position:absolute;left:50%;top:47%;right:auto;transform:translate(-50%,-50%);width:min(66rem,calc(100% - var(--pad)*2));height:auto;padding:36px 40px;border-radius:24px;background:radial-gradient(ellipse at 50% 50%,#0c0e11d9 0,#0c0e11b8 62%,#0c0e1100 100%);container-type:normal;display:block;gap:0;will-change:auto}
html.gl .pdetail dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin:22px 0 0}
html.gl .pdetail dt{font-size:12.5px}
html.gl .pdetail dd{margin-top:8px;font-size:clamp(.95rem,1.15vw,1.1rem);line-height:1.5}
html.gl .pd-no{font-size:12px;margin-top:6px}
html.gl .pd-quote{margin:30px 0 0;padding-left:18px;max-width:46rem}
html.gl .pd-quote p{font-size:clamp(1rem,1.3vw,1.25rem)}
html.gl .pd-quote footer{font-size:.8125rem;margin-top:8px}
html.gl .pd-open{margin-top:26px;min-height:44px;font-size:.9375rem}
.pd-close{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;border:0;background:none;color:var(--muted);font:500 .8125rem Geist,Arial,sans-serif;cursor:pointer}
html.gl .pdetail .pd-close{pointer-events:auto;margin:-10px 0 4px -2px}
@media(hover:hover){.pd-close:hover{color:var(--ice)}}
html.gl[data-layout=compact] .pdetail{top:calc(var(--head) + 8px);transform:translate(-50%,0);padding:18px 20px;background:radial-gradient(ellipse at 50% 40%,#0c0e11e6 0,#0c0e11cc 70%,#0c0e1100 100%);max-height:calc(100dvh - var(--head) - var(--bar) - var(--sab) - 24px);overflow:hidden}
html.gl[data-layout=compact] .pdetail dl{grid-template-columns:1fr;gap:16px;margin-top:12px}
html.gl[data-layout=compact] .pdetail dd{font-size:.9375rem;line-height:1.42;margin-top:4px}
html.gl[data-layout=compact] .pdetail.pd-tight .pd-quote{display:none}
html.gl[data-layout=compact] .pdetail.pd-tight dl{gap:10px;margin-top:8px}
html.gl[data-layout=compact] .pdetail.pd-tight dd{font-size:.875rem;line-height:1.38}
html.gl[data-layout=compact] .pdetail.pd-clamp dd{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--clamp,4);line-clamp:var(--clamp,4);overflow:hidden}
html.gl[data-layout=compact] .pd-quote{margin-top:16px;padding-left:12px}
html.gl[data-layout=compact] .pd-quote p{font-size:.9375rem}
html.gl[data-layout=compact] .pd-open{margin-top:14px}

/* ---------- prima schermata: la barra dei collegamenti sta qui, al posto del numero della tappa ---------- */
html[data-station=studio] .hud-station{display:none}
html.gl[data-layout=wide] .hero-legal{display:block;position:fixed;left:var(--pad);bottom:var(--padb);z-index:3;pointer-events:auto}
html.gl[data-layout=wide] .hero-legal .legal{margin:0;gap:6px 26px;font-size:.8125rem}
html.gl[data-layout=wide] .hero-legal .legal-open{display:none}
.hero-legal{display:contents}
html.gl[data-layout=compact] .hero-legal{display:block}
.contact-more{margin-top:26px;display:grid;gap:12px;justify-items:start}
.contact-more p{max-width:30rem;color:var(--muted);font-size:.9375rem}
html.gl[data-layout=compact] .contact-more{margin-top:20px}
@media(max-height:700px){html.gl .contact-more{margin-top:12px}html.gl .contact-more p{display:none}}
html.gl .st-copy .contact-more p{margin:0;max-width:24rem;font-size:.9375rem;line-height:1.4}
html.gl[data-layout=wide] .contact-more{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:22px}

a,img{-webkit-user-drag:none;user-drag:none}

/* sul telefono sotto lo schermo c'e subito il testo: il segno sta dentro il bordo basso, su un velo scuro */


/* ---------- Beta: indicazione discreta che il sito e in evoluzione ---------- */
.beta{display:inline-flex;align-items:center;height:44px;margin-left:8px;padding:0 6px;border:0;background:none;cursor:pointer;position:relative;z-index:12;align-self:center}
.beta-p{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 11px 0 9px;border:1px solid #e9eef23d;border-radius:999px;background:#12161bb3;color:#c9d3dc;font:600 10.5px/1 Geist,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.beta-dot{width:6px;height:6px;border-radius:50%;background:#ffb468;box-shadow:0 0 8px #ffb468aa}
@media(hover:hover){.beta:hover .beta-p{border-color:#e9eef299;color:var(--ice)}}
.beta:focus-visible{outline:2px solid #edf6ff;outline-offset:0;border-radius:999px}
.header{justify-content:flex-start}
.header nav{margin-left:auto}
.beta-note{position:fixed;z-index:25;left:var(--pad);top:calc(var(--head) - 6px);width:min(22.5rem,calc(100vw - var(--pad)*2));padding:18px 20px 16px;border:1px solid #e9eef238;border-radius:16px;background:#12161bf5;box-shadow:0 20px 50px #000a;color:var(--ice)}
.beta-note[hidden]{display:none}
.bn-t{font:600 .9375rem/1.3 Geist,Arial,sans-serif;letter-spacing:-.005em}
.bn-p{margin-top:8px;color:#b9c3cc;font-size:.875rem;line-height:1.5}
.bn-a{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.bn-b,.bn-c{min-height:40px;padding:0 16px;border-radius:999px;font:500 .8125rem Geist,Arial,sans-serif;cursor:pointer}
.bn-b{border:0;background:var(--ice);color:var(--void)}
.bn-c{border:1px solid #e9eef244;background:none;color:var(--ice)}
@media(max-width:760px){.beta{margin-left:4px}.beta-p{font-size:10px;height:24px}.beta-note{top:calc(var(--head) - 4px)}}
html.gl.in-room .beta,html.gl.is-entering .beta{display:none}

/* ---------- funzioni del telefono (foglio informazioni) ---------- */
.sens{display:none;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
html.touch .sens{display:block}
.sens h3{font-size:1rem;font-weight:600}
.sens>p{margin-top:6px;color:var(--muted);font-size:.875rem;line-height:1.45}
.sw{display:flex;gap:14px;align-items:flex-start;min-height:48px;margin-top:14px;cursor:pointer}
.sw input{appearance:none;flex:none;width:46px;height:28px;margin:2px 0 0;border-radius:999px;border:1px solid #e9eef255;background:#0c0e11;position:relative;cursor:pointer;transition:background .2s,border-color .2s}
.sw input::after{content:'';position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#aab6c0;transition:transform .2s,background .2s}
.sw input:checked{background:#2a6f4f;border-color:#58d39a}
.sw input:checked::after{transform:translateX(18px);background:#fff}
.sw input:focus-visible{outline:2px solid #edf6ff;outline-offset:3px}
.sw span{font-size:.875rem;line-height:1.4;color:#c9d3dc}
.sw b{display:block;margin-bottom:2px;color:var(--ice);font-size:.9375rem;font-weight:600}
.sens-note{margin-top:12px;min-height:1.3em;font-size:.8125rem;color:#ffd6a8}

/* ---------- elementi della sezione: indicatore a puntini ---------- */
.pager{position:fixed;z-index:9;left:50%;bottom:calc(var(--padb) - 18px);transform:translateX(-50%);display:flex;align-items:center;gap:2px;visibility:hidden;opacity:0;transition:opacity .3s}
.pager[data-on]{visibility:visible;opacity:1}
.pg-b{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;background:none;color:#c9d3dc;cursor:pointer;border-radius:50%}
.pg-b::before{content:'';width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(135deg) translate(-1px,-1px)}
.pg-n::before{transform:rotate(-45deg) translate(-1px,-1px)}
@media(hover:hover){.pg-b:hover{color:#fff;background:#ffffff14}}
.pg-d{display:grid;place-items:center;width:22px;height:34px;padding:0;border:0;background:none;cursor:pointer}
.pg-d::before{content:'';width:6px;height:6px;border-radius:999px;background:#e9eef255;transition:width .25s,background .25s}
.pg-d[aria-current]::before{width:20px;background:#f4f8fb;box-shadow:0 0 10px #cfe4f899}
.pg-b:focus-visible,.pg-d:focus-visible{outline:2px solid #edf6ff;outline-offset:-3px}
@media(pointer:coarse){.pg-b{display:none}.pg-d{width:28px;height:44px}}
@media(max-width:760px){.pager{bottom:calc(var(--sab) + var(--bar) + 0px)}}

/* il collegamento del progetto occupa una riga intera: solo il titolo e il pulsante reagiscono, cosi lo schermo 3D al centro si puo trascinare */
html.gl .st .project-link{pointer-events:none}
html.gl .st .project-link .open,html.gl .st .project-link h3{pointer-events:auto}

/* pulsante delle informazioni (telefono): un tondo discreto in alto a destra al posto del pulsante nella prima schermata */
.info-btn{display:none;margin-left:auto;width:44px;height:44px;padding:0;border:0;background:none;color:#c9d3dc;cursor:pointer;place-items:center;z-index:12}
html[data-layout=compact] .info-btn{display:grid}
.info-btn:focus-visible{outline:2px solid #edf6ff;outline-offset:-4px;border-radius:50%}
html.in-room .info-btn,html.is-entering .info-btn{display:none!important}

/* ---------- suggerimenti contestuali (una breve indicazione animata per gesto) ---------- */
.tip{position:fixed;z-index:11;left:50%;width:max-content;top:calc(var(--head) + 14px);transform:translate(-50%,-8px);display:flex;align-items:center;gap:10px;max-width:calc(100vw - 32px);min-height:40px;padding:0 6px 0 14px;border:1px solid #e9eef238;border-radius:999px;background:#12161bf0;box-shadow:0 12px 30px #0009;color:var(--ice);opacity:0;transition:opacity .3s,transform .3s;pointer-events:none}
.tip[hidden]{display:none}
.tip[data-on]{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.tip-t{font:500 .8125rem/1.25 Geist,Arial,sans-serif;padding-right:10px}
.tip-b{min-height:40px;margin-left:-4px;padding:0 14px;border:0;border-radius:999px;background:var(--ice);color:var(--void);font:600 .75rem Geist,Arial,sans-serif;cursor:pointer}
.tip-b[hidden]{display:none}
.tip:has(.tip-b[hidden]){padding-right:6px}
.tip-i{position:relative;flex:none;width:24px;height:24px;color:#dfe9f1}
.tip-i::before,.tip-i::after{content:'';position:absolute}
.tip-i[data-k=swipe]::before{left:1px;right:1px;top:11px;height:2px;border-radius:2px;background:linear-gradient(90deg,#e9eef200,#e9eef277)}
.tip-i[data-k=swipe]::after{left:14px;top:6px;width:12px;height:12px;border-radius:50%;background:currentColor;opacity:0}
.tip-i[data-k=tilt]::before{left:6px;right:6px;top:1px;bottom:1px;border:2px solid currentColor;border-radius:5px}
.tip-i[data-k=tilt]::after{left:10px;right:10px;bottom:4px;height:2px;border-radius:2px;background:currentColor}
.tip-i[data-k=blow]::before{left:8px;right:8px;top:1px;height:13px;border:2px solid currentColor;border-radius:7px}
.tip-i[data-k=blow]::after{left:3px;right:3px;top:6px;bottom:2px;border:2px solid currentColor;border-top-color:transparent;border-radius:0 0 12px 12px;opacity:.7}
@keyframes tip-swipe{0%{transform:translateX(0) scale(.6);opacity:0}15%{transform:translateX(0) scale(1);opacity:1}70%{transform:translateX(-18px) scale(1);opacity:1}100%{transform:translateX(-18px) scale(.6);opacity:0}}
@keyframes tip-tilt{0%,100%{transform:rotate(-24deg)}50%{transform:rotate(24deg)}}
@keyframes tip-blow{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@media(prefers-reduced-motion:no-preference){
 .tip-i[data-k=swipe]::after{animation:tip-swipe 1.7s ease-in-out infinite}
 .tip-i[data-k=tilt]{animation:tip-tilt 2.2s ease-in-out infinite}
 .tip-i[data-k=blow]{animation:tip-blow 1s ease-in-out infinite}
}
@media(prefers-reduced-motion:reduce){.tip-i[data-k=swipe]::after{opacity:.8;left:8px}}
/* telefono: il suggerimento sta sopra l'indicatore, dove c'e spazio libero */
html[data-layout=compact] .tip[data-pos=bottom]{top:auto;bottom:calc(var(--sab) + var(--bar) + 46px);transform:translate(-50%,8px)}
html[data-layout=compact] .tip[data-pos=bottom][data-on]{transform:translate(-50%,0)}
.tip[data-pos=mid]{top:46%}
.tip[data-pos=card]{top:var(--tip-y,calc(var(--head) + 14px))}
@media(max-height:520px){html[data-layout=wide] .tip[data-pos=card]{left:auto;right:var(--pad);top:42%;width:auto;max-width:min(19rem,34vw);transform:translate(0,-8px)}html[data-layout=wide] .tip[data-pos=card][data-on]{transform:none}}   /* telefono in orizzontale: nella colonna destra, libera */
html.in-room .tip,html.is-entering .tip,html.report-open .tip{display:none}

/* schermi bassi (iPhone con la barra di Safari visibile, telefoni piccoli): la descrizione breve sparisce, c'e gia nei dettagli, e lo schermo del progetto guadagna spazio */
@media(max-height:760px){html.gl[data-layout=compact] .project-meta p{display:none}}

/* con l'indicatore a puntini la linea di avanzamento in basso e inutile e si sovrappone */
html.has-pager .hud-progress{display:none}

/* zone di input: sulle schede e sui progetti si sfoglia (indicatore degli elementi), sullo sfondo si cambia sezione (numero di sezione, barra in basso sul telefono) */
.pager{transition:opacity .3s,transform .3s}
.hud-station [data-hud-num],.hud-station [data-hud-name]{transition:color .3s,text-shadow .3s}
html[data-zone=bg] .hud-station [data-hud-num]{text-shadow:0 0 16px #cfe4f8b3}
html[data-zone=bg] .hud-station [data-hud-name]{color:var(--ice)}
html[data-zone=obj] .pager[data-on]{transform:translateX(-50%) scale(1.12)}
html[data-zone=obj] .pg-d::before{background:#e9eef2b3}
html[data-zone=obj] .pg-b{color:#fff}
@media(max-width:760px){
 html.gl .header nav a{transition:color .3s,background .3s}
 html.gl[data-zone=bg] .header nav a[aria-current]{color:#fff;background:#ffffff14}
}


/* con l'indicatore degli elementi acceso il suggerimento «scorri» e la sua linea non servono: si sovrapporrebbero */
html.has-pager .hud-hint{display:none}
/* pulsanti secondari: solo il bordo chiaro (un colore in un livello di sfondo che non è l'ultimo rendeva nulla la regola e il bordo spariva) */
/* finestra «Richiedi un preventivo» (scena Percorsi): il modulo del sito con i colori e i pulsanti della Galleria */
.brief-sheet{align-items:flex-start;overflow:auto;overscroll-behavior:contain;touch-action:pan-y pinch-zoom;-webkit-user-select:text;user-select:text;padding:max(16px,env(safe-area-inset-top)) 16px 16px}
.brief-sheet .report-box{width:min(52rem,100%);max-height:none;overflow:visible;margin:auto 0;padding:clamp(22px,4vw,40px)}
.brief-sheet .report-box>h2{margin:0 48px 10px 0}
.brief-sheet{--b-ink:var(--ice);--b-bg:var(--void);--b-muted:var(--muted);--b-line:var(--line);--b-edge:#e9eef233;--b-field:#0c0e11;--b-chip:transparent;--b-r-field:10px;--b-r-chip:12px;--b-accent:var(--ice)}
.brief-sheet .brief-doc{border-top:0;padding-top:8px}
.brief-sheet .btn{border:var(--bw) solid transparent;border-radius:999px;background:var(--fill) padding-box,var(--ring) border-box;color:var(--ice);box-shadow:0 8px 22px #0000004d}
.brief-sheet .btn-ghost{background:none;border-color:#e9eef266;box-shadow:none}
@media(hover:hover){.brief-sheet .btn:hover{background:var(--fillH) padding-box,var(--ringH) border-box;color:var(--void)}}
.brief-sheet .brief-chip:has(input:checked){background:#e9eef214;color:var(--ice);border-color:var(--ice)}
@media(max-width:560px){.brief-sheet{padding:0}.brief-sheet .report-box{border-radius:0;border:0;min-height:100dvh}}
/* Le finestre (preventivo, informazioni, segnalazione) entrano con una salita breve. Niente di tutto questo con meno movimento. */
@media(prefers-reduced-motion:no-preference){
 .report:not([hidden]){animation:rp-fade .28s ease both}
 .report:not([hidden]) .report-box{animation:rp-rise .42s cubic-bezier(.2,.9,.25,1) both}
}
@keyframes rp-fade{from{background:#05060a00}}
@keyframes rp-rise{from{opacity:0;transform:translateY(16px) scale(.985)}}
/* Contatti: «Richiedi un preventivo» apre lo stesso modulo dei Percorsi; la guida resta come seconda strada, più discreta */
.contact-guide{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--muted);font-size:.875rem;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#e9eef24d}
@media(hover:hover){.contact-guide:hover{color:var(--ice)}}
html.gl[data-layout=compact] .contact-more .button[data-brief-open]{padding:0 18px;border:var(--bw) solid transparent;border-radius:999px;background:var(--fill) padding-box,var(--ring) border-box;justify-content:center;margin:6px 0 2px}
/* velo dei cambi di sezione lunghi (vedi hop() in galleria.js): copre scena e testi, non l'intestazione né l'indicatore */
.gl-veil{position:fixed;inset:0;z-index:10;background:var(--void);opacity:0;pointer-events:none;transition:opacity .36s ease}
.gl-veil.on{opacity:1;transition-duration:.17s}

/* ---------- pulsanti (18 ottobre sera): niente simboli 3D, il 3D resta solo nel marchio ----------
   Una cornice d'acciaio sottile a spigolo quasi vivo, come le altre schede della pagina, la scritta in Michroma maiuscolo
   e, nei pulsanti principali, una freccia piatta dello stesso tratto delle icone del menu. Al passaggio la cornice si accende, senza movimenti. */
.kb{position:relative;display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 20px;border:1px solid transparent;border-radius:var(--r);background:var(--fill) padding-box,var(--ring) border-box;transition:background .25s,color .25s}
[data-kb]{color:var(--ice);cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;font-size:.9375rem;font-weight:500;letter-spacing:.005em;line-height:1.15}
[data-kb] .lab{color:#dfe6ec;font:400 .6875rem/1.2 Michroma,Geist,sans-serif;letter-spacing:.12em;text-transform:uppercase;transition:color .25s}
[data-kb~=p] .lab{color:var(--ice)}
.ka{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:square;stroke-linejoin:miter}
@media(hover:hover){.kb:hover{background:var(--fillH) padding-box,var(--ringH) border-box;color:var(--void)}.kb:hover .lab{color:var(--void)}}
[data-kb]:focus-visible{outline:2px solid #edf6ff;outline-offset:3px}
[data-kb~=sm]{font-size:.84375rem;gap:10px}
/* collegamento semplice: solo testo sottolineato */
.kb-g{position:relative;display:inline-flex;align-items:center;min-height:48px;padding:0 4px;color:#c9d3db;font-size:.9375rem;font-weight:500}
.kb-g::after{content:'';position:absolute;left:4px;right:4px;bottom:12px;height:1px;background:currentColor;opacity:.35;transition:opacity .3s}
@media(hover:hover){.kb-g:hover{color:var(--ice)}.kb-g:hover::after{opacity:.9}}
/* dove stanno nella pagina */
.hero-copy .kb{margin-top:26px}
html.gl .hero-copy .kb{margin-top:18px}
.contact-links{align-items:center;gap:10px 26px}
.contact-links a.kb,html.gl .contact-links a.kb,html.gl[data-layout] .contact-links a.kb{min-height:48px;padding:0 20px;border:1px solid transparent;border-radius:var(--r);background:var(--fill) padding-box,var(--ring) border-box;box-shadow:none;font-size:.9375rem}
.contact-links a.kb-g,html.gl .contact-links a.kb-g,html.gl[data-layout] .contact-links a.kb-g{min-height:48px;padding:0 4px;border:0;border-radius:0;background:none;box-shadow:none;font-size:.9375rem}
@media(hover:hover){.contact-links a.kb:hover{background:var(--fillH) padding-box,var(--ringH) border-box;color:var(--void)}.contact-links a.kb-g:hover{background:none;color:var(--ice)}}
/* nella barra in alto: Contattami resta un pulsante piccolo; la Stanza 3D e una voce del menu con la sua icona piatta */
.nav-contact[data-kb]{min-height:40px;padding:0 16px;gap:10px;font-size:.84375rem;border:1px solid transparent;border-radius:var(--r);background:var(--fill) padding-box,var(--ring) border-box;color:var(--ice);transition:background .25s,color .25s}
@media(hover:hover){.nav-contact[data-kb]:hover{background:var(--fillH) padding-box,var(--ringH) border-box;color:var(--void)}.nav-contact[data-kb]:hover .lab{color:var(--void)}}
.header nav a.nav-room[data-kb]{gap:8px;margin-left:6px;padding:0 4px 0 0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--ice);font-weight:500}
.header nav a.nav-room[data-kb]::before{display:none}
@media(hover:hover){.header nav a.nav-room[data-kb]:hover{background:none;color:var(--ice)}}
html.gl[data-layout=compact] .contact-more .kb{margin-top:8px}
.header [data-kb],.header [data-kb] .lab,.header [data-kb] .nl{white-space:nowrap}
/* la nuvoletta del bug: la stessa pillola della Beta, con la punta verso l'insetto; nasce da lui e ci rientra */
.bugsay{position:fixed;z-index:14;left:0;top:0;display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 12px 0 10px;border:1px solid #e9eef23d;border-radius:999px;background:#12161bf0;color:#dfe6ec;font:500 12px/1 Geist,Arial,sans-serif;letter-spacing:.02em;white-space:nowrap;pointer-events:none;
 transform-origin:calc(100% - 16px) calc(100% + 7px);transform:translate(calc(-100% + 16px),calc(-100% - 7px)) scale(.15);opacity:0;
 transition:transform .42s cubic-bezier(.2,.9,.25,1),opacity .24s ease;box-shadow:0 10px 28px #0009}
.bugsay::after{content:'';position:absolute;right:11px;bottom:-5px;width:9px;height:9px;background:#12161bf0;border-right:1px solid #e9eef23d;border-bottom:1px solid #e9eef23d;transform:rotate(45deg)}
.bugsay.on{transform:translate(calc(-100% + 16px),calc(-100% - 7px)) scale(1);opacity:1}
.bugsay:not(.on){transition-duration:.3s,.2s;transition-timing-function:cubic-bezier(.5,0,.75,0),ease}
@media(min-width:761px){.bugbtn.bug3d .nl{display:none}}
html.in-room .bugsay,html.is-entering .bugsay,html.is-leaving .bugsay{display:none}
@media(max-width:760px){.bugsay{display:none}}
/* parola chiave di ogni blocco: chi scorre la pagina legge il titolo e questa. Colore d'accento del vetro e un segno da evidenziatore, niente grassetto urlato */
.intro em,.st-copy p em,.card p em,.project-meta p em,.pdetail dd em,.contact-more p em{font-style:normal;color:#f4f8fb;background:linear-gradient(transparent 64%,#a5d4f42e 64%,#a5d4f42e 92%,transparent 92%);padding:0 .08em;border-radius:2px}
.pdetail dt{color:#a5d4f4}
.pdetail dd{color:#dfe6ec}

/* ---------- linguaggio d'acciaio (17 ottobre sera): tutto cio che si tocca parla come il marchio 3D ----------
   Spigoli quasi vivi (4 px) al posto delle pillole, filo metallico di 1 px a ogni risoluzione, scritte dei pulsanti nel carattere squadrato
   del numero di sezione (Michroma, maiuscolo, spaziato). Le bolle e le pillole tonde stonavano con le lettere a spigolo del logo. */
:root{--r:4px;--bw:1px}
.button,.all-link,html.gl .project .open,.contact-links a,.room-exit,.room-open,html.gl[data-layout=compact] .legal-open,.brief-sheet .btn,.perf-note button,.bn-b,.bn-c,.tip-b,html.gl[data-layout=compact] .contact-more .button[data-brief-open],.header nav a.nav-room,.nav-contact,.pd-open{border-radius:var(--r)}
.tip,.beta-p,.cursor-label,.bugsay,.site-banner,.compare,.compare a,html.gl .perf-note:not([hidden]),.beta:focus-visible{border-radius:var(--r)}
.report-box,.beta-note{border-radius:6px}
.rp-choice,.rp-text textarea,.rp-text input,.report pre{border-radius:3px}
.pdetail,html.gl .pdetail{border-radius:6px}
html.gl .card{border-radius:2.4cqw}
html.gl .card .arrow{border-radius:3px}
.report-x{border-radius:var(--r)}
/* scritte dei pulsanti: maiuscolo squadrato, come «03 PROGETTI» */
.button,.all-link,html.gl .project .open,.room-exit,.room-open,.brief-sheet .btn,.bn-b,.bn-c,.tip-b,.pd-open,html.gl[data-layout=compact] .legal-open{font:400 .6875rem/1.2 Michroma,Geist,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.button{min-height:46px;padding:0 20px;gap:18px}
.tip-t,.cursor-label{letter-spacing:.01em}
.cursor-label{font-weight:500}
/* parola chiave di ogni blocco: solo un tono piu chiaro e piu deciso, senza il segno da evidenziatore (sembrava una selezione o un collegamento) */
.intro em,.st-copy p em,.card p em,.project-meta p em,.pdetail dd em,.contact-more p em,.nm-lead em{font-style:normal;font-weight:500;color:#d4ebfb;background:none;padding:0;border-radius:0}
/* nuvoletta del bug: senza pallino, piu staccata dall'insetto e piu svelta */
.bugsay{gap:0;padding:0 12px;transition:transform .26s cubic-bezier(.2,.9,.25,1),opacity .16s ease}
.bugsay:not(.on){transition-duration:.2s,.14s}

/* ---------- «Perché CP∗R»: la storia del nome, dal logo grande della Home ---------- */
.name-open{position:fixed;z-index:12;left:var(--pad);top:-200px;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid #e9eef266;border-radius:var(--r);background:#12161b;color:var(--ice);font:500 .8125rem Geist,Arial,sans-serif;pointer-events:auto}
.name-open:focus-visible{top:calc(var(--head) + 10px)}
html:not(.gl) .name-open{position:absolute}
.name-sheet .report-box{width:min(40rem,100%);padding:30px 32px 26px}
.name-sheet h2{margin:8px 48px 0 0;font-size:clamp(1.7rem,3.4vw,2.4rem);line-height:1.05;letter-spacing:-.03em;font-weight:500}
.name-sheet h2{display:flex;align-items:center;flex-wrap:wrap;gap:6px 16px}
.nm-mark{display:block;height:.74em;width:auto;color:var(--ice);overflow:visible}
.nm-mark .kt{opacity:1}
.nm-k{font:400 .625rem/1.3 Michroma,Geist,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#a5b4c0}
.nm-lead{margin-top:14px;color:#c9d3db;font-size:1rem;line-height:1.5}
.nm-list{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#e9eef21f;border:1px solid #e9eef21f;border-radius:3px;overflow:hidden;counter-reset:nm}
.nm-list li{display:grid;align-content:start;gap:6px;padding:14px 16px 15px;background:#12161b;counter-increment:nm}
.nm-list b{display:flex;gap:10px;align-items:baseline;font-weight:500;font-size:.9375rem;color:var(--ice)}
.nm-list b::before{content:'0' counter(nm);font:400 .5625rem Michroma,Geist,sans-serif;letter-spacing:.14em;color:#7f8b95}
.nm-list span{color:#a9b4be;font-size:.84375rem;line-height:1.45}
.nm-list i,.nm-kamui i{font-style:italic;color:#dfe6ec}
.nm-list code{font:500 .9em ui-monospace,monospace;color:#d4ebfb}
.nm-kamui{margin-top:22px;padding-top:18px;border-top:1px solid #e9eef21f}
.nm-kamui p:not(.nm-k){margin-top:10px;color:#a9b4be;font-size:.875rem;line-height:1.55}
.name-sheet .report-actions{margin-top:22px}
@media(max-width:560px){.nm-list{grid-template-columns:1fr}.name-sheet .report-box{padding:24px 20px 20px}}
.name-sheet .report-box{touch-action:pan-y;overscroll-behavior:contain;-webkit-user-select:text;user-select:text}
@media(min-width:761px){.header nav a.nav-room[data-kb] .nl{font:400 .6875rem/1.2 Michroma,Geist,sans-serif;letter-spacing:.12em;text-transform:uppercase}}
html.report-open .cursor-label{opacity:0!important}
.name-sheet:focus{outline:none}
html.gl .pd-open{display:inline-flex;align-items:center;gap:10px;font-size:.6875rem;padding:0 18px;border:1px solid transparent;background:var(--fill) padding-box,var(--ring) border-box}
@media(hover:hover){html.gl .pd-open:hover{background:var(--fillH) padding-box,var(--ringH) border-box;color:var(--void)}}
html.gl .project .open{white-space:nowrap}
html.gl[data-layout=compact] .project .open{font-size:.625rem;letter-spacing:.1em;padding:0 0 0 6px}

/* Prima schermata: un'azione principale e un collegamento secondario. */
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:4px 24px;margin-top:18px}
.hero-actions .kb,html.gl .hero-actions .kb{margin-top:0}
@media(max-width:760px){.hero-actions{gap:0 16px;margin-top:12px}}


/* suono d'ambiente: pulsante nell'intestazione, barre ferme da spento e in movimento da acceso */
.sound-btn{display:none;align-items:center;gap:10px;min-height:40px;padding:0 14px;border:1px solid transparent;border-radius:var(--r);background:var(--fill) padding-box,var(--ring) border-box;color:#cfd7de;font:500 .75rem/1 Geist,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:color .25s}
html.gl .sound-btn{display:inline-flex}
.sound-btn:hover{color:#fff}
.sound-btn:focus-visible{outline:2px solid #edf6ff;outline-offset:2px}
.sb-bars{display:inline-flex;align-items:center;gap:2px;height:14px}
.sb-bars i{display:block;width:2px;height:3px;border-radius:1px;background:currentColor;transition:height .3s}
html.sound-on .sound-btn{color:var(--ice)}
html.sound-on .sb-bars i{animation:sb 1.1s ease-in-out infinite}
.sb-bars i:nth-child(2){animation-delay:-.2s!important}.sb-bars i:nth-child(3){animation-delay:-.5s!important}.sb-bars i:nth-child(4){animation-delay:-.75s!important}.sb-bars i:nth-child(5){animation-delay:-.35s!important}
@keyframes sb{0%,100%{height:3px}50%{height:13px}}
html[data-layout=compact] .sound-btn{width:44px;height:44px;min-height:0;padding:0;justify-content:center;border:0;background:none}
html[data-layout=compact] .sound-btn .sb-t{display:none}
html.in-room .sound-btn,html.is-entering .sound-btn{display:none!important}
@media(prefers-reduced-motion:reduce){html.sound-on .sb-bars i{animation:none;height:9px}}
/* Variante locale: console di contatto e soglia della stanza, nello stesso territorio. */
@font-face{font-family:GeistRelay;src:url('/assets/geist.woff2') format('woff2');font-display:swap}
.relay-controls{margin:22px 0;color:#d8e7f1}
.relay-status{min-height:2.8em;font-size:.85rem!important;line-height:1.45!important;margin:0 0 12px!important}
.relay-keys{display:flex;align-items:center;gap:8px}
.relay-keys button,.relay-access button{font:inherit;font-size:.85rem;min-height:44px;padding:8px 14px;color:#d9ecf8;background:#101d28;border:1px solid #a8d4f34d;border-radius:5px;cursor:pointer}
.relay-keys button:last-child{color:#101820;background:#badcf2}
.relay-keys button:hover,.relay-access button:hover,.relay-access button[aria-pressed=true]{background:#2a4053;color:white}
.relay-keys button:focus-visible,.relay-access button:focus-visible,.relay-access summary:focus-visible{outline:2px solid #bce6ff;outline-offset:4px}
.relay-access{margin-top:12px;font-size:.8rem}
.relay-access summary{cursor:pointer;min-height:32px;padding:4px 0;color:#b2c5d3}
[data-relay-menu]{display:flex;flex-wrap:wrap;gap:6px;padding:8px 0}
.relay-send:not([hidden]){display:inline-block;color:#d3efff;margin-top:12px;min-height:40px;padding:8px 0;text-decoration:underline;text-underline-offset:5px}
.room-essential{position:absolute;right:var(--pad);bottom:calc(var(--sab) + var(--padb));min-height:44px;padding:12px 18px;border:1px solid #d3e4f088;border-radius:6px;background:#0d1827e8;color:#e4f4ff;font-size:.85rem}
html.gl[data-layout=wide] #contatti .st-copy,html.gl[data-layout=wide] #daniele .st-copy{max-width:38vw;bottom:calc(var(--padb) + 66px)}
html.gl[data-layout=wide] #contatti .st-copy h2,html.gl[data-layout=wide] #daniele .st-copy h2{font-size:clamp(2rem,3.5vw,4rem)}
html.gl #daniele .st-copy>.kb{margin-top:24px}
html.gl #daniele .st-copy>.kb-g{display:inline-block;margin-top:16px;font-size:.8rem}
.room-fallback-note{font-size:.85rem!important}
html.gl[data-layout=compact] #contatti .st-copy,html.gl[data-layout=compact] #daniele .st-copy{bottom:calc(var(--padb) + 8px)}
html.gl[data-layout=compact] #contatti .st-copy h2,html.gl[data-layout=compact] #daniele .st-copy h2{font-size:clamp(1.55rem,6.5vw,2.2rem)}
html.gl[data-layout=compact] #contatti .st-copy>p,html.gl[data-layout=compact] #daniele .st-copy>p{font-size:.86rem;margin-top:10px;line-height:1.4}
html.gl[data-layout=compact] .relay-controls{margin:12px 0}
html.gl[data-layout=compact] #contatti .contact-links{margin-top:10px;gap:12px}
html.gl[data-layout=compact] #contatti .contact-links .kb{min-height:40px;padding:8px 14px}
html.gl[data-layout=compact] #contatti .contact-guide{display:none}
html.gl[data-layout=compact] .relay-access[open]{max-height:180px;overflow:auto;background:#0c141deb;padding:8px}
html.gl[data-layout=compact] #daniele .room-fallback-note{display:none}
html.no-gl .relay-controls,html:not(.gl) .relay-controls{display:none}
html.gl.in-room .room-essential{display:block;pointer-events:auto}
@media(max-height:540px){html.gl #contatti .st-copy{max-width:40vw}.relay-controls{margin:8px 0}.relay-status{min-height:0}.relay-access{display:none}.relay-keys button{min-height:36px}.room-fallback-note{display:none!important}}

/* Contrasto del testo senza aggiungere pannelli opachi al paesaggio. */
html.gl[data-layout=wide][data-station=contatti] .veil,html.gl[data-layout=wide][data-station=daniele] .veil{background:linear-gradient(90deg,#0c0e11e8 0%,#0c0e11b8 30%,#0c0e1130 48%,transparent 63%)}
html.gl.in-room .room-essential{bottom:calc(var(--sab) + var(--padb) + 38px)}

html.gl .relay-access{pointer-events:auto}

html.gl .relay-access[open]{position:relative;overflow:visible;max-height:none;padding:0;background:none}
html.gl .relay-access[open] [data-relay-menu]{position:absolute;left:0;right:0;bottom:calc(100% + 10px);z-index:5;max-height:190px;overflow:auto;padding:12px;background:#101a24;border:1px solid #9fbfd155;border-radius:8px;box-shadow:0 12px 35px #0008}
html.gl[data-layout=compact][data-station=contatti] .veil{background:linear-gradient(180deg,#0c0e1120 0%,transparent 36%,#0c0e11b0 55%,#0c0e11f5 76%)}
@media(max-height:650px){html.gl[data-layout=compact] #contatti .st-copy>p{display:none}}

html.gl .relay-access{position:relative}
html.gl .relay-access [data-relay-expand]{background:none;border:none;color:#b2c5d3;padding:0;min-height:32px;font-size:.8rem;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
html.gl [data-relay-menu]:not([hidden]){position:absolute;left:0;right:0;bottom:calc(100% + 10px);z-index:5;max-height:190px;overflow:auto;padding:12px;background:#101a24;border:1px solid #9fbfd155;border-radius:8px;box-shadow:0 12px 35px #0008;pointer-events:auto}
html.gl [data-relay-menu][hidden]{display:none!important}

/* Void tech: atmosfera leggibile e profondita libera, senza un paesaggio urbano. */
html.gl:not(.in-room) .veil{background:linear-gradient(180deg,#101e2b66 0%,transparent 23%,transparent 73%,#101e2b80 100%)}
html.gl[data-layout=wide]:not(.in-room)[data-station=contatti] .veil,html.gl[data-layout=wide]:not(.in-room)[data-station=daniele] .veil{background:linear-gradient(90deg,#101e2bd6 0%,#101e2b99 30%,transparent 62%)}
html.gl[data-layout=compact]:not(.in-room) .veil{background:linear-gradient(180deg,#101e2b55 0%,transparent 19%,transparent 47%,#101e2bc0 73%,#101e2be6 100%)}
html.gl[data-layout=compact]:not(.in-room)[data-station=contatti] .veil{background:linear-gradient(180deg,#101e2b40 0%,transparent 35%,#101e2b90 55%,#101e2be6 80%)}
html.gl:not(.in-room) .header{background:linear-gradient(180deg,#101e2b80,transparent)}
html.gl:not(.in-room) .hero-copy,html.gl:not(.in-room) .st-copy,html.gl:not(.in-room) .st-head,html.gl:not(.in-room) .project-meta{text-shadow:0 1px 12px #09121e70}
html.gl[data-layout=wide]:not(.in-room)[data-station=studio] .veil{background:linear-gradient(90deg,#101e2b8c 0%,#101e2b40 29%,transparent 53%),linear-gradient(180deg,#101e2b55,transparent 28%,transparent 74%,#101e2b66)}
/* variante Claude: con il fondale piu chiaro, una protezione morbida dietro le colonne di testo (Servizi a sinistra, Progetti a sinistra e a destra) */
html.gl[data-layout=wide]:not(.in-room)[data-station=studio] .veil{background:linear-gradient(90deg,#122332b0 0%,#12233266 28%,transparent 50%),linear-gradient(180deg,#12233266,transparent 26%,transparent 76%,#12233270)}
html.gl[data-layout=wide]:not(.in-room)[data-station=percorsi] .veil{background:linear-gradient(90deg,#122332b0 0%,#12233266 26%,transparent 46%),linear-gradient(180deg,#12233266,transparent 26%,transparent 76%,#12233270)}
html.gl[data-layout=wide]:not(.in-room)[data-station=progetti] .veil{background:linear-gradient(90deg,#122332c0 0%,#12233270 25%,transparent 40%),linear-gradient(270deg,#122332cc 0%,#12233280 24%,transparent 40%),linear-gradient(180deg,#12233266,transparent 26%,transparent 76%,#12233270)}
html.gl[data-journey-phase]:not(.in-room)[data-station] .veil{background:linear-gradient(180deg,#101e2b22,transparent 16%,transparent 89%,#101e2b22)}

/* ===== Revisione UX 21 ottobre: contatto immediato, salto del viaggio, movimento ridotto, carosello, dettagli leggibili ===== */
/* Sito essenziale: sempre in vista accanto al marchio */
.ess-link{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;margin-left:clamp(10px,2vw,28px);color:#dfe6ec;font-size:.75rem;letter-spacing:.04em;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#e9eef266;white-space:nowrap}
@media(hover:hover){.ess-link:hover{color:#fff;text-decoration-color:currentColor}}
.ess-link:focus-visible{outline:2px solid #edf6ff;outline-offset:2px;border-radius:2px}
html[data-layout=compact] .ess-link{margin-left:10px;font-size:.75rem}
html[data-layout=compact] .info-btn{margin-left:auto}
html.gl.in-room .ess-link,html.gl.is-entering .ess-link{display:none}
/* Riduci movimento: accanto a Suono sugli schermi ampi; sul telefono sta in Informazioni */
.motion-btn{display:none;align-items:center;gap:9px;min-height:40px;padding:0 14px;border:1px solid transparent;border-radius:var(--r);background:var(--fill) padding-box,var(--ring) border-box;color:#cfd7de;font:500 .75rem/1 Geist,Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
html.gl .motion-btn{display:inline-flex}
html[data-layout=compact] .motion-btn,html.gl.in-room .motion-btn,html.gl.is-entering .motion-btn{display:none!important}
.motion-btn[aria-pressed=true]{color:var(--ice)}
.motion-btn:focus-visible{outline:2px solid #edf6ff;outline-offset:2px}
@media(hover:hover){.motion-btn:hover{color:#fff}}
.motion-pref{margin-top:18px}
.motion-pref h3{font-size:1rem;font-weight:500}
.sky-pref{margin-top:18px}
.sky-pref h3{font-size:1rem;font-weight:500}
.sky-pref p{margin-top:6px;color:#c9d4dc;font-size:.875rem;line-height:1.5}
/* Mondo vivo, E: avviso visibile solo con condizioni forzate (?luce=, ?ora=, ?meteo=), perché una prova non sembri il meteo attuale */
.sky-sim{position:fixed;z-index:30;right:var(--pad);top:calc(env(safe-area-inset-top,0px) + 64px);margin:0;padding:6px 10px;border:1px solid #e9eef259;border-radius:var(--r);background:#0f1a24e6;color:#f4f8fb;font:400 .625rem/1.35 Michroma,Geist,sans-serif;letter-spacing:.14em;text-transform:uppercase;pointer-events:none;max-width:calc(100vw - 2 * var(--pad));text-align:right}
html[data-layout=compact] .sky-sim{top:calc(env(safe-area-inset-top,0px) + var(--head) - 4px);padding:2px 8px;font-size:.5rem;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* telefono: una riga sottile sotto l'intestazione, sopra i comandi della sezione */
@media(max-height:520px){html[data-layout=wide] .sky-sim{top:0;left:50%;right:auto;transform:translateX(-50%);padding:1px 10px;border-top:0;border-radius:0 0 var(--r) var(--r);font-size:.5rem;letter-spacing:.06em;white-space:nowrap;text-align:center}}   /* telefono in orizzontale: linguetta appesa al bordo alto, fuori dai comandi */
html.calm .vcue-k svg,html.calm .sb-bars i,html.calm .cue b,html.calm .tip-i::after{animation:none!important}
/* Salto del viaggio: compare solo mentre la camera vola */
.skip-trip{position:fixed;z-index:13;left:50%;bottom:calc(var(--padb) + 58px);transform:translateX(-50%);display:none;align-items:center;gap:10px;min-height:44px;padding:0 16px;border:1px solid #e9eef259;border-radius:var(--r);background:#0f1a24e6;color:#f4f8fb;font:500 .8125rem/1 Geist,Arial,sans-serif;letter-spacing:.03em;cursor:pointer;visibility:hidden;opacity:0;transition:opacity .25s}
html.gl .skip-trip{display:inline-flex}
html.gl[data-journey-phase]:not(.in-room) .skip-trip{visibility:visible;opacity:1}
.skip-trip kbd{padding:2px 6px;border:1px solid #e9eef266;border-radius:3px;font:500 .6875rem/1.2 Geist,Arial,sans-serif;color:#dfe6ec}
html[data-layout=compact] .skip-trip{bottom:calc(var(--sab,0px) + var(--bar,50px) + 62px)}
html[data-layout=compact] .skip-trip kbd{display:none}
.skip-trip:focus-visible{outline:2px solid #edf6ff;outline-offset:2px}
@media(hover:hover){.skip-trip:hover{background:#18293a;border-color:#e9eef2a0}}
.cut{position:fixed;inset:0;z-index:5;pointer-events:none;background:#b7d0da;opacity:0}
.cut.go{animation:cut .42s ease-out both}
@keyframes cut{from{opacity:.92}to{opacity:0}}
/* Foglio Contattami */
.contact-sheet .report-box{width:min(30rem,100%)}
.cs-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px;align-items:center}
.cs-links .kb,.cs-links .kb-g{min-height:44px}
.cs-brief{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:10px;padding:0;border:0;background:none;color:#dfe6ec;font:inherit;font-size:.9375rem;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#e9eef266;cursor:pointer}
.cs-brief .ka{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6}
@media(hover:hover){.cs-brief:hover{color:#fff}}
.cs-quote{margin:20px 0 0;padding:14px 0 0 16px;border-left:2px solid #a5d4f4;border-top:0}
.cs-quote p{font-size:1rem;line-height:1.45;font-style:italic;color:#eef3f6}
.cs-quote figcaption{margin-top:8px;font-size:.8125rem;color:#c3ccd4}
.cs-go{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:16px;padding:0;border:0;background:none;color:#c3ccd4;font:inherit;font-size:.875rem;cursor:pointer}
@media(hover:hover){.cs-go:hover{color:#fff}}
.cs-brief:focus-visible,.cs-go:focus-visible{outline:2px solid #edf6ff;outline-offset:3px;border-radius:2px}
/* Briefing raggiungibile anche sul telefono */
html.gl[data-layout=compact] #contatti .contact-guide{display:inline-flex;min-height:44px;margin-top:2px;color:#dfe6ec;font-size:.8125rem}
/* Carosello: posizione esplicita e comandi da 44 px anche al tocco */
.pager{gap:4px;padding:0 4px;border-radius:var(--r);background:#0f1a24b3}
.pg-b{width:44px;height:44px}
.pg-b[disabled]{opacity:.35;cursor:default}
.pg-count{min-width:7.5rem;padding:0 4px;text-align:center;font:500 .8125rem/1 Geist,Arial,sans-serif;letter-spacing:.03em;color:#f4f8fb;white-space:nowrap}
.pg-dots{display:flex;align-items:center}
.pg-d{width:24px;height:44px}
@media(pointer:coarse){.pg-b{display:grid}.pg-d{width:28px;height:44px}}
html[data-layout=compact] .pg-count{min-width:0;font-size:.75rem}
/* Approfondimenti: fondo coprente, niente testi della scena dietro, scena ferma mentre si legge */
html.gl .pdetail{background:#0d131af5!important;border:1px solid #e9eef22e!important;box-shadow:0 24px 80px #0006}
html.gl[data-layout=compact] .pdetail{background:#0d131af7!important}
html.gl.at-detail #progetti .project-meta,html.gl.at-detail .vcue{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
html.gl .pdetail:focus{outline:none}
html.gl .pdetail:focus-visible{outline:2px solid #edf6ff;outline-offset:3px}
/* Contrasto dei titoli sul cielo chiaro del telefono */
html.gl[data-layout=compact]:not(.in-room):not([data-journey-phase])[data-station=progetti] .veil,html.gl[data-layout=compact]:not(.in-room):not([data-journey-phase])[data-station=percorsi] .veil{background:linear-gradient(180deg,#101e2bd9 0%,#101e2bb0 13%,#101e2b40 24%,transparent 32%,transparent 50%,#101e2bc0 70%,#101e2bf0 100%)}
html.gl[data-layout=compact] #progetti .st-head h2,html.gl[data-layout=compact] #percorsi .st-head h2,html.gl[data-layout=compact] .all-link{text-shadow:0 1px 12px #0c141dcc}
/* Contrasto misurato sui pixel (4,5:1 testo normale, 3:1 testo grande): testi secondari più chiari, fasce scure solo dove c'è testo */
html.gl{--muted:#d3dbe2}
html.gl .header::before{content:'';position:absolute;left:0;right:0;top:0;height:calc(var(--head) + 34px);background:linear-gradient(180deg,#0d1720e6 0%,#0d1720b8 52%,#0d172000 100%);pointer-events:none;z-index:-1}
html.gl.in-room .header::before{display:none}
html.gl[data-layout=wide]:not(.in-room):not([data-journey-phase])[data-station=studio] .veil,html.gl[data-layout=wide]:not(.in-room):not([data-journey-phase])[data-station=percorsi] .veil{background:linear-gradient(90deg,#0f1b26e6 0%,#0f1b26b8 26%,#0f1b2640 44%,transparent 54%),linear-gradient(0deg,#0f1b26d9 0%,#0f1b2600 16%)}
html.gl[data-layout=wide]:not(.in-room):not([data-journey-phase])[data-station=progetti] .veil{background:linear-gradient(90deg,#0f1b26eb 0%,#0f1b26c0 22%,transparent 38%),linear-gradient(270deg,#0f1b26f2 0%,#0f1b26d0 24%,transparent 40%),linear-gradient(0deg,#0f1b26d9 0%,#0f1b2600 16%)}
html.gl[data-layout=wide]:not(.in-room):not([data-journey-phase])[data-station=contatti] .veil,html.gl[data-layout=wide]:not(.in-room):not([data-journey-phase])[data-station=daniele] .veil{background:linear-gradient(90deg,#0e1822f2 0%,#0e1822d9 30%,#0e182270 46%,transparent 60%),linear-gradient(0deg,#0e1822d9 0%,#0e182200 16%)}
html.gl[data-layout=compact]:not(.in-room):not([data-journey-phase])[data-station=progetti] .veil,html.gl[data-layout=compact]:not(.in-room):not([data-journey-phase])[data-station=percorsi] .veil{background:linear-gradient(180deg,#0e1822f2 0%,#0e1822d9 18%,#0e182270 30%,transparent 38%,transparent 50%,#0e1822c8 68%,#0e1822f5 100%)}
html.gl[data-layout=compact]:not(.in-room):not([data-journey-phase])[data-station=studio] .veil,html.gl[data-layout=compact]:not(.in-room):not([data-journey-phase])[data-station=daniele] .veil{background:linear-gradient(180deg,#0e182240 0%,transparent 16%,transparent 40%,#0e1822c8 60%,#0e1822f5 80%)}
html.gl[data-layout=compact]:not(.in-room):not([data-journey-phase])[data-station=contatti] .veil{background:linear-gradient(180deg,#0e182240 0%,transparent 28%,#0e1822cc 40%,#0e1822f2 56%,#0e1822f7 100%)}
html.gl .card .num{color:#f4f8fb}
.cs-more{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:2px;color:#dfe6ec;font-size:.8125rem;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#e9eef266}
@media(hover:hover){.cs-more:hover{color:#fff}}
.cs-quote blockquote{margin:0}
.motion-btn .mb-t,.sound-btn .sb-t{white-space:nowrap}
@media(max-width:1359px){html.gl[data-layout=wide] .motion-btn{width:44px;padding:0;justify-content:center}html.gl[data-layout=wide] .motion-btn .mb-t{display:none}}
@media(max-width:1180px){html.gl[data-layout=wide] .sound-btn{width:44px;padding:0;justify-content:center}html.gl[data-layout=wide] .sound-btn .sb-t{display:none}html.gl[data-layout=wide] .header{gap:14px}html.gl[data-layout=wide] .ess-link{margin-left:4px}}
.motion-btn,.sound-btn,.nav-contact,.ess-link{flex-shrink:0}
@media(max-width:1000px){html.gl[data-layout=wide] .header nav{gap:12px}html.gl[data-layout=wide] .header{gap:10px}html.gl[data-layout=wide] .nav-contact{padding:0 14px}}
.motion-btn .mb-i{flex:none}
.motion-btn[aria-pressed=true]{border-color:#a5d4f4;background:#a5d4f41f;color:#eef7fd}
/* sul telefono il carosello ha la sua fascia: la descrizione del progetto sale sopra i comandi (sempre, non solo con la barra accesa: lo spazio della scheda si misura anche dalla home) */
html.gl[data-layout=compact] .project{bottom:calc(var(--padb) + 62px)}

/* ---------- versione finale: sistema comune con le pagine interne (site.css) ---------- */
/* aree di tocco almeno 44×44 sul telefono; sul telefono la barra dei progetti e come quella dei servizi (frecce e contatore), i puntini restano dove c'e posto */
.info-btn{flex:none}
@media(pointer:coarse){.pg-d{width:44px}.relay-keys button{min-width:44px;min-height:44px}html.gl .relay-access [data-relay-expand]{min-height:44px}html.gl[data-layout=compact] #contatti .contact-links .kb{min-height:44px}.bn-b,.bn-c,.tip-b{min-height:44px}}
.bn-b,.bn-c,.tip-b{border-radius:var(--r)}
html[data-layout=compact] .pg-dots{display:none}
/* finestre a 8 px (a tutto schermo sul telefono restano senza bordo), comandi a 4 px */
@media(min-width:561px){.report-box{border-radius:8px}}
.brief-sheet .btn{border-radius:var(--r)}
/* stati comuni: premuto = acciaio scuro (come nelle pagine interne), disattivato, in corso */
:root{--fillP:linear-gradient(180deg,#1b2128,#12161a)}
.kb:active,html.gl .contact-links a.kb:active,.nav-contact[data-kb]:active,.motion-btn:active,.sound-btn:active,.brief-sheet .btn:active,html.gl .vcue:active{background:var(--fillP) padding-box,var(--ring) border-box;color:var(--ice)}
.kb:active .lab{color:var(--ice)}
.kb[aria-disabled="true"],.kb[disabled],.brief-sheet .btn[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}
.kb[aria-busy="true"],.brief-sheet .btn[aria-busy="true"]{cursor:progress;position:relative}
.kb[aria-busy="true"]::after,.brief-sheet .btn[aria-busy="true"]::after{content:'';position:absolute;left:14px;right:14px;bottom:7px;height:1px;background:linear-gradient(90deg,transparent,var(--ice),transparent);background-size:50% 100%;background-repeat:no-repeat;animation:cphr-busy 1.1s linear infinite}
@keyframes cphr-busy{from{background-position:-50% 0}to{background-position:150% 0}}
@media(prefers-reduced-motion:reduce){.kb[aria-busy="true"]::after,.brief-sheet .btn[aria-busy="true"]::after{animation:none;background-size:100% 100%}}
[data-kb]:active .lab,.nav-contact:active .lab,.nav-contact[data-kb]:active *{color:var(--ice)}
html .nav-contact[data-kb]:active,html .nav-contact[data-kb]:active .lab,html .nav-contact[data-kb]:active .l{color:var(--ice)}html .nav-contact[data-kb]:active{background:var(--fillP) padding-box,var(--ring) border-box}
/* il titolo che riceve il fuoco all arrivo (tabindex -1) non e un comando: niente contorno, i lettori di schermo lo annunciano comunque */
html.gl .st h1[tabindex="-1"]:focus,html.gl .st h2[tabindex="-1"]:focus,html.gl .pdetail[tabindex="-1"]:focus{outline:none}

/* versione finale: con la barra inferiore (fino a 760 px) la sezione corrente e gia segnata nella barra; il numero e il nome del HUD finivano sotto la barra (visto con zoom al 200%) */
@media(max-width:760px){html.gl .hud-station{display:none}}

/* vista del dispositivo dei Contatti: due giri da 90° e il ritorno davanti, in acciaio come gli altri comandi della scena */
.relay-view{display:none}
html.gl .relay-view{position:fixed;left:0;top:0;z-index:8;display:flex;gap:6px;visibility:hidden;pointer-events:none;will-change:transform}
html.gl .relay-view[data-on]{visibility:visible;pointer-events:auto}
html.gl .relay-view button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:0 14px;border:1px solid transparent;border-radius:var(--r);background:var(--fill) padding-box,var(--ring) border-box;box-shadow:0 10px 24px -10px #000d;color:var(--ice);font:400 10px/1 Michroma,Geist,sans-serif;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:background .2s,color .2s,opacity .2s}
html.gl .relay-view button svg{width:16px;height:16px}
html.gl .relay-view [data-relay-turn]{padding:0}
html.gl .relay-view [data-relay-front][aria-disabled=true]{opacity:.45;cursor:default}
html.gl .relay-view[data-turned] [data-relay-front]{background:var(--fillH) padding-box,var(--ringH) border-box;color:var(--void)}
@media(hover:hover){html.gl .relay-view button:not([aria-disabled=true]):hover{background:var(--fillH) padding-box,var(--ringH) border-box;color:var(--void)}}
html.gl .relay-view button:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
/* telefoni stretti: logo, Sito essenziale, informazioni e suono restano tutti nella riga (a 360 px il suono usciva di 14 px) */
@media(max-width:380px){html.gl header{gap:12px}html.gl header .ess-link{margin-left:0}}
@media(max-width:340px){html.gl header{gap:8px;padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px))}}
/* Servizi, direzione B (24 ottobre): testo aperto sotto l'icona di lucciole, nessuna scheda; sei settori sul bordo della bocca */
html.gl .card{display:block;width:min(34rem,calc(100vw - 32px));height:auto;padding:6px 16px 10px;text-align:center;border:0;border-radius:var(--r);background:none;transform-origin:50% 0;container-type:normal}
html.gl .card .num{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html.gl .card h3{display:inline;margin:0;font-size:clamp(1.5rem,2.4vw,2.35rem);line-height:1.14;letter-spacing:-.025em}
html.gl .card .arrow{display:none}
html.gl .card p{margin:.5em auto 0;font-size:clamp(1rem,1.25vw,1.2rem);line-height:1.4;max-width:34ch;color:#d6dee6}
html.gl .card::after{content:"";display:block;width:56px;height:1px;margin:13px auto 0;background:linear-gradient(90deg,transparent,#a9dcffaa,transparent);transition:width .3s var(--ease)}
@media(hover:hover){html.gl .card:hover::after{width:120px}}
html.gl .card:focus-visible::after{width:120px}
html.gl .card:focus-visible{outline:2px solid #edf6ff;outline-offset:2px}
.svc-sectors{display:none}
html.gl .svc-sectors{display:block;position:absolute;inset:0;pointer-events:none;z-index:3}
.svc-sec{position:absolute;left:0;top:0;width:40px;height:40px;padding:0;margin:0;border:0;background:transparent;color:transparent;cursor:pointer;visibility:hidden;-webkit-tap-highlight-color:transparent}
.svc-sectors[data-on] .svc-sec{visibility:visible;pointer-events:auto}
.svc-sec:focus-visible{outline:none}
.svc-sectors .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* suggerimento dei Servizi: sul computer in basso al centro (dove l'icona non c'e), sul telefono sotto l'intestazione (in basso ci sono i settori) */
html[data-layout=wide] .tip[data-pos=foot]{top:auto;bottom:calc(var(--padb) - 12px)}

/* Mondo vivo (24 ottobre): nessun oscuramento all'approdo. Il velo resta quello leggero del volo anche da fermi; le protezioni dei testi sono
   ellissi sfumate sui blocchi di testo reali, su uno strato a parte (.veil::after) che compare con una dissolvenza all'arrivo e sparisce in volo
   (i gradienti non si possono animare, l'opacita si). Contrasto verificato con contrasto.mjs sui fondali reali, senza contare l'alone dei testi. */
html.gl[data-layout]:not(.in-room):not(.is-leaving)[data-station] .veil,html.gl[data-layout]:not(.in-room):not(.is-leaving):not([data-journey-phase])[data-station] .veil{background:linear-gradient(180deg,#101e2b22,transparent 16%,transparent 89%,#101e2b22)}
html.gl:not(.in-room) .veil::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:1;transition:opacity .9s var(--ease,ease)}
html.gl[data-journey-phase]:not(.in-room) .veil::after,html.gl.is-leaving .veil::after{opacity:0;transition-duration:.3s}
html.gl[data-layout=wide]:not(.in-room)[data-station=studio] .veil::after{background:radial-gradient(ellipse 34% 30% at 14% 92%,#0e1822d9,#0e1822a6 50%,transparent),linear-gradient(90deg,#0e18228c 0%,#0e182266 26%,#0e182220 42%,transparent 52%)}
html.gl[data-layout=wide]:not(.in-room)[data-station=percorsi] .veil::after,html.gl[data-layout=wide]:not(.in-room)[data-station=contatti] .veil::after{background:linear-gradient(90deg,#0e18228c 0%,#0e182266 26%,#0e182220 42%,transparent 52%)}
html.gl[data-layout=wide]:not(.in-room)[data-station=progetti] .veil::after{background:radial-gradient(ellipse 26% 24% at 12% 17%,#0e1822d9,#0e1822a6 50%,transparent),radial-gradient(ellipse 22% 30% at 10% 50%,#0e1822cc,#0e182299 45%,transparent),radial-gradient(ellipse 20% 22% at 88% 50%,#0e1822d9,#0e1822a6 45%,transparent),linear-gradient(90deg,#0e182273 0%,transparent 30%)}
html.gl[data-layout=wide]:not(.in-room)[data-station=daniele] .veil::after{background:radial-gradient(ellipse 42% 40% at 22% 62%,#0e1822d9,#0e1822a6 50%,transparent),linear-gradient(90deg,#0e18228c 0%,#0e182259 30%,transparent 50%)}
html.gl[data-layout=compact]:not(.in-room)[data-station=percorsi] .veil::after,html.gl[data-layout=compact]:not(.in-room)[data-station=studio] .veil::after{background:radial-gradient(ellipse 75% 16% at 28% 11%,#0e1822e0,#0e1822a6 50%,transparent)}
html.gl[data-layout=compact]:not(.in-room)[data-station=progetti] .veil::after{background:radial-gradient(ellipse 75% 16% at 28% 11%,#0e1822e0,#0e1822a6 50%,transparent),radial-gradient(ellipse 40% 9% at 80% 12%,#0e1822eb,#0e1822b3 55%,transparent),radial-gradient(ellipse 80% 22% at 40% 80%,#0e1822e6,#0e1822b3 55%,transparent)}
/* alone stretto intorno alle righe dei testi delle sezioni (non disegna forme) */
html.gl:not(.in-room) .st .st-copy h2,html.gl:not(.in-room) .st .st-copy>p,html.gl:not(.in-room) .st .st-copy .eyebrow,html.gl:not(.in-room) #contatti .relay-status{text-shadow:0 1px 2px #0e1822d9,0 0 18px #0e1822b3,0 0 42px #0e182299}
/* al telefono il blocco di testo ha una protezione morbida solo dietro di se */
html.gl[data-layout=compact]:not(.in-room) .st .st-copy{isolation:isolate}
html.gl[data-layout=compact]:not(.in-room) .st .st-copy::before{content:'';position:absolute;inset:-60px -40px -40px -40px;z-index:-1;pointer-events:none;background:radial-gradient(closest-side at 50% 52%,#0e1822eb 0%,#0e1822d9 62%,#0e182280 84%,#0e182200 100%)}
/* C04 · integrazione Codex: scena 3D e interazione sul robot */
html.gl #daniele .st-copy:not(.voci-copy){opacity:calc(1 - var(--vd,0))}
html.gl #daniele[data-voci-full] .st-copy:not(.voci-copy){visibility:hidden}
.voci-copy{display:none}
html.gl #daniele .voci-copy{display:block;position:fixed;inset:0;max-width:none;margin:0;opacity:var(--v,0);visibility:hidden;pointer-events:none;isolation:auto}
html.gl #daniele .voci-copy::before{display:none}
html.gl #daniele[data-voci-in] .voci-copy{visibility:visible}
.voci-caption{position:absolute;left:var(--pad);top:110px;max-width:28rem;padding:10px 16px;background:#101a23ed;border:1px solid #a5c2d133;border-radius:8px;color:#eff5f8}
html.gl #daniele .voci-caption .eyebrow{font-size:.78rem;margin:0;letter-spacing:.1em}
html.gl #daniele .voci-caption h2{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
html.gl #daniele .voci-caption>p:not(.eyebrow){display:block;font-size:.84rem;line-height:1.4;margin:6px 0 0;color:#d8e4eb}
.voci-list,.voci-list li{list-style:none;margin:0;padding:0;display:contents}
html.gl #daniele .voce-btn{position:absolute;min-width:44px;min-height:44px;margin:0;padding:0;border:2px solid transparent;background:none;box-shadow:none;border-radius:18px;pointer-events:auto;cursor:pointer;color:#eff5f8}
html.gl #daniele .voce-btn>*{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
html.gl #daniele .voce-btn:hover,html.gl #daniele .voce-btn:focus-visible{outline:2px solid #e8f7ff;outline-offset:4px;background:#d8f0ff0a}
html.gl #daniele .voce-btn:focus-visible .lab{width:auto;height:auto;clip-path:none;overflow:visible;bottom:-30px;left:50%;transform:translateX(-50%);padding:5px 9px;background:#0d1823;color:#eff5f8;font-size:.8rem;border-radius:5px}
.voci-controls{position:absolute;bottom:105px;left:var(--pad);right:var(--pad);display:flex;align-items:center;flex-wrap:wrap;gap:2px 20px;pointer-events:auto;width:fit-content;max-width:calc(100% - var(--pad)*2);padding:6px 14px;background:#101a23f2;border:1px solid #a5c2d133;border-radius:8px}
.voci-nav{display:flex;align-items:center;gap:14px}.voci-nav[hidden]{display:none}
.voci-g{border:0;background:none;color:#eff5f8;font:inherit;font-size:.85rem;min-height:44px;cursor:pointer}.voci-g:disabled{opacity:.45;cursor:default}.voci-gl{font-size:.8rem;color:#d8e4eb}
.voci-fine,.voci-back{display:inline-flex;font-size:.85rem;min-height:44px;align-items:center;color:#eff5f8}
.voce-bubble{position:fixed;z-index:6;width:min(26rem,38vw);max-height:calc(100dvh - 210px);margin:0;padding:0;border:1px solid #a8c1d480;border-radius:14px;background:#101a23fa;color:#eff5f8;box-shadow:0 16px 50px #040a1270;pointer-events:auto;overflow:hidden;display:flex;flex-direction:column}
.voce-bubble[hidden]{display:none}
.voce-bubble blockquote{overflow:auto;overscroll-behavior:contain;touch-action:pan-y;margin:50px 0 0;padding:0 24px 18px;min-height:60px;scrollbar-color:#a9c8dc #152330}
.voce-bubble blockquote:focus-visible{outline:2px solid #d7efff;outline-offset:-4px}
.voce-bubble blockquote p{font-size:1rem;line-height:1.6;white-space:pre-wrap;color:#edf4f8;margin:0}
.voce-bubble blockquote p::before{content:'«'}.voce-bubble blockquote p::after{content:'»'}
.voce-bubble figcaption{font-size:.9rem;line-height:1.45;margin:0;padding:12px 24px 0;border-top:1px solid #a5c2d133}.voce-bubble figcaption b{font-weight:600}
.voce-how{font-size:.76rem;line-height:1.4;color:#c3d4df;margin:7px 24px}
.voce-links{display:flex;flex-wrap:wrap;gap:0 16px;margin:0 24px 8px}.voce-links a{font-size:.8rem;min-height:40px;color:#eff5f8}.voce-links [hidden]{display:none}
.voce-more{list-style:none;padding:0;margin:0 24px 10px}.voce-more[hidden]{display:none}
.voce-x{position:absolute;top:4px;right:4px;width:44px;height:44px;background:none;border:0;color:#eff5f8;font-size:1.6rem;cursor:pointer}.voce-x:focus-visible{outline:2px solid #d7efff;border-radius:8px}
.piazza-skip{position:fixed;top:10px;left:10px;transform:translateY(-180%);z-index:100;background:#101a23;color:#eff5f8;padding:14px;border:2px solid #d7efff}
.piazza-skip:focus{transform:none}
html.gl #daniele .voci-go{display:inline-flex;margin-top:14px;margin-right:22px}
html.gl[data-layout=compact] #daniele .voci-caption{top:110px;left:20px;right:20px;max-width:none;padding:8px 12px}
html.gl[data-layout=compact] #daniele .voci-caption>p:not(.eyebrow){font-size:.76rem}
html.gl[data-layout=compact] #daniele .voci-controls{left:20px;right:20px;bottom:88px;width:auto;padding:4px 10px;gap:0 14px}
html.gl[data-layout=compact] .voci-nav{width:100%;justify-content:space-between;gap:4px}
html.gl[data-layout=compact] .voce-bubble{width:calc(100vw - 24px);max-height:48dvh}
html.gl[data-layout=compact] .voce-bubble blockquote{padding:0 18px 14px}
html.gl[data-layout=compact] .voce-bubble blockquote p{font-size:.92rem}
@media(max-height:520px){
 html.gl #daniele .voci-caption{top:64px;padding:6px 10px;max-width:45vw}
 html.gl #daniele .voci-caption>p:not(.eyebrow){display:none}
 html.gl #daniele .voci-controls{bottom:65px;padding:0 10px;gap:0 12px}
 .voci-g,.voci-all,.voci-back{font-size:.75rem}.voci-gl{font-size:.7rem}
 .voce-bubble{width:42vw;max-height:calc(100dvh - 85px)}
 .voce-bubble blockquote{margin-top:44px;padding:0 16px 10px}.voce-bubble blockquote p{font-size:.88rem}
 .voce-bubble figcaption{padding:6px 16px 0;font-size:.78rem}.voce-how{margin:4px 16px;font-size:.67rem}.voce-links{margin:0 16px 4px}.voce-links a{font-size:.72rem;min-height:34px}
}
html.gl[data-layout] #daniele .st-copy.voci-copy{inset:0;max-width:none;transform:none}
html.gl[data-layout=wide]:not(.in-room):not(.is-leaving):not([data-journey-phase])[data-station=daniele] .veil::after{opacity:calc(1 - var(--vdoor,0))}
@media(min-width:980px) and (min-height:521px){
 .voce-bubble{width:min(24rem,30vw);max-height:min(56dvh,520px);overflow:visible}
 .voce-bubble::after{content:'';position:absolute;top:var(--ty,44px);width:12px;height:12px;background:#101a23;border:1px solid #a8c1d480;transform:translateY(-50%) rotate(45deg);pointer-events:none}
 .voce-bubble[data-side=right]::after{left:-7px;border-right:0;border-top:0}
 .voce-bubble[data-side=left]::after{right:-7px;border-left:0;border-bottom:0}
}
html.gl #daniele:has(.voce-bubble:not([hidden])){z-index:60}
@media(max-height:520px){html.gl #daniele .voce-btn:focus-visible .lab{bottom:auto;top:40%;left:50%}}