@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  font-optical-sizing: auto;
  src: url(/fonts/home/BricolageGrotesque.woff2) format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(/fonts/home/Geist.woff2) format('woff2');
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(/fonts/home/GeistMono.woff2) format('woff2');
}

/* Loomia Web - menu a pillola, lo stesso della home.
 *
 * La home e' una pagina a se' con il suo menu. Tutte le altre pagine, sia
 * quelle Nuxt sia le statiche, nascondono la barra vecchia e ricevono questa
 * da loomia-nav.js. Il foglio sta nell'head, cosi' la barra vecchia non
 * compare nemmeno per un istante. Classi con prefisso lw- per non scontrarsi
 * con gli stili delle pagine.
 */
.nav:not(.lw-nav),.nav__logo-mobile-blend{display:none!important}

/* Passaggi tra le pagine: la vecchia sfuma, la nuova entra con un piccolo movimento, la pillola del
   menu resta ferma. View Transitions tra documenti (Chrome, Edge, Safari 18.2+); altrove si cambia
   pagina come sempre. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:lw-vt-esce .32s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:lw-vt-entra .6s cubic-bezier(.22,1,.36,1) both}
@keyframes lw-vt-esce{to{opacity:0;transform:scale(.985)}}
@keyframes lw-vt-entra{from{opacity:0;transform:translateY(16px)}}
::view-transition-group(lw-pillola){animation-duration:.5s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
.lw-nav{view-transition-name:lw-pillola}


.lw-nav,.lw-menu{
  --lw-ink:#16161a;--lw-ink-2:#5d5a54;--lw-pearl:#efece6;--lw-line:rgba(22,22,26,.12);--lw-go:#3fb950;
  font-family:"Geist","Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;color:var(--lw-ink)}
.lw-nav *,.lw-menu *{box-sizing:border-box}
.lw-nav{position:fixed;z-index:1500;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top,0px) + 20px);
  width:min(1180px,calc(100% - 32px));display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px 10px 10px 22px;border-radius:18px;border:1px solid var(--lw-line);background:rgba(255,255,255,.55);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);line-height:1.2;letter-spacing:normal;text-transform:none}
.lw-nav a,.lw-menu a{color:inherit;text-decoration:none}
.lw-logo{display:flex;align-items:center;flex:none}
.lw-logo img{display:block;height:24px;width:auto}
.lw-links{display:flex;gap:30px;font-size:14.5px;opacity:.85}
.lw-links a{text-decoration:none;padding:4px 0;display:inline-flex;flex-direction:column;align-items:center;transition:transform .28s cubic-bezier(.22,1,.36,1),font-weight .2s;transform-origin:center}
/* spazio riservato per la versione piu' marcata: al passaggio del mouse le voci accanto non si spostano */
.lw-links a::after{content:attr(data-t);font-weight:500;height:0;visibility:hidden;overflow:hidden;pointer-events:none}
.lw-links a:hover,.lw-links a:focus-visible{transform:scale(1.08);font-weight:500}
.lw-links a[aria-current]{font-weight:500}
.lw-dx{display:flex;align-items:center;gap:14px}
.lw-lang{font:500 13px/1 "Geist Mono",ui-monospace,Menlo,monospace;letter-spacing:.04em;display:flex;gap:6px;color:var(--lw-ink-2)}
.lw-lang a[aria-current]{color:var(--lw-ink)}
.lw-btn{font:500 14px/1 "Geist","Helvetica Neue",Arial,sans-serif;letter-spacing:.02em;border:0;border-radius:100px;padding:13px 22px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;background:#D2F68D;color:#0D0D0D!important;transition:background .2s,transform .22s cubic-bezier(.22,1,.36,1)}
.lw-btn:hover{background:#c6ef75;transform:translateY(-1px)}
/* su schermo largo il richiamo sta nella pillola: la pastiglia in basso a destra sarebbe un doppione */
@media (min-width:901px){body>.kp-avvio{display:none!important}}
.lw-nav a:focus-visible,.lw-nav button:focus-visible,.lw-menu a:focus-visible{outline:2px solid var(--lw-go);outline-offset:3px}
.lw-burger{display:none;width:42px;height:42px;border:0;border-radius:12px;background:transparent;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0}
.lw-burger i{display:block;width:18px;height:1.5px;background:var(--lw-ink);transition:transform .3s}
html.lw-aperto .lw-burger i:first-child{transform:translateY(3.25px) rotate(45deg)}
html.lw-aperto .lw-burger i:last-child{transform:translateY(-3.25px) rotate(-45deg)}
.lw-menu{position:fixed;z-index:1499;left:50%;transform:translate(-50%,-8px);top:calc(env(safe-area-inset-top,0px) + 86px);width:min(1180px,calc(100% - 32px));
  border-radius:18px;border:1px solid var(--lw-line);background:rgba(255,255,255,.86);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  padding:10px;display:none;flex-direction:column;gap:2px;opacity:0;transition:opacity .25s,transform .3s}
.lw-menu a{font-size:17px;padding:14px 12px;border-radius:12px}
.lw-menu a:not(.lw-btn):hover{background:rgba(22,22,26,.05)}
.lw-menu a[aria-current]:not(.lw-btn){background:rgba(22,22,26,.05)}
.lw-menu .lw-lang{padding:14px 12px;gap:10px}
.lw-menu .lw-lang a{padding:0;font-size:13px}
.lw-menu .lw-btn{margin-top:6px;font-size:15px;border-radius:12px;padding:15px 20px}
html.lw-aperto .lw-menu{display:flex;opacity:1;transform:translate(-50%,0)}

/* pagine statiche (case study, lavoriamo insieme...): un po' piu' d'aria sotto la pillola */
body:not(:has(#__nuxt)) main > section:first-child{padding-top:clamp(116px,10vw,140px)!important}

/* /works: niente filtro "ALL" in basso; al suo posto il selettore Grid / List / 3D
   (in alto al centro c'e' la pillola del menu). Su telefono il selettore sta gia'
   nella barra in basso insieme a "Raccontaci il progetto". */
.works-controls--bottom{display:none!important}
@media (min-width:768px){.works-controls--top{top:auto!important;bottom:31px!important}}
/* su telefono Grid / List / 3D e "Raccontaci il progetto" stanno nella stessa barra: tasti un po' piu' stretti */
@media (max-width:700px){html body .kb-barra .works-view-switch .works-view-switch__btn{padding-left:10px!important;padding-right:10px!important}}

@media (max-width:900px){
  .lw-links,.lw-nav .lw-lang{display:none}
  .lw-burger{display:flex}
  .lw-nav{padding-left:18px}
  .lw-nav .lw-btn{display:none}
}

/* ---------- le tre viste dei lavori: Grid, List, 3D (kreea-vista.js) ---------- */
/* il selettore resta fermo nel passaggio tra /works e /works/3d */
.works-controls--top .works-view-switch,.lw-vista{view-transition-name:lw-vista}
::view-transition-group(lw-vista){animation-duration:.45s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
/* tra una vista e l'altra solo una dissolvenza, come da Grid a List */
html.lw-vt-vista::view-transition-old(root){animation:lw-vt-sfuma-via .3s ease both}
html.lw-vt-vista::view-transition-new(root){animation:lw-vt-sfuma-dentro .4s ease both}
@keyframes lw-vt-sfuma-via{to{opacity:0}}
@keyframes lw-vt-sfuma-dentro{from{opacity:0}}

/* nel 3D i tasti originali Rings/Spiral restano in pagina (sono loro che la scena ascolta) ma non si vedono */
html.lw-p3d .layout-switch:not(.lw-vista){position:fixed!important;left:-9999px!important;top:auto!important;opacity:0!important;pointer-events:none!important}
html.lw-p3d .home-footer__center{visibility:hidden!important}

.lw-vista{position:fixed;left:50%;bottom:31px;transform:translateX(-50%);z-index:1000;display:inline-flex;align-items:center;gap:4px;padding:5px;border-radius:999px;
  background:rgba(28,28,28,.1);border:1px solid hsla(0,0%,100%,.18);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  font-family:Inter,system-ui,sans-serif;font-size:16px;opacity:0;transition:opacity .5s ease;box-sizing:border-box}
.lw-vista.is-visible{opacity:1}
.lw-vista *{box-sizing:border-box}
.lw-vista .works-view-switch__pill{position:absolute;top:5px;bottom:5px;left:5px;border-radius:999px;background:rgba(13,13,13,.12);pointer-events:none}
.lw-vista .works-view-switch__btn{position:relative;z-index:1;background:transparent;border:0;border-radius:999px;color:rgba(13,13,13,.55);cursor:pointer;
  font:inherit;font-size:14px;line-height:1;padding:13px 16px;text-transform:uppercase;text-decoration:none;letter-spacing:normal;display:inline-flex;align-items:center;white-space:nowrap;transition:color .22s ease}
.lw-vista a.works-view-switch__btn:hover{color:#0d0d0d}
.lw-vista .works-view-switch__btn.is-active{color:#0d0d0d;cursor:default}
.lw-vista .lw-3d{padding:6px 6px 6px 16px;gap:0}
/* le due forme: chiuse all'arrivo, poi la voce 3D si apre */
.lw-forme{display:inline-flex;gap:2px;padding:2px;border-radius:999px;background:rgba(255,255,255,.4);max-width:0;opacity:0;overflow:hidden;margin-left:0;
  transition:max-width .55s cubic-bezier(.22,1,.36,1),opacity .4s ease .1s,margin-left .55s cubic-bezier(.22,1,.36,1)}
.lw-vista.aperta .lw-forme{max-width:60px;opacity:1;margin-left:10px}
.lw-forma{width:24px;height:24px;flex:none;border-radius:50%;border:0;padding:0;background:transparent;display:grid;place-items:center;color:rgba(13,13,13,.5);cursor:pointer;transition:background .25s,color .25s,box-shadow .25s}
.lw-forma svg{width:14px;height:14px;display:block}
.lw-forma:hover{color:#0d0d0d}
.lw-forma.is-on{background:#fff;color:#0d0d0d;box-shadow:0 1px 4px rgba(13,13,13,.18)}
.lw-forma:focus-visible,.lw-vista a:focus-visible{outline:2px solid #3fb950;outline-offset:2px}
/* su telefono il selettore sta nella barra in basso con "Raccontaci il progetto": la scritta 3D lascia il posto alle icone */
@media (max-width:700px){
  .kb-barra .lw-vista .lw-3d__testo{display:none}
  .kb-barra .lw-vista .lw-3d{padding:6px!important}
  .kb-barra .lw-vista.aperta .lw-forme{margin-left:0}
}
@media (prefers-reduced-motion:reduce){.lw-forme{transition:none}}
@media print{.lw-nav,.lw-menu{display:none}}