.hardware-accelerated { transform: translateZ(0); }
html, body { max-width: 100%; overflow-x: hidden; background-color: #e8e8e5; color: #111111; }
#fullscreen-menu { visibility: hidden; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.ambient-glow {
    background: radial-gradient(circle, rgba(142,179,83,0.55) 0%, rgba(142,179,83,0.15) 45%, transparent 70%) !important;
    mix-blend-mode: multiply;
}
.tech-grid {
    
    background-color: #e8e8e5;
    background-image: linear-gradient(#d4d4d0 1px, transparent 1px), linear-gradient(90deg, #d4d4d0 1px, transparent 1px);
    background-size: 50px 50px; background-position: center center; opacity: 0.3;
}
.intro-locked { overflow: hidden; height: 100vh; }

/* CLASSI TAILWIND MANCANTI DAL BUILD COMPILATO (app.css)
   app.css committato nel repo risulta non allineato ai template attuali:
   mancano diverse utility gia' in uso (poster delle card portfolio,
   overlay del modal, ambient-glow, ecc.), causando poster/loghi che
   appaiono senza sfondo. Rigenerare app.css con la pipeline Tailwind
   locale produce risultati incoerenti (perde classi diverse ad ogni
   build), quindi le aggiungiamo qui a mano finche' la build non viene
   sistemata separatamente. */
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); }
.from-white { --tw-gradient-from: #fff var(--tw-gradient-from-position); --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.via-white { --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #fff var(--tw-gradient-via-position), var(--tw-gradient-to); }
.to-stonebg { --tw-gradient-to: #e8e8e5 var(--tw-gradient-to-position); }
.from-ink\/90 { --tw-gradient-from: rgb(17 17 17 / 0.9) var(--tw-gradient-from-position); --tw-gradient-to: rgb(17 17 17 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.via-ink\/80 { --tw-gradient-to: rgb(17 17 17 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgb(17 17 17 / 0.8) var(--tw-gradient-via-position), var(--tw-gradient-to); }
.to-ink\/40 { --tw-gradient-to: rgb(17 17 17 / 0.4) var(--tw-gradient-to-position); }
.object-contain { object-fit: contain; }
.line-clamp-4 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.pb-16 { padding-bottom: 4rem; }
.mt-0 { margin-top: 0px; }
.max-h-0 { max-height: 0px; }
.inset-x-4 { left: 1rem; right: 1rem; }
.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
.bg-ink\/40 { background-color: rgb(17 17 17 / 0.4); }
.text-ink\/15 { color: rgb(17 17 17 / 0.15); }
.text-ink\/50 { color: rgb(17 17 17 / 0.5); }
.text-white\/90 { color: rgb(255 255 255 / 0.9); }
.z-\[51\] { z-index: 51; }
.z-\[90\] { z-index: 90; }
.h-\[250\%\] { height: 250%; }
.h-\[50vw\] { height: 50vw; }
.w-\[50vw\] { width: 50vw; }
.top-1\/2 { top: 50%; }
.text-\[10px\] { font-size: 10px; }
.duration-\[4000ms\] { transition-duration: 4000ms; }
.rounded-t-\[4rem\] { border-top-left-radius: 4rem; border-top-right-radius: 4rem; }
.max-w-\[35\%\] { max-width: 35%; }
.max-h-\[35\%\] { max-height: 35%; }
.max-w-\[60\%\] { max-width: 60%; }
.max-h-\[60\%\] { max-height: 60%; }
.max-w-\[80\%\] { max-width: 80%; }
.max-h-\[80\%\] { max-height: 80%; }
.shadow-\[0_-20px_60px_rgba\(0\2c 0\2c 0\2c 0\.3\)\] { --tw-shadow: 0 -20px 60px rgba(0,0,0,0.3); --tw-shadow-colored: 0 -20px 60px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
.disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }
.disabled\:opacity-30:disabled { opacity: 0.3; }
.hover\:scale-\[1\.02\]:hover { --tw-scale-x: 1.02; --tw-scale-y: 1.02; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.-translate-x-1\/2 { --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.-translate-y-1\/2 { --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.-translate-y-1\/4 { --tw-translate-y: -25%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.translate-x-1\/4 { --tw-translate-x: 25%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.hero-brand-mark {
    opacity: 0;
    transform: translateY(9vh);
}
.hero-brand-mark-shape {
    width: min(85vw, 56rem);
    height: min(85vw, 56rem);
    background: radial-gradient(circle, #d4d4d0 50%, transparent 72%);
    -webkit-mask-image: url('vhs-assets-css-050dac95e1c2fecab9b19f31d7f1582c.svg');
    mask-image: url('vhs-assets-css-050dac95e1c2fecab9b19f31d7f1582c.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* TITOLI FLUIDI (md:text-5xl -> md:text-9xl)
   Questi breakpoint Tailwind saltano a una dimensione fissa gia' a 768px
   e la mantengono invariata fino a schermi 4K: su un laptop ~1280-1440px
   (es. MacBook Air 13") il testo risulta quindi sproporzionatamente grande
   rispetto a monitor piu' larghi, dove la stessa dimensione fissa e'
   relativamente piu' piccola. clamp() la fa scalare in continuo con la
   larghezza del viewport, raggiungendo la dimensione fissa originale solo
   intorno ai ~2200px. dsdsdsd */
@media (min-width: 768px) {
  .md\:text-5xl {
    font-size: clamp(1.75rem, 1.09rem + 1.39vw, 3rem);
  }

  .md\:text-6xl {
    font-size: clamp(2.2rem, 1.36rem + 1.74vw, 3.75rem);
  }

  .md\:text-7xl {
    font-size: clamp(2.6rem, 1.63rem + 2.08vw, 4.5rem);
  }

  .md\:text-8xl {
    font-size: clamp(3.5rem, 2.18rem + 2.78vw, 6rem);
  }

  .md\:text-9xl {
    font-size: clamp(4.65rem, 2.91rem + 3.71vw, 8rem);
  }
}

/* ANTI-FOUC */
.skip-intro #intro-bg-black,
.skip-intro #text-panic,
.skip-intro #text-nv { display: none !important; }
.skip-intro body.intro-locked { overflow: auto !important; height: auto !important; }
.skip-intro #real-header-logo,
.skip-intro #menu-toggle { opacity: 1 !important; }
.skip-intro #hero-brand-mark { opacity: 0.7 !important; }

/* Hero home: su mobile il titolo (text-8xl = 96px) usciva dallo schermo.
   Sotto i 768px la dimensione si adatta alla larghezza e le parole lunghe vanno a capo. */
@media (max-width: 767px) {
  .nv-hero-title {
    font-size: clamp(2.5rem, 11vw, 4.5rem);
    line-height: 1.1;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
}

/* Safari / WebKit: griglia card della home (stesse regole di layout.css).
   Solo con html.is-webkit (classe aggiunta da page.typoscript, headerData.101):
   gli altri browser non sono toccati. webkit-masonry.js sostituisce le colonne CSS
   con colonne flex (.nv-wk-col), cosi' le animazioni in hover restano quelle originali. */
html.is-webkit .nv-wk-masonry {
  -webkit-columns: auto;
  columns: auto;
  display: flex;
  align-items: flex-start;
}
html.is-webkit .nv-wk-masonry > .nv-wk-col {
  margin: 0; /* annulla space-y-* del contenitore sulle colonne */
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
/* Ogni card larga quanto la colonna: con aspect-ratio (es. aspect-square) WebKit
   altrimenti ricava la larghezza dall'altezza e la card invade la colonna vicina. */
html.is-webkit .nv-wk-masonry > .nv-wk-col > * {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
html.is-webkit #megacard .story-card {
  isolation: isolate;
}
/* Safari / WebKit: griglia loghi "Collaborazioni". Con 1fr WebKit allarga le colonne alla
   larghezza naturale delle immagini (griglia fuori dal riquadro, loghi enormi) e non risolve
   height:100% dell'immagine nel riquadro con aspect-ratio. Colonne minmax(0,1fr) e logo
   posizionato dentro il padding del riquadro. */
html.is-webkit .nv-logos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) {
  html.is-webkit .nv-logos__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  html.is-webkit .nv-logos__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
html.is-webkit .nv-logo-item {
  position: relative;
  min-width: 0;
}
html.is-webkit .nv-logo-item img {
  position: absolute;
  top: 0.75rem;
  bottom: 0.75rem;
  left: 1rem;
  right: 1rem;
  width: calc(100% - 2rem);
  height: calc(100% - 1.5rem);
}