/* webgl.css
   Solo regole necessarie alla nuova architettura WebGL.
*/

html,
body {
  margin: 0;
  width: 100%;
  min-height: 100%;
background-color: #242ADB;
}

body {
  overflow-x: hidden;
  font-family: "Google Sans Flex", sans-serif;
  font-size:13px;
}

/* ==================================================
   TYPOGRAPHY SYSTEM — DESKTOP
   Quattro pesi principali + cinque scale testuali.
================================================== */
:root {
  --type-size-ui: 0.85rem;
  --type-size-meta: 0.8rem;
  --type-size-body: 1.1rem;
  --type-size-body-md: 1.2rem;
  --type-size-body-lg: 1.3rem;

  --type-weight-body: 400;
  --type-weight-medium: 520;
  --type-weight-display: 580;
  --type-weight-ui: 650;
}

/*
  HOME: due stati netti dello scroll.
  Lo snap è applicato al viewport solo quando Barba imposta
  la classe is-page-home su <html>.
*/
html.is-page-home,
html.is-page-home body {
  scroll-snap-type: y mandatory;
}


/*
  COLORI GLOBALI PER NAMESPACE BARBA
  ---------------------------------
  Le classi vengono applicate a <html> da barba-set.js e restano
  corrette anche durante la navigazione senza ricaricamento pagina.
*/
html :where(h1, h2, h3, h4, p, a),
html svg :where(path, rect, circle, ellipse, polygon, polyline):not([fill="none"]) {
  transition:
    color 0.35s ease,
    fill 0.35s ease;
}

html.is-page-home :where(h1, h2, h3, h4, p, a) {
  color: #111 !important;
}

html.is-page-home svg :where(path, rect, circle, ellipse, polygon, polyline):not([fill="none"]) {
  fill: #111 !important;
}

html:is(.is-page-about, .is-page-works) :where(h1, h2, h3, h4, p, a) {
  color: #fafaf8 !important;
}

html:is(.is-page-about, .is-page-works) svg :where(path, rect, circle, ellipse, polygon, polyline):not([fill="none"]) {
  fill: #fafaf8 !important;
}

.global-webgl {
  position: fixed;
  inset: 0;
  display: block;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}

/*
  MOBILE HOME — VIRTUAL SCROLL
  ----------------------------
  Stesso principio usato nel vecchio Pixelismo:
  in Home mobile il documento NON scorre realmente. In questo modo
  Safari/Chrome non ricevono uno scroll verticale nativo e la barra
  URL/search non viene ritratta durante il gesto.

  --mobile-vh-lock viene impostata da scena-about.js al viewport iniziale
  con la browser bar visibile e cambia soltanto a una vera rotazione.
*/
@media (max-width: 820px) {
  html.is-mobile-virtual-scroll,
  html.is-mobile-virtual-scroll body {
    height: 100%;
    overflow: hidden !important;
    overscroll-behavior: none;
    touch-action: none;
  }

  html.is-mobile-virtual-scroll .page-home {
    position: relative;
    height: calc(var(--mobile-vh-lock, 100svh) * 2);
    min-height: 0;
    overflow: visible;
    will-change: transform;
  }

  html.is-mobile-virtual-scroll .page-home .intro,
  html.is-mobile-virtual-scroll .page-home .home-works {
    height: var(--mobile-vh-lock, 100svh);
    min-height: var(--mobile-vh-lock, 100svh);
    scroll-snap-align: none;
    scroll-snap-stop: normal;
  }

  html.is-mobile-virtual-scroll .global-webgl,
  html.is-mobile-virtual-scroll .physics-hit-area {
    height: var(--mobile-vh-lock, 100svh) !important;
  }
}

/*
  Durante il passaggio progetto il canvas deve restare sopra sia al vecchio
  sia al nuovo container Barba. Menu e logo restano comunque superiori.
*/

.page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
}

.physics-hit-area {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: auto;
}

.home-copy,
.about-copy {
  position: relative;
  z-index: 3;
}

.home-copy {
  width: 100%;
  display: flex;
  padding-top: calc(2rem + 12px);
  justify-content: center;
  z-index: 99999;
}

.home-copy h3 {
  margin: 0;

  font-family: "Google Sans Flex", sans-serif;

  font-size: clamp(2rem, 1.47vw, 1.875rem);
  line-height: 1.1;

/*  font-weight: var(--type-weight-body); */
  font-weight: var(--type-weight-medium);
  letter-spacing: -0.015em;

  font-optical-sizing: auto;
}

.home-copy h1 .line {
  padding-bottom: 0.10em;
  margin-bottom: -0.10em;
}

.home-servizi {
  width: 100%;
  display: flex;
  padding-top: calc(2rem + 12px);
  justify-content: center;
  z-index: 99999;
}

.home-servizi ul {
  list-style-type:none;
  margin: 0;
    font-size: 1rem;
      line-height:1.1;
}

ul.home-servizi li {
  list-style-type:none;
  font-weight: var(--type-weight-body);
  margin:0;
}

.about-copy {
  padding: 2rem;
}

/*
  Il rettangolo centrale è solo l'hit target DOM.
  Il contenuto visivo del rettangolo viene disegnato dal canvas.
*/
.scene-portal {
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(520px, 56vw);
  aspect-ratio: 1.55 / 1;
  transform: translate(-50%, -50%);
  padding: 0;
  border: 0;
  background: transparent;

  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 30px;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 99999;
}

html.is-page-home .scene-portal {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* HOME — custom cursor sul portale */
.scene-portal__cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100000;

  width: 0;
  height: 0;

  pointer-events: none;
  user-select: none;

  opacity: 0;
  visibility: hidden;

  transform: translate3d(-100px, -100px, 0);

  transition:
    opacity 0.16s ease,
    visibility 0.16s step-end;

  will-change: transform, opacity;
}

.scene-portal__cursor-inner {
  position: absolute;
  left: 0;
  top: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 50px;
  height: 50px;

  box-sizing: border-box;
  border-radius: 50%;

  background: #fafaf8;
  color: #111;

  font-family: "Google Sans Flex", sans-serif;
  font-size: 0.65rem;
  line-height: 1;
  font-weight: var(--type-weight-ui);
  letter-spacing: 0.06em;

  transform: translate(-50%, -50%) scale(0);

  transition:
    transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);

  will-change: transform;
}

.scene-portal__cursor.is-visible {
  opacity: 1;
  visibility: visible;

  transition:
    opacity 0.16s ease,
    visibility 0s step-start;
}

.scene-portal__cursor.is-visible
.scene-portal__cursor-inner {
  transform: translate(-50%, -50%) scale(1);
}

@media (pointer: fine) {
  html.is-page-home .scene-portal {
    cursor: none;
  }
}

@media (pointer: coarse) {
  .scene-portal__cursor {
    display: none;
  }
}


.scene-portal__label {
  position: absolute;
  left: 1rem;
  bottom: 1rem;

  display: grid;
  grid-template-areas: "label";
  height: 1em;
  overflow: hidden;

  font-family: "Google Sans Flex", sans-serif;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0.04em;
  font-weight: bold;
  color: #fafaf8;
  mix-blend-mode: difference;
  pointer-events: none;

}

/*
  PORTAL LABEL — stesso rollover verticale di MENU / CHIUDI.
  ABOUT esce verso l'alto mentre WORKS entra dal basso, e viceversa.
*/
.scene-portal__label-item {
  grid-area: label;
  display: block;

  transition:
    transform 0.46s cubic-bezier(0.22, 1, 0.36, 1);

  will-change: transform;
}

.scene-portal__label-item--about {
  transform: translate3d(0, 0, 0);
}

.scene-portal__label-item--works {
  transform: translate3d(0, 115%, 0);
}

.scene-portal__label.is-works
.scene-portal__label-item--about {
  transform: translate3d(0, -115%, 0);
}

.scene-portal__label.is-works
.scene-portal__label-item--works {
  transform: translate3d(0, 0, 0);
}

/*
  Durante l'espansione del portale togliamo il DOM dalla scena
  senza toccare il canvas.
*/
html.is-opening-about .home-copy,
html.is-opening-works .home-copy {
  opacity: 0;
  transition: opacity 0.35s ease;
}

html.is-opening-about .scene-portal__label,
html.is-opening-works .scene-portal__label {
  opacity: 0;
  transition: opacity 0.2s ease;
}

@media (max-width: 820px) {
  .scene-portal {
    width: min(78vw, 460px);
  }

  .home-copy,
  .about-copy {
    padding: 1rem;
  }
}

/* focus outline globale rimosso */
*:focus,
*:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

button,
a,
input,
textarea,
select {
  -webkit-tap-highlight-color: transparent;
}

/*
  ABOUT -> HOME:
  il contenuto Home viene fatto entrare dal JS mentre
  il rettangolo RAW si restringe.
*/
html.is-returning-home .scene-portal__label {
  opacity: 0;
}

.home-copy,
.scene-portal__label {
  transition: opacity 0.35s ease;
}


.intro {
  position: relative;
  min-height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.home-works {
  position: relative;
  min-height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

html.is-home-works .physics-hit-area {
  pointer-events: none;
}

html.is-home-works .home-copy {
  opacity: 0;
  pointer-events: none;
}

html.is-home-works .scene-portal__label {
  color: #fafaf8;
}

html.is-home-works .menu a {
  color: #111;
}

html.is-home-works .logo path {
  fill: #111;
}


.page-works {
  min-height: 100vh;
  cursor: grab;
  touch-action: none;
}


html.is-grid-dragging,
html.is-grid-dragging body,
html.is-grid-dragging .page-works {
  cursor: grabbing;
  user-select: none;
}


.logo {
  position: fixed;
  left: 3rem;
  top: calc(2rem + 12px);
  z-index: 9999;
  width: 140px;
}


/* ==================================================
   PERSISTENT NAV — CTA + MENU TOGGLE + PANEL
================================================== */

.site-nav {
  position: fixed;
  right: 3rem;
  top: 2rem;
  z-index: 9999;

  display: flex;
  align-items: flex-start;
  gap: 10px;

  font-family: "Google Sans Flex", sans-serif;
}

.site-nav__menu-wrap {
  position: relative;
}


/* ----------------------------------
   SHARED PILL BASE
---------------------------------- */

.site-nav__cta,
.site-nav__toggle {
  position: relative;
  z-index: 2;

  display: block;
  overflow: hidden;

  margin: 0;
  padding: 12px 25px;

  border: 0;
  border-radius: 100px;

  font: inherit;
  font-size: var(--type-size-ui);
  line-height: 1;
  font-weight: var(--type-weight-ui);

  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;

  transition: color 0.4s ease;
}

.site-nav__cta::before,
.site-nav__toggle::before {
  content: "";

  position: absolute;
  inset: 0;

  border-radius: inherit;

  transform: scaleY(0);
  transform-origin: bottom;

  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);

  z-index: -1;
}


/* ----------------------------------
   START A PROJECT
   #111 / #fafaf8
   Hover: colori invertiti.
---------------------------------- */

a.site-nav__cta {
  background: #111;
  color: #fafaf8 !important;
}

.site-nav__cta::before {
  background: #242ADB;
}

.site-nav__cta:hover::before,
.site-nav__cta:focus-visible::before {
  transform: scaleY(1);
}

html .site-nav__cta:hover,
html .site-nav__cta:focus-visible {
  color: #fafaf8 !important;
}


/* ABOUT / WORKS:
   CTA chiara; in hover torna blu con testo chiaro. */
html:is(
  .is-page-about,
  .is-page-works
) a.site-nav__cta {
  background: #fafaf8;
  color: #111 !important;
}

html:is(
  .is-page-about,
  .is-page-works
) a.site-nav__cta:hover,
html:is(
  .is-page-about,
  .is-page-works
) a.site-nav__cta:focus-visible {
  color: #fafaf8 !important;
}


/* ----------------------------------
   MENU TOGGLE
   Mantiene l'impostazione pillola attuale.
---------------------------------- */

.site-nav__toggle {
  background: #fafaf8;
  color: #111 !important;
}

.site-nav__toggle::before {
  background: #242ADB;
}

/* Testo MENU / CHIUDI: rollover verticale.
   Le due parole occupano la stessa cella, quindi la pillola non cambia larghezza. */
.site-nav__toggle-text {
  position: relative;

  display: grid;
  grid-template-areas: "label";

  height: 1em;
  overflow: hidden;

  line-height: 1;
}

.site-nav__toggle-label {
  grid-area: label;

  display: block;

  transition:
    transform 0.46s cubic-bezier(0.22, 1, 0.36, 1);

  will-change: transform;
}

.site-nav__toggle-label--menu {
  transform: translate3d(0, 0, 0);
}

.site-nav__toggle-label--close {
  transform: translate3d(0, 115%, 0);
}

.site-nav.is-open
.site-nav__toggle-label--menu {
  transform: translate3d(0, -115%, 0);
}

.site-nav.is-open
.site-nav__toggle-label--close {
  transform: translate3d(0, 0, 0);
}


.site-nav__toggle:hover::before,
.site-nav__toggle:focus-visible::before,
.site-nav.is-open .site-nav__toggle::before {
  transform: scaleY(1);
}

html .site-nav__toggle:hover,
html .site-nav__toggle:focus-visible,
html .site-nav.is-open .site-nav__toggle {
  color: #fafaf8 !important;
}

html:is(
  .is-page-about,
  .is-page-works
) .site-nav__toggle {
  background: #151515;
  color: #fafaf8 !important;
}

/* HOME / PROJECT: menu chiaro anche nello stato aperto. */
html:is(
  .is-page-home,
  .is-page-project
) .site-nav.is-open .site-nav__toggle {
  background: #fafaf8;
  color: #111 !important;
}

html:is(
  .is-page-home,
  .is-page-project
) .site-nav.is-open .site-nav__toggle::before {
  transform: scaleY(0);
}


/* ----------------------------------
   MENU PANEL
   Desktop: fascia orizzontale ampia ma più leggera.
---------------------------------- */

.site-nav__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;

  width: calc(100vw - 6rem);
  height: auto;

  padding: 20px 22px 22px;
  box-sizing: border-box;

  border-radius: 18px;
  background: #fafaf8;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateY(-6px);
  transform-origin: top right;

  transition:
    opacity 0.24s ease,
    visibility 0.24s ease,
    transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);

  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.08);

  overflow: hidden;
}

.site-nav.is-open .site-nav__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transform: translateY(0);
}


/* ABOUT / WORKS:
   pannello #111 con link chiari sulle pagine scure. */
html:is(
  .is-page-about,
  .is-page-works
) .site-nav__panel {
  background: #111;
}


/* ----------------------------------
   MENU LINKS
---------------------------------- */

ul.menu {
  position: static;

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;

  width: 100%;

  margin: 0;
  padding: 0;
  padding-left: 2rem;
  padding-right: 2rem;
  box-sizing: border-box;

  border-radius: 0;
}

ul.menu li {
  position: relative;

  width: auto;
  overflow: visible;

  margin: 0;
  padding: 0;

  list-style: none;
  border-radius: 0;
  background: transparent;
}

ul.menu li:nth-child(1) {
  justify-self: start;
}

ul.menu li:nth-child(2),
ul.menu li:nth-child(3) {
  justify-self: center;
}

ul.menu li:nth-child(4) {
  justify-self: end;
}

/* Nessun fill/pill sui singoli link. */
ul.menu li::before {
  display: none;
}

ul.menu li a {
  position: relative;

  display: inline-flex;
  align-items: center;
  width: auto;

  margin: 0;
  padding: 0;

  font-size: clamp(1.95rem, 2.75vw, 3.1rem);
  line-height: 0.94;
  font-weight: bold;
  letter-spacing: -0.05em;

  color: #111 !important;
  text-decoration: none;
  text-transform: uppercase;

  transition:
    color 0.28s ease,
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.28s ease;

  transform: translateX(0);
}

/* Freccia hover sulle voci principali del menu.
   Usiamo l'SVG come mask: il colore segue currentColor del link, quindi
   #111 sul pannello chiaro e #fafaf8 sui pannelli scuri. */
ul.menu li a:is(
  [data-nav-target="home"],
  [data-nav-target="about"],
  [data-nav-target="works"],
  [data-nav-target="contact"]
)::after {
  content: "";
  display: inline-block;
  flex: 0 0 auto;

  width: 0;
  height: 15px;
  margin-left: 0;

  background: currentColor;
  -webkit-mask: url("freccia-voci-menu.svg") center / contain no-repeat;
  mask: url("freccia-voci-menu.svg") center / contain no-repeat;

  opacity: 0;
  transform: translate3d(-8px, 0, 0);
  transform-origin: left center;

  transition:
    width 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    margin-left 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.2s ease,
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

ul.menu li:hover a:is(
  [data-nav-target="home"],
  [data-nav-target="about"],
  [data-nav-target="works"],
  [data-nav-target="contact"]
)::after,
ul.menu li:focus-within a:is(
  [data-nav-target="home"],
  [data-nav-target="about"],
  [data-nav-target="works"],
  [data-nav-target="contact"]
)::after {
  width: 28px;
  margin-left: 12px;
  opacity: 1;
  transform: translate3d(0, 0, 0);
}



ul.menu li:hover a,
ul.menu li:focus-within a {
  color: #111 !important;
  transform: translateX(6px);
}


html:is(
  .is-page-about,
  .is-page-works
) ul.menu li a {
  color: #fafaf8 !important;
}

html:is(
  .is-page-about,
  .is-page-works
) ul.menu li:hover a,
html:is(
  .is-page-about,
  .is-page-works
) ul.menu li:focus-within a {
  color: #fafaf8 !important;
}

/* La pagina corrente resta leggibile ma un po' più quieta.
   Per HOME / ABOUT / WORKS / CONTACT mostriamo la freccia PRIMA della voce,
   con la stessa opacità del testo. La voce corrente non ha hover attivo. */
ul.menu li a[aria-current="page"] {
  opacity: 0.34;
  transform: translateX(0);
}

ul.menu li a[aria-current="page"]:is(
  [data-nav-target="home"],
  [data-nav-target="about"],
  [data-nav-target="works"],
  [data-nav-target="contact"]
)::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;

  width: 28px;
  height: 15px;
  margin-right: 12px;

  background: currentColor;
  -webkit-mask: url("freccia-voci-menu.svg") center / contain no-repeat;
  mask: url("freccia-voci-menu.svg") center / contain no-repeat;
}

/* La voce corrente non deve attivare la freccia DOPO il testo. */
ul.menu li a[aria-current="page"]::after,
ul.menu li:hover a[aria-current="page"]::after,
ul.menu li:focus-within a[aria-current="page"]::after {
  width: 0;
  margin-left: 0;
  opacity: 0;
  transform: translate3d(-8px, 0, 0);
}

/* Nessun cambio di opacità / spostamento in hover sulla voce corrente. */
ul.menu li:hover a[aria-current="page"],
ul.menu li:focus-within a[aria-current="page"] {
  opacity: 0.34;
  transform: translateX(0);
}


@media (prefers-reduced-motion: reduce) {
  .site-nav__toggle-label,
  .scene-portal__label-item,
  ul.menu li a:is(
    [data-nav-target="home"],
    [data-nav-target="about"],
    [data-nav-target="works"],
    [data-nav-target="contact"]
  )::after {
    transition: none !important;
  }
}





.desc-home {
  max-width:30vw;
  font-size: var(--type-size-body);
  font-weight: var(--type-weight-body);
  position: absolute;
  bottom:2rem;
  left:3rem;
  z-index: 1;

}

.desc-home h1 {
  font-size: var(--type-size-body);
  font-weight: var(--type-weight-body);
}


.reveal-text {
  visibility: hidden;
}

.line {
  position: relative;
  overflow: hidden;
  display: flex;
}


.desc-home-works {
  max-width:30vw;
  font-size: var(--type-size-body);
  font-weight: var(--type-weight-body);
  position: absolute;
  bottom:2rem;
  left:3rem;
  z-index: 1;
}



.lista-home {
  display:flex;
  justify-content: space-between;
  list-style-type: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  box-sizing: border-box;
}

.lista-home li {
  list-style-type: none;
}



/* --------------------------------------------------
   WORKS — INDICATORE SCROLL CAROUSEL
   Riferimento visivo: aircord / Projects.

   11 rettangoli = 11 progetti.
   La luminosità dei bordi viene aggiornata dal JS in modo continuo
   in base alla posizione reale del carousel, quindi durante wheel,
   drag e inerzia il focus scorre tra una cella e la successiva.
-------------------------------------------------- */

.works-scroll-indicator {
  --indicator-cell-width: clamp(10px, 2.8vw, 22px);
  --indicator-cell-height: clamp(8px, 1.5vw, 12px);
  --indicator-gap: clamp(3px, 0.8vw, 6px);
  --indicator-cap-gap: clamp(6px, 1vw, 9px);

  position: fixed;
  left: 50%;
  bottom: clamp(16px, 3vw, 28px);
  z-index: 20;

  display: flex;
  align-items: center;
  justify-content: center;

  pointer-events: none;
  user-select: none;

  opacity: 0;
  visibility: hidden;

  transform: translate3d(-50%, 6px, 0);

  transition:
    opacity 0.32s ease,
    transform 0.48s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.32s step-end;

  will-change:
    opacity,
    transform;
}

.works-scroll-indicator.is-visible {
  opacity: 1;
  visibility: visible;

  transform:
    translate3d(-50%, 0, 0);

  transition:
    opacity 0.32s ease,
    transform 0.48s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s step-start;
}

.works-scroll-indicator.is-immediate {
  transition: none !important;
}

.works-scroll-indicator__track {
  display: flex;
  align-items: center;
  gap: var(--indicator-gap);
}

.works-scroll-indicator__cap {
  display: block;
  flex: 0 0 auto;

  width: 1px;
  height: var(--indicator-cell-height);

  background:
    rgba(244, 244, 237, 0.86);

  transform: scaleY(0);
  transform-origin: center;

  transition:
    transform 0.46s cubic-bezier(0.22, 1, 0.36, 1);
}

.works-scroll-indicator__cap:first-child {
  margin-right:
    var(--indicator-cap-gap);
}

.works-scroll-indicator__cap:last-child {
  margin-left:
    var(--indicator-cap-gap);
}

.works-scroll-indicator.is-visible
.works-scroll-indicator__cap {
  transform: scaleY(1);
}

.works-scroll-indicator__item {
  --indicator-opacity: 0.18;
  --indicator-index: 0;

  display: block;
  flex: 0 0 auto;

  width:
    var(--indicator-cell-width);

  height:
    var(--indicator-cell-height);

  box-sizing: border-box;

  border:
    1px solid
    rgba(
      244,
      244,
      237,
      var(--indicator-opacity)
    );

  background: transparent;

  transform: scaleX(0.16);
  transform-origin: center;

  transition:
    transform 0.52s cubic-bezier(0.22, 1, 0.36, 1);

  transition-delay:
    calc(
      var(--indicator-index) *
      16ms
    );

  will-change:
    border-color,
    transform;
}

.works-scroll-indicator.is-visible
.works-scroll-indicator__item {
  transform: scaleX(1);
}


/* Su schermi piccoli conserviamo la stessa grammatica, ma con linee più fini. */
@media (max-width: 600px) {
  .works-scroll-indicator__cap {
    width: 1px;
  }

  .works-scroll-indicator__item {
    border-width: 1px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .works-scroll-indicator,
  .works-scroll-indicator__cap,
  .works-scroll-indicator__item {
    transition: none !important;
  }
}

/* --------------------------------------------------
   PRELOADER INIZIALE — LoadingManager Three.js
   Markup in index.html, stile qui, logica/progresso nel JS.
-------------------------------------------------- */

html.is-experience-loading,
html.is-experience-loading body {
  overflow: hidden !important;
}

.experience-loader {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 999999;

  display: block;

  width: 100vw;
  height: 100vh;
  transform: translate(-50%, -50%);
  overflow: hidden;
  box-sizing: border-box;

  border-radius: 0;

  background: #000;
  color: #fafaf8;

  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  /*
    100% -> PORTALE:
    prima cambiano soltanto dimensioni e radius del pannello nero.
    L'opacità resta 1 durante tutto il restringimento.
    Solo la classe is-complete avvia il fade finale.
  */
  transition:
    width 0.9s cubic-bezier(0.76, 0, 0.24, 1),
    height 0.9s cubic-bezier(0.76, 0, 0.24, 1),
    border-radius 0.9s cubic-bezier(0.76, 0, 0.24, 1),
    opacity 0.42s ease,
    visibility 0.42s step-end;

  will-change:
    width,
    height,
    border-radius,
    opacity;
}

.experience-loader.is-collapsing {
  width:
    var(
      --experience-loader-target-width,
      min(520px, 56vw)
    );

  height:
    var(
      --experience-loader-target-height,
      calc(min(520px, 56vw) / 1.55)
    );

  border-radius:
    var(
      --experience-loader-target-radius,
      30px
    );
}

.experience-loader.is-complete,
.experience-loader.is-fading {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/*
  Numero progressivo 000 -> 100.
  Ogni CIFRA ha il proprio rettangolo 3:2 orizzontale.
  Il gruppo resta centrato nel viewport durante tutto il caricamento.
*/
.experience-loader__counter {
  position: absolute;
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);

  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 0.9vw, 14px);

  opacity: 1;
  transition:
    opacity 0.22s ease,
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);

  pointer-events: none;
}

/*
  Il 100 resta leggibile prima della chiusura.
  Appena il pannello inizia a restringersi il contatore esce, evitando che
  venga tagliato dai bordi del rettangolo mentre converge verso il portale.
*/
.experience-loader.is-collapsing
.experience-loader__counter {
  opacity: 0;
  transform:
    translate(-50%, calc(-50% + 8px));
}

.experience-loader__digit {
  position: relative;

  width: clamp(86px, 8.5vw, 128px);
  aspect-ratio: 3 / 2;

  display: grid;
  place-items: center;

  box-sizing: border-box;
  pointer-events: none;
}

.experience-loader__digit-border {
  position: absolute;
  inset: 0;

  display: block;
  width: 100%;
  height: 100%;

  overflow: visible;
  pointer-events: none;
}

.experience-loader__digit-border path {
  fill: none;
  stroke: #fafaf8;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;

  /* Il bordo è visibile subito e resta fisso durante tutto il caricamento. */
  stroke-dasharray: none;
  stroke-dashoffset: 0;
}

.experience-loader__digit-value {
  position: relative;
  z-index: 1;

  font-family: "Google Sans Flex", sans-serif;
  font-size: clamp(3.4rem, 5.2vw, 5.2rem);
  font-weight: var(--type-weight-ui);
  line-height: 0.8;
  letter-spacing: -0.065em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;

  color: #fafaf8;
  white-space: nowrap;
}

/*
  È lo STESSO logo SVG della pagina, non una copia nel loader.
  Durante il caricamento resta già nella sua posizione definitiva in alto a sinistra.
*/
.logo {
  transition:
    left 0.82s cubic-bezier(0.22, 1, 0.36, 1),
    top 0.82s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.82s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.82s cubic-bezier(0.22, 1, 0.36, 1);
}

.logo svg {
  display: block;
  width: 100%;
  height: auto;
}

html.is-experience-loading .logo {
  /*
    Il loader non sposta né ridimensiona più il logo:
    resta fin dal primo frame nella posizione definitiva della Home,
    sia desktop sia mobile.
  */
  z-index: 1000000;
  transform: none;
}

html.is-experience-loading .logo path {
  fill: #f4f4f4 !important;
}

/*
  Quando il loader si richiude al centro lascia scoperta la Home.
  Il logo torna quindi scuro già durante il restringimento, non soltanto
  dopo la rimozione finale del loader.
*/
html.is-experience-loading.is-experience-loader-collapsing
.logo path {
  fill: #111 !important;
}

@media (max-width: 820px) {
  .experience-loader__counter {
    gap: clamp(6px, 2vw, 10px);
  }

  .experience-loader__digit {
    width: clamp(72px, 23vw, 96px);
  }

  .experience-loader__digit-value {
    font-size: clamp(3rem, 14vw, 4.6rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .experience-loader,
  .experience-loader__counter,
  .logo {
    transition: none !important;
  }
}



.desc-progetti-works {
  position: fixed;
  bottom:3rem;
  left:3rem;
  width: 40vw;
}

 .desc-progetti-works h2 {
  font-size: 3rem;
  line-height: 1.1;
  font-weight: bold;
  margin: 0;
}


 .desc-progetti-works p {
  font-size: var(--type-size-body);
  line-height: 1.2;
  font-weight: var(--type-weight-body);
}



.works-titolo {
  width: 100%;
  display: flex;
  padding-top: calc(2rem + 12px);
  justify-content: center;
  position: fixed;
  z-index: 99999;
}

.works-titolo h1 {
  margin: 0;

  font-family: "Google Sans Flex", sans-serif;

font-size: clamp(1.25rem, 1.47vw, 1.875rem);
  line-height: 1.1;

  font-weight: var(--type-weight-body);
  letter-spacing: -0.015em;

  font-optical-sizing: auto;
}


.works-titolo h1 .line {
  padding-bottom: 0.08em;
  margin-bottom: -0.12em;
}



.contenitore-about {
  display: flex;
  padding-left: 3rem;
  padding-right:3rem;
  	column-gap: 1rem; /* spazio tra colonne */
pointer-events: none;
align-items: center;
justify-content:center;
position: relative;
height:100vh;
}


.about-copy {
	grid-column: 3 / 11;
  padding-top: calc(2rem + 12px);
}


.about-copy h1 {
  font-size: 4rem;
  line-height: 1.03;
  margin: 0;
  letter-spacing: -0.035em;
  font-weight: var(--type-weight-body);
}

.about-copy h1 .line {
  padding-bottom: 0.07em;
  margin-bottom: -0.10em;
}

.primo-paragrafo-about {
  position: absolute;
  bottom:2rem;
  left: 3rem;
  z-index: 9999;
  max-width: 500px;
}

.primo-paragrafo-about p {
  font-size: var(--type-size-body);
  line-height:1.2;
  margin:0;
  font-weight: var(--type-weight-body);
  letter-spacing: -0.01em;

  font-optical-sizing: auto;
}


.metodo {
  padding-top: 10rem;
  z-index: 9999;
  color: #111;
  box-sizing:border-box;
  height:100vh;
}

.metodo h2 {
  margin: 0 0 1.5rem;

  font-size: 0.8rem;
  line-height: 1;

  font-weight: var(--type-weight-ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;

  font-optical-sizing: auto;
}

.metodo p {
  margin: 0;

  font-size: 2.5rem;
  line-height: 1.15;

  font-weight: 200;
  letter-spacing: -0.025em;

  font-optical-sizing: auto;
}

.metodo p .italic {
  display: inline-block;
  position: relative;

  border: 1px solid #fafaf8;

  padding: 0.01em 0.12em 0.04em;
  margin-inline: 0.03em;
border-radius: 6px;
  line-height: 0.95;
  box-sizing: border-box;
    font-weight: var(--type-weight-body);
}



.secondo-about {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18rem;
  padding-top: 200px;
  padding-bottom: 0px;
  pointer-events: none;
}



/* ==================================================
   ABOUT — HORIZONTAL PHOTO STORY
================================================== */

.about-horizontal {
  position: relative;

  /*
    L'altezza reale viene impostata dal JS in base
    alla distanza orizzontale da percorrere.
  */
  min-height: 100vh;

  scroll-snap-align: start;
  scroll-snap-stop: always;

  z-index: 2;
}

/*
  Durante About -> Home i due container Barba possono convivere
  per alcuni frame. La Home abilita lo scroll-snap sul viewport:
  in quel momento la vecchia gallery About non deve diventare
  accidentalmente uno snap target.
*/
html:not(.is-page-about) .about-horizontal {
  scroll-snap-align: none;
  scroll-snap-stop: normal;
}

.about-horizontal__viewport {
  position: sticky;
  top: 0;

  width: 100%;
  height: 100vh;

  overflow: hidden;

  perspective: 1400px;
  perspective-origin: 50% 50%;
}

.about-horizontal__track {
  position: relative;
  width: 240vw;
  height: 100vh;

  transform-style: preserve-3d;
}

.about-horizontal__shot {
  transform-style: preserve-3d;
  backface-visibility: hidden;
}


/* ----------------------------------
   IMMAGINI
   Nessun crop: ogni immagine mantiene
   il proprio aspect ratio originale.
---------------------------------- */

.about-horizontal__shot {
  position: absolute;
  margin: 0;

  height: auto;
  overflow: visible;

  will-change: transform;
}

.about-horizontal__shot img {
  position: relative;

  width: 100%;
  height: auto;

  display: block;
  max-width: none;

  pointer-events: none;
  border-radius: 20px;
}


/*
  Le sovrapposizioni sono intenzionali.
  Il data-about-parallax nel markup modifica la velocità
  orizzontale del singolo figure, quindi la distanza tra
  le immagini cambia durante lo scroll.
*/


/* 01 */
.about-horizontal__shot--01 {
  top: 7vh;
  left: 8vw;

  width: 30vw;
  z-index: 2;
}


/* 02 — sovrapposta alla 01 */
.about-horizontal__shot--02 {
  left: 40vw;
  bottom: 7vh;

  width: 20vw;
  z-index: 3;
}


/* 03 */
.about-horizontal__shot--03 {
  top: 19vh;
  left: 75vw;

  width: 32vw;
  z-index: 2;
}


/* 04 — sovrapposta alla 03 */
.about-horizontal__shot--04 {
  top: 35vh;
  left: 94vw;

  width: 18vw;
  z-index: 4;
}


/* 05 */
.about-horizontal__shot--05 {
  top: 5vh;
  left: 160vw;

  width: 23vw;
  z-index: 2;
}


/* 06 — sovrapposta alla 05 */
.about-horizontal__shot--06 {
  left: 175vw;
  bottom: 7vh;

  width: 33vw;
  z-index: 3;
}


/* 07 — chiusura grande */
.about-horizontal__shot--07 {
  top: 18vh;
  left: 240vw;

  width: 21vw;
  z-index: 2;
}


/* 08 */
.about-horizontal__shot--08 {
  top: 35vh;
  left: 220vw;

  width: 32vw;
  z-index: 4;
}


/* 09 — sovrapposta alla 08 */
.about-horizontal__shot--09 {
  left: 251vw;
  bottom: 6vh;

  width: 23vw;
  z-index: 2;
}


/* 10 — immagine principale del nuovo gruppo */
.about-horizontal__shot--10 {
  top: 15vh;
  left: 275vw;

  width: 30vw;
  z-index: 1;
}


/* 11 — chiusura */
.about-horizontal__shot--11 {
  top: 9vh;
  left: 321vw;

  width: 21vw;
  z-index: 2;
}


.about-horizontal__shot {
  position: absolute;
  margin: 0;
  height: auto;
  overflow: visible;

  isolation: isolate;

  box-shadow:
  0 18px 45px rgba(0, 0, 0, 0.42),
  0 40px 90px rgba(0, 0, 0, 0.26);
  will-change: transform;

}

.about-horizontal__shot img {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  max-width: none;

  filter: saturate(1);

  pointer-events: none;
}

.about-horizontal__shot::after {
  content: "";

  position: absolute;
  inset: 0;

  background: #242ADB;

  mix-blend-mode: color;
  opacity: 0;

  pointer-events: none;
  z-index: 2;
}


/* ==================================================
   ABOUT — SERVICES CYLINDER
   Ispirato al principio CSS 3D del reference Codrops:
   elementi disposti su un arco cilindrico e rotazione
   del gruppo in base allo scroll.
================================================== */

.about-cylinder {
  position: relative;

  /*
    L'altezza definitiva viene impostata dal JS:
    circa 100vh per ogni servizio.
  */
  min-height: 400vh;

  z-index: 3;

}

.about-cylinder__stage {
  position: sticky;
  top: 0;

  width: 100%;
  height: 100vh;

  overflow: hidden;

  display: grid;
  place-items: center;

  perspective: 1500px;
  perspective-origin: 50% 50%;
}

.about-cylinder__list {
  position: relative;

  width: 100%;
  height: 100%;

  transform-style: preserve-3d;
  transform-origin: 50% 50%;

  will-change: transform;
}

.about-cylinder__item {
  position: absolute;

  left: 50%;
  top: 50%;

  width: min(82vw, 1180px);

  margin: 0;

  box-sizing: border-box;

  text-align: center;

  transform-style: preserve-3d;
  transform-origin: 50% 50%;

  backface-visibility: hidden;

  opacity: 1;

  pointer-events: none;

  will-change:
    transform,
    opacity;

}

 .about-cylinder__eyebrow {
  margin: 0 0 1.2rem;

  font-size: var(--type-size-meta);
  line-height: 1;
  font-weight: var(--type-weight-ui);

  letter-spacing: 0.06em;
  text-transform: uppercase;

  opacity:
    calc(
      0.45 +
      var(--cylinder-depth, 0) *
      0.25
    );
}

.about-cylinder__item h2 {
  max-width: 760px;

  margin:
    0 auto
    1.4rem;

  font-size: clamp(2.7rem, 3.2vw, 3.2rem);
  line-height: 0.95;

  letter-spacing: -0.045em;
  font-weight: var(--type-weight-medium);

  font-optical-sizing: auto;
}

.about-cylinder__services {
  max-width: 760px;

  margin:
    0 auto
    1.25rem;

  font-size: var(--type-size-meta);
  line-height: 1.3;

  font-weight: var(--type-weight-medium);
  letter-spacing: 0.035em;

  text-transform: uppercase;

  font-optical-sizing: auto;
}

.about-cylinder__description {
  max-width: 620px;

  margin: 0 auto;

  font-size: var(--type-size-body);
  line-height: 1.35;

  font-weight: var(--type-weight-body);
  letter-spacing: -0.005em;

  font-optical-sizing: auto;
}

.about-cylinder__item:not(.is-active)
.about-cylinder__description {
  opacity: 0.72;
}

html:not(.is-page-about)
.about-cylinder {
  pointer-events: none;
}


/* ------------------------------
   ABOUT CYLINDER — MOBILE
------------------------------ */

@media (max-width: 820px) {
  .about-cylinder__stage {
    perspective: 950px;
  }

  .about-cylinder__item {
    width: 88vw;
  }

  .about-cylinder__eyebrow {
    margin-bottom: 0.9rem;

    font-size: 0.68rem;
  }

  .about-cylinder__item h2 {
    margin-bottom: 1rem;

    font-size:
      clamp(
        2.3rem,
        11vw,
        4.2rem
      );

    line-height: 0.92;
  }

  .about-cylinder__services {
    max-width: 34rem;

    margin-bottom: 0.9rem;

    font-size: 0.82rem;
    line-height: 1.25;
  }

  .about-cylinder__description {
    max-width: 31rem;

    font-size: 0.9rem;
    line-height: 1.35;
  }
}


/* --------------------------------------------------
   ABOUT CYLINDER — SMALL IMAGE PER ITEM
-------------------------------------------------- */

.about-cylinder__thumb {
  width: 150px;

  margin:
    0 auto
    1.25rem;

  padding: 0;

  overflow: hidden;

  pointer-events: none;
}

.about-cylinder__thumb img {
  display: block;

  width: 100%;
  height: auto;

  max-width: none;

  object-fit: contain;

  pointer-events: none;
  border-radius:6px;
}

@media (max-width: 820px) {
  .about-cylinder__thumb {
    width: clamp(64px, 18vw, 96px);

    margin-bottom: 1rem;
  }
}



.awards-clienti {
  padding: 200px 3rem;
padding-bottom: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 1rem;

  color: #fafaf8;
}


/* colonne */

.awards-list {
  grid-column: 1 / 6;
}

.clienti-list {
  grid-column: 7 / 13;
}



/* titoli */

.awards-clienti h2 {
  margin: 0 0 1.5rem;

  font-size: var(--type-size-ui);
  line-height: 1;

  font-weight: var(--type-weight-ui);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}


/* liste */

.awards-clienti ul {
  margin: 0;
  padding: 0;

  list-style: none;
}

.awards-clienti li {
  margin: 0;

  font-size: var(--type-size-body);
  line-height: 1.4;
  font-weight: var(--type-weight-body);

  list-style: none;
}


/* CLIENTI: 2 colonne */

.clienti-list ul {
  column-count: 2;
  column-gap: 2rem;
}

.clienti-list li {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}



/* ==================================================
   ABOUT — NEXT / SCROLL TO WORKS
   Stessa grammatica del "next project" dei case study.
================================================== */

.about-next {
  --about-next-progress: 0;

  position: relative;
  min-height: 150vh;

  color: #fafaf8;
  background: transparent;
}

.about-next__sticky {
  position: sticky;
  top: 0;

  display: grid;
  place-items: center;

  width: 100%;
  height: 100vh;
  padding: clamp(8rem, 12vw, 13rem) 3rem 3rem;

  box-sizing: border-box;
  overflow: hidden;
}

.about-next__inner {
  width: min(100%, 980px);
  text-align: center;
}

.about-next__label {
  margin: 0 0 1rem;

  font-size: var(--type-size-body-md);
  line-height: 1;
  font-weight: var(--type-weight-medium);
}

.about-next__title {
  display: inline-block;
  margin: 0;

  font-family: "Google Sans Flex", sans-serif;
  font-size: clamp(4rem, 7.8vw, 9.4rem);
  line-height: 0.82;
  font-weight: var(--type-weight-display);
  letter-spacing: -0.02em;

  color: #fafaf8 !important;
  text-decoration: none;
}

.about-next__hint {
  margin: 1.2rem 0 0;

  font-size: 0.74rem;
  line-height: 1;
  font-weight: var(--type-weight-medium);
  letter-spacing: 0.04em;
  text-transform: lowercase;

  opacity: 0.58;
  transition: opacity 0.25s ease;
}

html.is-about-next-armed .about-next__hint {
  opacity: 1;
}

.about-next__progress {
  width: min(320px, 34vw);
  margin: 2rem auto 0;
}

.about-next__progress-track {
  position: relative;
  display: block;

  width: 100%;
  height: 5px;
  overflow: hidden;

  border-radius: 5px;
  background: rgba(250, 250, 248, 0.22);
}

.about-next__progress-fill {
  position: absolute;
  inset: 0;

  display: block;
  background: #242ADB;;

  transform:
    scaleX(var(--about-next-progress));
  transform-origin: left center;

  will-change: transform;
}

@media (max-width: 820px) {
  .about-next {
    min-height: 145svh;
  }

  .about-next__sticky {
    height: 100svh;
    padding: 7rem 1rem 2rem;
  }

  .about-next__title {
    font-size: clamp(3.6rem, 16vw, 6.5rem);
  }

  .about-next__progress {
    width: min(280px, 72vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-next__hint {
    transition: none !important;
  }
}



.about-services {
  position: relative;
  z-index: 3;
padding-top: 300px;
  padding-top: 0;
  padding-bottom: clamp(12rem, 18vw, 22rem);
}


.about-services h3 {
  color: #fafaf0;
}


/* ==================================================
   STAGE
   GRIGLIA PRINCIPALE 12 COLONNE
================================================== */

.about-services__stage {
  position: relative;

  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1rem;

  align-items: start;

  width: 100%;

  padding: 0 3rem;

  box-sizing: border-box;
  overflow: visible;
}


/* ==================================================
   MODELLO 3D
   COLONNE 5 → 9
================================================== */

.about-services__media {
  position: sticky;
  top: 22vh;

  grid-column: 5 / 9;
  grid-row: 1;

  height: 56vh;
  min-height: 420px;
  max-height: 720px;

  align-self: start;

  cursor: grab;

  user-select: none;
  -webkit-user-select: none;

  touch-action: pan-y;

  background: transparent;

  border: 0;

  pointer-events: auto;


  z-index: 4;
}


.about-services__media.is-dragging {
  cursor: grabbing;
}


/* ==================================================
   LABEL DRAG
================================================== */

.about-services__drag-label {
  position: absolute;

  left: 50%;
  bottom: 1rem;

  transform: translateX(-50%);

  font-size: 0.65rem;
  line-height: 1;

  font-weight: var(--type-weight-ui);
  letter-spacing: 0.08em;

  white-space: nowrap;

  color: #fafaf0;

  opacity: 0;

  pointer-events: none;
}


/* ==================================================
   CONTENUTO
   OCCUPA TUTTE LE 12 COLONNE
================================================== */

.about-services__content {
  grid-column: 1 / 13;
  grid-row: 1;

  min-width: 0;

  padding: 0;
}


/* ==================================================
   SINGOLO SERVIZIO
================================================== */

.about-services__item {
  position: relative;

  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1rem;

  align-items: center;

  min-height: 58vh;

  opacity: 1;
  visibility: visible;

  transform: none;
}


.about-services__item + .about-services__item {
  margin-top: 4vh;
}


/* ==================================================
   SINISTRA
   TITOLO + SERVIZI
   COLONNE 1 → 5
================================================== */

.about-services__heading {
  grid-column: 2 / 5;

  align-self: center;

  min-width: 0;
}


.about-services__item h2 {
  margin: 0 0 1.5rem;

  font-size: 3rem;
  line-height: 0.98;

  font-weight: bold;
  letter-spacing: -0.01em;
text-align:right;
  font-optical-sizing: auto;
}


.about-services__services {
  max-width: 26rem;

  margin: 0;

  font-size: var(--type-size-meta);
  line-height: 1.4;

  font-weight: var(--type-weight-medium);
  letter-spacing: 0.025em;
text-align:right;
  text-transform: uppercase;
}

.about-services__services {
  max-width: 430px;

  margin-top: 1.4rem;

  font-size: 0.95rem;
  line-height: 1.3;

  font-weight: 580;
  letter-spacing: 0.015em;

  text-transform: uppercase;

  opacity: 0.88;
}


/* ==================================================
   DESTRA
   DESCRIZIONE
   COLONNE 9 → 13
================================================== */

.about-services__description {
  grid-column: 9 / 12;

  align-self: center;

  max-width: 500px;

  margin: 0;

  font-size: var(--type-size-body-lg);
  line-height: 1.35;

  font-weight: var(--type-weight-body);
  letter-spacing: -0.015em;

  opacity: 1;
  visibility: visible;

  transform: none;
}


.about-services__item.is-active,
.about-services__description.is-active {
  opacity: 1;
}


.about-services__counter,
.about-services__descriptions {
  display: none;
}



/* ==================================================
   ABOUT SERVICES — CUSTOM DRAG CURSOR
================================================== */

.about-services__cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10000;

  width: 0;
  height: 0;

  pointer-events: none;
  user-select: none;

  opacity: 0;
  visibility: hidden;

  transform: translate3d(-100px, -100px, 0);

  transition:
    opacity 0.16s ease,
    visibility 0.16s step-end;

  will-change: transform, opacity;
}

.about-services__cursor-inner {
  position: absolute;
  left: 0;
  top: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 50px;
  height: 50px;

  box-sizing: border-box;
  border-radius: 50%;

  border:1px solid white;
  color: #fafaf8;

  font-family: "Google Sans Flex", sans-serif;
  font-size: 0.65rem;
  line-height: 1;
  font-weight: var(--type-weight-ui);
  letter-spacing: 0.06em;

  transform: translate(-50%, -50%) scale(0);

  transition:
    transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);

  will-change: transform;
}

.about-services__cursor.is-visible {
  opacity: 1;
  visibility: visible;

  transition:
    opacity 0.16s ease,
    visibility 0s step-start;
}

.about-services__cursor.is-visible
.about-services__cursor-inner {
  transform: translate(-50%, -50%) scale(1);
}

.about-services__cursor.is-dragging
.about-services__cursor-inner {
  transform: translate(-50%, -50%) scale(0.88);
}

@media (pointer: fine) {
  .about-services__media,
  .about-services__media.is-dragging {
    cursor: none;
  }
}

@media (pointer: coarse) {
  .about-services__cursor {
    display: none;
  }
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 820px) {

  .about-services {
    padding-top: 7rem;
    padding-bottom: 9rem;
  }


  .about-services__stage {
    display: block;

    padding: 0 1rem;
  }


  /* 3D */

  .about-services__media {
    position: sticky;
    top: 14vh;

    width: 100%;

    height: 42vh;
    min-height: 280px;
    max-height: none;

    margin: 0 0 3rem;
  }


  /* CONTENT */

  .about-services__content {
    display: block;

    padding: 0;
  }


  /* ITEM */

  .about-services__item {
    display: block;

    min-height: 68vh;
  }


  .about-services__item + .about-services__item {
    margin-top: 0;
  }


  /* LEFT BLOCK */

  .about-services__heading {
    width: 100%;
  }


  .about-services__item h2 {
    max-width: 10ch;

    margin: 0 0 1.25rem;

    font-size: clamp(3rem, 13vw, 5rem);
  }


  .about-services__services {
    max-width: 32rem;

    margin-bottom: 2rem;
  }


  /* DESCRIPTION */

  .about-services__description {
    max-width: 34rem;

    margin: 0;
  }


  /* LABEL */

  .about-services__drag-label {
    bottom: 0;

    font-size: 0.62rem;
  }
}


.footer-contact {
  height: 100vh;
}


/* ==================================================
   PROJECT — TUTTE LE REGOLE CONSOLIDATE
   --------------------------------------------------
   Unico blocco CSS per pagina progetto, case study e
   transizioni Works <-> Project / Project <-> Project.
   Tenuto volutamente in fondo al file.
================================================== */

/* Canvas sopra ai container durante le transizioni progetto. */
html:is(.is-opening-project, .is-returning-project, .is-switching-project) .global-webgl {
  z-index: 10;
}

/* Colori della pagina progetto: limitati al container del progetto,
   così non sovrascrivono CTA e navigazione persistente. */
html.is-page-project .page-project :where(h1, h2, h3, h4, p, a) {
  color: #111 !important;
}

/* CTA SCRIVICI su Project: testo chiaro sul fondo #111. */
html.is-page-project a.site-nav__cta,
html.is-page-project a.site-nav__cta:hover,
html.is-page-project a.site-nav__cta:focus-visible {
  color: #fafaf0 !important;
}

html.is-page-project svg :where(path, rect, circle, ellipse, polygon, polyline):not([fill="none"]) {
  fill: #111 !important;
}

html.is-page-project .menu a {
  color: #111 !important;
}

html.is-page-project .logo path {
  fill: #111 !important;
}

/* Base pagina progetto. */
.page-project {
  min-height: 100vh;
  padding: 0;
  box-sizing: border-box;
  overflow: visible;
  background: transparent;
  color: #111;
  opacity: 1;
}

/* Titolo progetto legacy, mantenuto per compatibilità. */
.project-titolo {
  width: 100%;
  display: flex;
  padding-top: 7rem;
  justify-content: center;
  z-index: 99999;
}

.project-titolo h1 {
  margin: 0;
  font-size: 3rem;
  line-height: 0.8;
  font-weight: var(--type-weight-display);
}

/* Header progetto legacy / transizioni. */
.project-header {
  position: absolute;
  z-index: 3;
  left: 3rem;
  right: 3rem;
  bottom: 2rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin: 0;
  transition: opacity 0.25s ease;
}

.project-header h1 {
  margin: 0;
  font-size: clamp(3rem, 8vw, 9rem);
  line-height: 0.85;
  font-weight: var(--type-weight-display);
  letter-spacing: -0.06em;
}

.project-header p {
  max-width: 30rem;
  margin: 0;
  font-size: var(--type-size-meta);
  line-height: 1.25;
  font-weight: var(--type-weight-medium);
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

/* Hero base usata anche come target della transizione WebGL. */
.project-hero {
  position: relative;
  z-index: 2;
  grid-column: 3 / 11;
  width: 100%;
  min-width: 0;
  margin: 100px 0 0;
  overflow: hidden;
  background: transparent;
  box-sizing: border-box;
}

.project-hero-verticale {
  position: relative;
  z-index: 2;
  grid-column: 4 / 10;
  width: 100%;
  min-width: 0;
  margin: 100px 0 0;
  overflow: hidden;
  background: transparent;
  box-sizing: border-box;
}

.project-hero img,
.project-hero video {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  opacity: 1;
}

.contenitore-project {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 1rem;
  padding-top: 0;
  padding-bottom: 200px;
}

/* Works -> Project: il nuovo container viene fissato al viewport. */
html.is-opening-project .page-project {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100vh;
  margin: 0;
  scroll-behavior: auto;
}

/* Durante apertura/ritorno la cover DOM resta nascosta finché il WebGL non è pronto. */
html.is-opening-project .project-hero img,
html.is-opening-project .project-hero video,
html.is-returning-project .project-hero img,
html.is-returning-project .project-hero video {
  opacity: 0;
}

html.is-opening-project.is-project-cover-ready .project-hero img,
html.is-opening-project.is-project-cover-ready .project-hero video {
  opacity: 1;
}

html.is-opening-project .page-works,
html.is-opening-project .page-project,
html.is-returning-project .page-project {
  pointer-events: none;
}

html.is-returning-project .project-header {
  opacity: 0;
}

html.is-returning-project .scene-portal {
  pointer-events: none;
}

html.is-returning-project .scene-portal__label {
  opacity: 0;
}

/* L'indicatore Works non deve sovrapporsi alla cover durante il passaggio progetto. */
html.is-opening-project .works-scroll-indicator,
html.is-returning-project:not(.is-page-works) .works-scroll-indicator {
  opacity: 0;
  visibility: hidden;
}

/* --------------------------------------------------
   CASE STUDY EDITORIALE — griglia 12 colonne
-------------------------------------------------- */

html.is-page-project,
html.is-page-project body {
  scroll-snap-type: none;
  background: var(--project-page-bg, #e8e8e8);
}

/*
  Il background dei case study viene pilotato via data-color dal JS.
  La pagina copre il canvas durante lo scroll normale; nelle transizioni
  Works <-> Project il canvas torna comunque sopra grazie agli z-index esistenti.
*/
html.is-page-project .page-project {
  background: var(--project-page-bg, #e8e8e8);
}

a.back {
  position: fixed;
  top: 2rem;
  left: 50%;
  z-index: 999;
  transform: translateX(-50%);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;

  padding: 12px 25px;
  border-radius: 100px;
  background: #fafaf8;
  color: #111 !important;

  font-size: var(--type-size-ui);
  line-height: 1;
  font-weight: var(--type-weight-ui);
  text-decoration: none;
}

/*
  BACK — hover arrow
  Il bottone resta centrato mentre si allarga: l'icona passa da 0 a 28px
  in 0.3s e la freccia entra leggermente da destra verso sinistra.
*/
a.back .back__icon {
  display: block;
  flex: 0 0 auto;
  width: 0;
  height: 15px;
  margin-right: 0;
  overflow: hidden;
  opacity: 0;

  transition:
    width 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    margin-right 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.16s ease;
}

a.back .back__icon img {
  display: block;
  width: 28px;
  height: 15px;
  max-width: none;

  transform: translate3d(10px, 0, 0);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

a.back:hover .back__icon,
a.back:focus-visible .back__icon {
  width: 28px;
  margin-right: 10px;
  opacity: 1;
}

a.back:hover .back__icon img,
a.back:focus-visible .back__icon img {
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  a.back .back__icon,
  a.back .back__icon img {
    transition: none;
  }
}


.project-case {
  --project-grid-gutter: 3rem;
  --project-grid-gap: 1rem;
  --project-media-radius: 12px;

  position: relative;
  z-index: 2;
  width: 100%;
  overflow: clip;
  background: transparent;
  color: #111;
}

.project-case :where(h1, h2, p, a, span) {
  color: #111 !important;
}

.project-case :where(img, video) {
  border-radius: 12px;
}

/* Base condivisa per tutti i moduli sulla griglia. */
.project-case__grid,
.project-case__section,
.project-case__intro,
.project-case__media-cluster,
.project-case__band {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--project-grid-gap);
  padding-left: var(--project-grid-gutter);
  padding-right: var(--project-grid-gutter);
  box-sizing: border-box;
}

/* --------------------------------------------------
   01 / INTRO
   contenuto centrale: colonne 3 → 11
-------------------------------------------------- */

.project-case__intro {
  min-height: clamp(260px, 32vh, 380px);
  padding-top: 240px;
  padding-bottom: clamp(3.5rem, 7vh, 6rem);
  align-items: center;
}

.project-case__intro-inner {
  grid-column: 2 / 12;
  width: 100%;
  min-width: 0;
  text-align: left;
}

.project-case__intro h1 {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;

  font-family: "Google Sans Flex", sans-serif;
  font-size: clamp(3.9rem, 6vw, 7.4rem);
  line-height: 0.82;
  font-weight: var(--type-weight-display);
  letter-spacing: -0.02em;
  font-optical-sizing: auto;
  text-align: left;
}

.project-case__intro .project-case__lead {
  width: fit-content;
  max-width: 39rem;
  margin: clamp(1.5rem, 3vh, 2.5rem) auto 0;

  font-size: 1.1rem;
  line-height: 1.08;
  font-weight: var(--type-weight-body);
  letter-spacing: 0;
  text-align: center;
}

.project-case__services {
  width: fit-content;
  max-width: 42rem;
  margin: clamp(2rem, 4vh, 3.25rem) auto 0;
  text-align: center;
  text-transform: uppercase;
}

.project-case__services p {
  margin: 0;
  font-size: var(--type-size-meta);
  line-height: 1.2;
  font-weight: var(--type-weight-medium);
}

/* --------------------------------------------------
   02 / HERO — TARGET WORKS -> PROJECT
   full bleed = tutte le 12 colonne
-------------------------------------------------- */


.griglia-progetto {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 1rem;
}



.project-case .project-hero {
  position: relative;
  z-index: 2;
grid-column: 2 / 12;
  height: auto;
  margin: 0;
  overflow: hidden;
  background: #111;
  box-sizing: border-box;
  border-radius: 12px;
}

.project-case .project-hero img,
.project-case .project-hero video {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: inherit;
}

.testo-obiettivo {
  padding-top: 150px;
}

.testo-obiettivo h2{
grid-column: 2 / 3;
margin: 0;
font-size: var(--type-size-ui);
line-height: 1;
font-weight: var(--type-weight-ui);
letter-spacing: 0.07em;
text-transform: uppercase;
}

.testo-obiettivo p{
grid-column: 7 / 12;
font-size: 1.05rem;
line-height: 1.25;
font-weight: var(--type-weight-medium);
letter-spacing: 0;
margin: 0;
}

.griglia-progetto h2 {
  margin: 0;
  font-size: var(--type-size-ui);
  line-height: 1;
  font-weight: var(--type-weight-ui);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding-bottom:30px;
}

.griglia-progetto p {
  font-size: 1.05rem;
  line-height: 1.25;
  font-weight: var(--type-weight-body);
  letter-spacing: 0;
  margin: 0;
}


.backstage-uno {
grid-column: 7 / 11;
}

.dieci-colonne-centro {
  padding-top:150px;
  grid-column: 2 / 12;
}

.tre-sette {
  padding-top:150px;
  grid-column: 3 / 7;
}

.sei-dieci {
  padding-top:150px;
  grid-column: 6 / 10;
}

.quattro-sette {
  padding-top:150px;
  grid-column: 4 / 7;
}

.sei-dodici {
  padding-top:150px;
  grid-column: 6 / 12;
}

.due-cinque {
  padding-top:150px;
  grid-column: 2 / 5;
}

.quattro-sette {
  padding-top:150px;
  grid-column: 4 / 7;
}

.due-sei {
  padding-top:150px;
  grid-column: 2 / 6;
}

.due-otto {
  padding-top:150px;
  grid-column: 2 / 8;
}

.tre-otto {
  padding-top:150px;
  grid-column: 3 / 8;
}

.due-quattro {
  padding-top:150px;
  grid-column: 2 / 4;
}

.risultati-due-quattro {
  padding-top:150px;
  grid-column: 2 / 4;
}

.sette-dieci {
  padding-top:150px;
  grid-column: 7 / 10;
}

.sette-undici {
  padding-top:150px;
  grid-column: 7 / 11;
}

.sette-dodici {
  padding-top:150px;
  grid-column: 7 / 12;
}

.risultati-sette-dodici {
  padding-top:150px;
  grid-column: 7 / 12;
}

.otto-dodici {
  padding-top:150px;
  grid-column: 8 / 12;
}

.sei-undici {
  padding-top:150px;
  grid-column: 6 / 11;
}

.quattro-dieci {
  padding-top:150px;
  grid-column: 4 / 10;
}


.griglia-progetto img, .griglia-progetto video {
  width: 100%;
  border-radius: 12px;
}


.sezione-nera.project-backstage {
  position: relative;
  display: block;
  min-height: 100vh;
  margin-top: 150px;
  background: transparent;
  color: #fafaf8;
}

/*
  Come nella gallery About, il viewport resta sticky mentre
  lo scroll verticale sposta orizzontalmente l'intero track.
*/
.project-backstage__viewport {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.img-sezione-nera.project-backstage__track {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(5rem, 9vw, 12rem);
  width: 250vw;
  min-width: 100%;
  height: 100%;
  padding-left: clamp(10rem, 16vw, 18rem);
padding-right: clamp(6rem, 16vw, 16rem);
  box-sizing: border-box;
  will-change: transform;
}

/* Nessun movimento indipendente sui media: si muove solo il track. */
.project-backstage__viewport,
.project-backstage__viewport * {
  user-select: none;
  -webkit-user-select: none;
}

.project-backstage__media img,
.project-backstage__media video {
  pointer-events: none;
  -webkit-user-drag: none;
  border-radius: 12px;
}

/* Manteniamo i div esistenti ma li trattiamo come una composizione editoriale,
   non come card allineate. */
.project-backstage .sei-dieci {
  flex: 0 0 clamp(360px, 34vw, 560px);
  align-self: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 0;
  transform: translateY(14vh);
}

.project-backstage .sei-dieci h2 {
  margin: 0;
  padding: 0 0 30px;
  color: #fafaf8 !important;
  font-size: var(--type-size-ui);
  line-height: 1;
  font-weight: var(--type-weight-ui);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.project-backstage .sei-dieci p {
  max-width: 520px;
  margin: 0;
  color: #fafaf8 !important;
  font-size: var(--type-size-body-lg);
  line-height: 1.25;
  font-weight: var(--type-weight-body);
}

/* Primo backstage: più grande e leggermente basso. */
.project-backstage .backstage-uno {
  grid-column: auto;
  flex: 0 0 min(58vw, 940px);
  display: flex;
  align-items: center;
  align-self: flex-end;
  padding-top: 0;
  padding-bottom: 7vh;
  border-radius: 12px;
}

/* Secondo backstage: più piccolo e alto. */
.project-backstage .quattro-sette {
  grid-column: auto;
  flex: 0 0 min(38vw, 640px);
  display: flex;
  align-items: center;
  align-self: flex-start;
  padding-top: 9vh;
}

.project-backstage .terzo {
  grid-column: auto;
  flex: 0 0 clamp(220px, 18vw, 360px);
  display: flex;
  align-items: center;
  align-self: flex-start;
  padding-top: 30vh;
}

.project-backstage .quarto {
  grid-column: auto;
  flex: 0 0 min(38vw, 640px);
  display: flex;
  align-items: center;
  align-self: flex-start;
  padding-top: 15vh;
}

.project-backstage .quinto {
  grid-column: auto;
  flex: 0 0 min(38vw, 640px);
  display: flex;
  align-items: center;
  align-self: flex-start;
  padding-top: 40vh;
}

.project-backstage .project-backstage__media--quarto {
  flex: 0 0 min(38vw, 640px);
}

.project-backstage__media {
  border-radius: 12px;
  overflow: hidden;
}

.project-backstage__media video,
.project-backstage__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 12px;

  /*
    Il track backstage viene traslato durante lo scroll. Su alcuni browser,
    soprattutto Safari/WebKit, il solo border-radius può non clipparsi bene
    su un media compositato. Il clip-path forza l'arrotondamento sul rettangolo
    REALE dell'immagine/video, quindi funziona anche sul primo backstage che
    ha padding-bottom sul contenitore.
  */
  -webkit-clip-path: inset(0 round 12px);
  clip-path: inset(0 round 12px);
  transform: translateZ(0);
}

.project-backstage .backstage-uno video,
.project-backstage .backstage-uno img {
  max-height: 66vh;
}

.project-backstage .quattro-sette video,
.project-backstage .quattro-sette img {
  max-height: 52vh;
}

html.is-page-project .project-backstage :where(h2, p) {
  color: #fafaf8 !important;
}

/* --------------------------------------------------
   03 / OBIETTIVO E COPY
   label: 1 → 4
   testo: 7 → 13
-------------------------------------------------- */

.project-case__section h2 {
  margin: 0;
  font-size: var(--type-size-ui);
  line-height: 1;
  font-weight: var(--type-weight-ui);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.project-case__section--split {
  padding-top: clamp(5rem, 8vw, 8rem);
  padding-bottom: clamp(5rem, 8vw, 8rem);
}

.project-case__section--split > h2 {
  grid-column: 1 / 4;
  align-self: start;
  padding-top: 0.25rem;
}

.project-case__section--split > .project-case__text {
  grid-column: 7 / 13;
}

.project-case__text {
  min-width: 0;
  max-width: 44rem;
}

.project-case__text p {
  margin: 0 0 1.15em;
  font-size: var(--type-size-body-lg);
  line-height: 1.25;
  font-weight: var(--type-weight-body);
  letter-spacing: -0.025em;
}

.project-case__text p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------
   04 / FEATURE VISUAL
   grande: colonne 2 → 12
   piccolo: colonne 3 → 8
-------------------------------------------------- */

.project-case__media-cluster--feature {
  row-gap: clamp(2rem, 3.2vw, 4rem);
  padding-bottom: clamp(6rem, 9vw, 10rem);
}

.project-case__media {
  margin: 0;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: var(--project-media-radius);
}

.project-case__media img,
.project-case__media video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}

.project-case__media--primary {
  grid-column: 2 / 12;
  position: relative;
  z-index: 1;
  width: 100%;
}

.project-case__media--overlap {
  grid-column: 3 / 8;
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0;
}

/* --------------------------------------------------
   05 / SVILUPPO
   blocco editoriale: colonne 5 → 11
-------------------------------------------------- */

.project-case__section--development {
  padding-top: clamp(1rem, 2vw, 2.5rem);
  padding-bottom: clamp(6rem, 9vw, 10rem);
}

.project-case__section--development > .project-case__text {
  grid-column: 5 / 11;
  width: 100%;
  max-width: none;
  margin: 0;
}

.project-case__section--development h2 {
  margin-bottom: 1.5rem;
  text-align: center;
}

/* --------------------------------------------------
   06 / FASCIA NERA + PANORAMA
   visual: colonne 3 → 11
-------------------------------------------------- */

.project-case__band--dark {
  padding-top: clamp(4.5rem, 6.5vw, 7rem);
  padding-bottom: clamp(4.5rem, 6.5vw, 7rem);
  background: #111;
}

.project-case__media--panorama {
  grid-column: 3 / 11;
  width: 100%;
  --project-media-radius: 12px;
}

/* --------------------------------------------------
   07 / VISUAL PICCOLO
   allineato alla colonna del testo: 7 → 12
-------------------------------------------------- */

.project-case__grid--small {
  padding-top: clamp(5rem, 8vw, 9rem);
  padding-bottom: clamp(6rem, 9vw, 10rem);
}

.project-case__media--small {
  grid-column: 7 / 12;
  width: 100%;
}

/* --------------------------------------------------
   08 / RISULTATI + VISITA IL SITO
-------------------------------------------------- */

.project-case__section--results {
  padding-top: 0;
  padding-bottom: clamp(6rem, 9vw, 10rem);
}

html.is-page-project .project-case__visit {
  position: relative;
  z-index: 1;
  isolation: isolate;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-top: 2.2rem;
  padding: 12px 25px;
  overflow: hidden;

  border-radius: 100px;
  background: #111;
  color: #FAFAF8 !important;

  font-size: var(--type-size-ui);
  line-height: 1;
  font-weight: var(--type-weight-ui);
  text-decoration: none;
}

html.is-page-project .project-case__visit::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  background: #242ADB;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

html.is-page-project .project-case__visit:hover::before,
html.is-page-project .project-case__visit:focus-visible::before {
  transform: scaleY(1);
}

/* --------------------------------------------------
   09 / CLOSING VISUAL
   colonne 2 → 12
-------------------------------------------------- */

.project-case__grid--closing {
  padding-bottom: 0;
}

.project-case__media--closing {
  grid-column: 2 / 12;
  width: 100%;
}

/* --------------------------------------------------
   10 / NEXT PROJECT — SCROLL TO CONFIRM
-------------------------------------------------- */

.project-next {
  --project-next-progress: 0;

  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(520px, 76vh, 860px);
  padding: clamp(8rem, 12vw, 13rem) 3rem 3rem;
  box-sizing: border-box;
  background: transparent;
}

.project-next__inner {
  width: min(100%, 980px);
  text-align: center;
}

.project-next__inner p {
  padding-top: 30px;
  padding-bottom:30px;
}

.project-next__title {
  display: inline-block;
  margin: 0;

  font-size: clamp(4rem, 7.8vw, 9.4rem);
  line-height: 0.82;
  font-weight: var(--type-weight-display);
  letter-spacing: -0.02em;
  text-decoration: none;
}

.project-next__label {
  margin: 1rem 0 0;
  font-size: clamp(1rem, 1.15vw, 1.25rem);
  line-height: 1;
  font-weight: var(--type-weight-medium);
}

.project-next__hint {
  margin: 0.3rem 0 0;
  font-size: var(--type-size-meta);
  line-height: 1;
  font-weight: var(--type-weight-medium);
  letter-spacing: 0.04em;
  text-transform: lowercase;
  opacity: 0.58;
}

.project-next__progress {
  width: min(320px, 34vw);
  margin: 2rem auto 0;
}

.project-next__progress-track {
  position: relative;
  display: block;
  width: 100%;
  height: 5px;
  overflow: hidden;
  border-radius: 5px;
  background: rgba(17, 17, 17, 0.22);
}

.project-next__progress-fill {
  position: absolute;
  inset: 0;
  display: block;
  background:#242ADB;
  transform: scaleX(var(--project-next-progress));
  transform-origin: left center;
  will-change: transform;
}

html.is-project-next-armed .project-next__hint {
  opacity: 1;
}

html.is-project-next-leaving .page-project,
html.is-switching-project .page-project {
  pointer-events: none;
}

html.is-switching-project .project-hero img,
html.is-switching-project .project-hero video {
  opacity: 0;
}

html.is-switching-project.is-project-cover-ready .project-hero img,
html.is-switching-project.is-project-cover-ready .project-hero video {
  opacity: 1;
}


/* --------------------------------------------------
   PROJECT — CONTAINER ZOOM REVEAL
   Il reveal scala il contenitore visibile, NON img/video.
   I div di layout esistenti restano invariati: il wrapper interno
   evita di scalare padding, colonne e posizionamento della griglia.
-------------------------------------------------- */

.project-media-reveal {
  width: 100%;
  overflow: hidden;

  /* Stato iniziale già presente al primo paint: nessuno scatto JS. */
  transform: translateZ(0) scale(0.90);
  transform-origin: center center;
  backface-visibility: hidden;
  will-change: transform;

  transition:
    transform 1.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-media-reveal.is-revealed {
  transform: translateZ(0) scale(1);
}

.project-media-reveal > img,
.project-media-reveal > video {
  display: block;
  width: 100%;
  height: auto;

  /* Il media resta completamente fermo: cresce il suo contenitore. */
  transform: none !important;
}

/* --------------------------------------------------
   MOBILE
-------------------------------------------------- */

@media (max-width: 820px) {
  .project-header {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    display: block;
  }

  .project-header p {
    margin-top: 1rem;
  }

  html.is-page-project,
  html.is-page-project body {
    overflow-x: hidden;
  }

  a.back {
    top: 1rem;
    padding: 11px 16px;
    font-size: 0.78rem;
  }

  .project-case {
    --project-grid-gutter: 1rem;
    --project-grid-gap: 0.75rem;
  }

  .project-case__intro {
    min-height: auto;
    padding-top: 8rem;
    padding-bottom: 3.5rem;
  }

  .project-case__intro-inner {
    grid-column: 1 / -1;
  }

  .project-case__intro h1 {
    font-size: clamp(3.8rem, 17vw, 6.8rem);
  }

  .project-case__intro .project-case__lead {
    max-width: 94%;
    font-size: 1.1rem;
  }

  .project-case__services {
    max-width: 94%;
    margin-top: 2rem;
  }

  .project-case .project-hero {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
  }

  .project-case__section--split {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .project-case__section--split > h2,
  .project-case__section--split > .project-case__text,
  .project-case__section--development > .project-case__text,
  .project-case__media--primary,
  .project-case__media--overlap,
  .project-case__media--panorama,
  .project-case__media--small,
  .project-case__media--closing {
    grid-column: 1 / -1;
  }

  .project-case__section--split > h2 {
    margin-bottom: 2rem;
  }

  .project-case__text {
    width: 100%;
    max-width: none;
  }

  .project-case__text p {
    font-size: clamp(1.12rem, 4.8vw, 1.4rem);
  }

  .project-case__media-cluster--feature {
    row-gap: 1.5rem;
    padding-bottom: 5rem;
  }

  .project-case__media {
    --project-media-radius: 12px;
  }

  .project-case__section--development {
    padding-top: 4rem;
    padding-bottom: 6rem;
  }

  .project-case__section--development h2 {
    text-align: left;
  }

  .project-case__band--dark {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .project-case__media--panorama {
    --project-media-radius: 12px;
  }

  .project-case__grid--small {
    padding-top: 4rem;
    padding-bottom: 6rem;
  }

  .project-case__section--results {
    padding-top: 0;
    padding-bottom: 6rem;
  }

  html.is-page-project .project-case__visit {
    padding: 11px 16px;
    font-size: 0.78rem;
  }

  .project-case__grid--closing {
    padding-bottom: 0;
  }

  .project-next {
    min-height: 72svh;
    padding: 7rem 1rem 2rem;
  }

  .project-next__title {
    font-size: clamp(3.6rem, 16vw, 6.5rem);
  }

  .project-next__progress {
    width: min(280px, 72vw);
  }

  .sezione-nera.project-backstage {
    height: auto !important;
    margin-top: 8rem;
    padding: 6rem 1rem;
    box-sizing: border-box;
  }

  .project-backstage__viewport {
    position: relative;
    height: auto;
    overflow: visible;
  }

  .img-sezione-nera.project-backstage__track {
    display: block;
    width: 100%;
    min-width: 0;
    height: auto;
    padding: 0;
    transform: none !important;
    will-change: auto;
  }

  .project-backstage .sei-dieci,
  .project-backstage .backstage-uno,
  .project-backstage .quattro-sette,
  .project-backstage .terzo,
  .project-backstage .quarto {
    width: 100%;
    max-width: none;
    margin: 0 0 4rem;
    padding: 0;
    display: block;
  }


  .project-backstage .sei-dieci {
    margin-bottom: 5rem;
  }

  .project-backstage__media video,
  .project-backstage__media img {
    width: 100%;
    max-height: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-media-reveal,
  .project-next__progress-fill {
    transition: none !important;
  }

  .project-media-reveal {
    transform: none !important;
  }
}


/* ==================================================
   CONTACT — SCENA HOME SENZA PORTALE / SENZA SCROLL
================================================== */
html.is-page-contact,
html.is-page-contact body {
  height: 100%;
  overflow: hidden !important;
  overscroll-behavior: none;
}

.page-contact {
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
}

/* Il DOM del portale resta persistente per Barba, ma in Contact non deve
   essere visibile né interattivo. La maschera WebGL viene portata a 0 dal JS. */
html.is-page-contact .scene-portal {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* In Contact il canvas resta interattivo; i soli link stanno sopra e ricevono i click. */
html.is-page-contact .physics-hit-area {
  pointer-events: auto !important;
}

/* Contact usa la stessa UI chiara di Home/Project. */
html.is-page-contact .site-nav__toggle {
  background: #fafaf8;
  color: #111 !important;
}

html.is-page-contact .site-nav.is-open .site-nav__toggle {
  background: #fafaf8;
  color: #111 !important;
}

html.is-page-contact .site-nav.is-open .site-nav__toggle::before {
  transform: scaleY(0);
}

html.is-page-contact .site-nav__panel {
  background: #fafaf8;
}

html.is-page-contact ul.menu li a,
html.is-page-contact ul.menu li:hover a,
html.is-page-contact ul.menu li:focus-within a {
  color: #111 !important;
}


/* Durante Home/About/Works -> Contact sparisce subito la label DOM;
   il rettangolo visivo continua invece a chiudersi nello shader WebGL. */
html.is-opening-contact .scene-portal__label {
  opacity: 0;
  transition: opacity 0.2s ease;
}

html.is-opening-contact .scene-portal {
  pointer-events: none !important;
}


.contenitore-contact {
  position: relative;
  z-index: 2;
  height: 100vh;
  width: 100%;
  box-sizing: border-box;

  display: grid;
  grid-template-columns: repeat(12, 1fr);

  grid-auto-rows: max-content;
  column-gap: 1rem;
  row-gap: 80px;

  align-content: center;
  align-items: center;
  pointer-events: none !important;
}

.mail-contatto {
  	grid-column: 3 / 7;
      grid-row: 1;
        pointer-events: auto!important;
}



.contenitore-contact h1 {
  margin: 0;

  font-family: "Google Sans Flex", sans-serif;

  font-size: clamp(2rem, 2.35vw, 3rem);
  line-height: 1.2;

  font-weight: var(--type-weight-body);
  letter-spacing: -0.035em;

  font-optical-sizing: auto;
}

.contenitore-contact h2 {
    margin: 0;
    margin-top:30px;
  font-size: 3rem;
  line-height: 1.1;
  font-weight: var(--type-weight-body);
}

.contenitore-contact a {
  position: relative;
  z-index: 3;
  pointer-events: auto !important;
  cursor: pointer;
  margin: 0;
  margin-top:30px;
font-size: 3rem;
line-height: 1.1;
  font-weight: 650;
  color:#111;
}

.sede {
  text-align: left;
  grid-column: 8 / 12;
  grid-row: 2;
}

.social-contact {
  text-align: left;
  grid-column: 8 / 12;
  grid-row: 3;
  pointer-events: none;
}

.contenitore-contact p {
  font-size: var(--type-size-body);
  line-height: 1.2;
  font-weight: var(--type-weight-body);
}


.social-contact a{
  font-size: var(--type-size-body);
  line-height: 1.2;
  font-weight: var(--type-weight-body);
  padding-right: 15px;
}


.copyright {
  position: fixed;
  bottom:1rem;
  right:3rem;
  display: flex;
  z-index: 99;
}

.copyright p, .copyright a {
  margin:0;
  font-size: 0.7rem;
  margin-right:15px;
  text-decoration: none;
}

/* Iubenda Privacy/Cookie: stesso colore del testo, mai blu */
.copyright a,
.copyright-mobile a {
  color: inherit !important;
}


.copyright-mobile {
  display: none;
}


/* TABLET */
@media (min-width: 821px) and (max-width: 1180px) {

}



/* SMARTPHONE */
@media (max-width: 820px) {

  .global-webgl,
  .physics-hit-area {
    height: var(--mobile-vh-lock, 100svh) !important;
  }

  .global-webgl {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    pointer-events: none;
  }

  .logo {
    position: fixed;
    left: 1rem;
    top: calc(1rem + 12px);
    z-index: 9999;
    width: 120px;
  }


    .home-copy {
      position: absolute;
      top: 6rem;
      left: 0;

      width: 100%;
      box-sizing: border-box;

      padding: 0 1rem;

      display: block;
      z-index: 999;
    }

    .home-copy h3 {
      width: 100%;
      max-width: none;
      margin: 0;
      font-size: 1.4rem;
   line-height: 1.08;
    }


    .desc-home {
      position: absolute;

      top: calc(50% + min(25.2vw, 148px) + 4rem);
      bottom: auto;

      left: 0;
      width: 100%;
      max-width: none;

      padding: 0 1rem;
      box-sizing: border-box;

      z-index: 10;
    }

 .desc-home p {
   width: 100%;
   max-width: none;
   margin: 0;
    font-size: 0.9rem;
 }



 /* HOME WORKS — servizi come la home-copy */
.home-servizi {
  position: absolute;
  top: 6rem;
  left: 0;

  width: 100%;
  box-sizing: border-box;

  padding: 0 1rem;

  display: block;
  z-index: 999;
}

.home-servizi ul {
  width: 100%;
  max-width: none;

  margin: 0;
  padding: 0;

  font-size: 0.9rem;
  line-height: 1.08;
}


/* HOME WORKS — descrizione come .desc-home */
.desc-home-works {
  position: absolute;

  top: calc(50% + min(25.2vw, 148px) + 4rem);
  bottom: auto;

  left: 0;
  width: 100%;
  max-width: none;

  padding: 0 1rem;
  box-sizing: border-box;

  font-size: 0.9rem;
  line-height: 1.25;

  z-index: 10;
}

.desc-home-works p {
  width: 100%;
  max-width: none;
  margin: 0;
}

/* nasconde quella fissa desktop */
.copyright {
  display: none;
}

.copyright-mobile {
  display: flex;
  align-items: center;
  gap: 15px;

  width: 100%;
  margin-top: 2rem;
  padding-top: 1rem;

  font-size: 0.7rem;
}

.copyright-mobile p,
.copyright-mobile a {
  margin: 0;
  font-size: 0.7rem;
  line-height: 1;
  text-decoration: none;
}



.contenitore-about {
  display: flex;
  padding-left: 1rem;
  padding-right:1rem;
  	column-gap: 1rem; /* spazio tra colonne */
pointer-events: none;
align-items: center;
justify-content:center;
position: relative;
height:100vh;
}


.about-copy {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding: 0 0rem;
  }

  .about-copy h1 {
    width: 100%;
    max-width: none;

    font-size: 2rem;
    line-height: 1.08;

    margin: 0;
  }

  .primo-paragrafo-about {
  padding:0;
  padding-left:1rem;
  padding-right:1rem;
    margin: 0;
    max-width: none;
    left: 0;
   right: 0;
  }

  .primo-paragrafo-about p {
    font-size: 0.9rem;
    line-height: 1.25;
    max-width: none;
  }


  .secondo-about {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    padding-top: 200px;
    padding-bottom: 0px;
    pointer-events: none;
  }


  .metodo {
    padding-top: 10rem;
    z-index: 9999;
    color: #111;
    box-sizing:border-box;
    height:100vh;
  }

  .metodo h2 {
    margin: 0 0 1.5rem;

    font-size: 0.8rem;
    line-height: 1;

    font-weight: var(--type-weight-ui);
    letter-spacing: 0.06em;
    text-transform: uppercase;

    font-optical-sizing: auto;
  }

  .metodo p {
    margin: 0;

    font-size: 1.25rem;
    line-height: 1.15;

    font-weight: 200;
    letter-spacing: -0.025em;

    font-optical-sizing: auto;
  }

  .metodo p .italic {
    display: inline-block;
    position: relative;

    border: 1px solid #fafaf8;

    padding: 0.01em 0.12em 0.04em;
    margin-inline: 0.03em;
  border-radius: 6px;
    line-height: 0.95;
    box-sizing: border-box;
      font-weight: var(--type-weight-body);
  }


  .about-services {
   width: 100%;
   max-width: 100%;
   overflow-x: clip;

   padding-top: 7rem;
   padding-bottom: 9rem;

   box-sizing: border-box;
 }

 .about-services__stage {
   display: grid;

   grid-template-columns: 42% 58%;
   column-gap: 0;

   align-items: start;

   width: 100%;
   max-width: 100%;

   padding: 0 1rem;
   box-sizing: border-box;
 }


 /* 3D — SINISTRA */

 .about-services__media {
   grid-column: 1;
   grid-row: 1;

   position: sticky;
   top: 25vh;

   width: 100%;
   min-width: 0;

   height: 45vh;
   min-height: 260px;
   max-height: 420px;

   margin: 0;

   z-index: 2;
 }


 /* TESTI — DESTRA */

 .about-services__content {
   grid-column: 2;
   grid-row: 1;

   display: block;

   width: 100%;
   min-width: 0;

   padding-left: 1rem;
   box-sizing: border-box;

   z-index: 3;
 }


 .about-services__item {
   display: block;

   width: 100%;
   min-width: 0;

   min-height: 70vh;
 }


 .about-services__heading {
   width: 100%;
   min-width: 0;
 }


 .about-services__item h2 {
   width: 100%;
   max-width: none;

   margin: 0 0 1rem;

   font-size: 1.6rem;
   line-height: 0.95;

   text-align: left;
 }


 .about-services__services {
   width: 100%;
   max-width: none;

   margin: 0 0 1.25rem;

   font-size: 0.72rem;
   line-height: 1.25;

   text-align: left;
 }


 .about-services__description {
   width: 100%;
   max-width: none;

   margin: 0;

   font-size: 0.82rem;
   line-height: 1.3;
 }



 .about-horizontal__viewport {
   height: 100svh;
 }

 .about-horizontal__track {
      width: 630vw;
   height: 100svh;
 }

 .about-horizontal__shot img {
   border-radius: 12px;
 }


 .about-horizontal__shot--01 {
    top: 10vh;
    left: 5vw;
    width: 78vw;
  }

  .about-horizontal__shot--02 {
    top: auto;
    bottom: 8vh;
    left: 89vw;
    width: 58vw;
  }

  .about-horizontal__shot--03 {
    top: 17vh;
    left: 192vw;
    width: 84vw;
  }

  .about-horizontal__shot--04 {
    top: 42vh;
    left: 282vw;
    width: 60vw;
  }

  .about-horizontal__shot--05 {
    top: 8vh;
    left: 400vw;
    width: 72vw;
  }

  .about-horizontal__shot--06 {
    top: auto;
    bottom: 7vh;
    left: 454vw;
    width: 82vw;
  }

  .about-horizontal__shot--07 {
    top: 18vh;
    left: 570vw;
    width: 68vw;
  }



 .awards-clienti {
   display: block;
   padding: 120px 1rem;
 }

 .awards-list,
 .clienti-list,
 .press-list {
   margin-bottom: 5rem;
 }

 .awards-list li {
   line-height:1.7;
   border-bottom: 1px solid rgba(255,255,255,0.2);
 }

 .press-list {
   margin-bottom: 0;
 }

 .clienti-list ul {
   column-count: 1;
 }

 .awards-clienti li {
   font-size: 0.9rem;
 }

 .clienti-list ul {
   column-count: 2;
   column-gap: 2rem;
 }

 .clienti-list li {
   break-inside: avoid;
   -webkit-column-break-inside: avoid;
 }




 a.back {
   position: fixed;
   top: 85vh;
   left: 50%;
   z-index: 9999;
   transform: translateX(-50%);

   display: inline-flex;
   align-items: center;
   justify-content: center;
   white-space: nowrap;

   padding: 12px 25px;
   border-radius: 100px;
   background: #fafaf8;
   color: #111 !important;

   font-size: var(--type-size-ui);
   line-height: 1;
   font-weight: var(--type-weight-ui);
   text-decoration: none;
 }


 .works-titolo {
   position: fixed;
   top: 6rem;
   left: 0;

   width: 100%;
   box-sizing: border-box;

   padding: 0 1rem;

   display: block;
   z-index: 99999;
 }

 .works-titolo h1 {
   width: 100%;
   max-width: none;
   margin: 0;

   font-size: 0.95rem;
   line-height: 1.08;
 }



 .griglia-progetto {
     display: grid;
     grid-template-columns: repeat(12, 1fr);
     column-gap: 1rem;
     padding-left:1rem;
     padding-right:1rem;
 }



 .project-case__intro h1 {
  font-size: clamp(2.8rem, 12vw, 4rem);
  line-height: 0.88;
}

html.is-page-project .page-project p {
  font-size: 0.9rem;
  line-height: 1.25;
}


.testo-obiettivo {
  padding-top: 150px;
}

.testo-obiettivo h2{
grid-column: 1 / 13;
margin: 0;
font-size: var(--type-size-ui);
line-height: 1;
font-weight: var(--type-weight-ui);
letter-spacing: 0.07em;
text-transform: uppercase;
}

.testo-obiettivo p{
grid-column: 1 / 13;
font-size: 1.05rem;
line-height: 1.25;
font-weight: var(--type-weight-medium);
letter-spacing: 0;
margin: 0;
}

.testo-obiettivo {
  padding-top: 90px;
}


.tre-sette,
.sei-dieci,
.quattro-sette,
.sei-dodici,
.due-cinque,
.due-sei,
.due-otto,
.tre-otto,
.due-quattro,
.sette-dieci,
.sette-dodici,
.otto-dodici,
.sei-undici,
.sette-undici,
.quattro-dieci {
  padding-top: 90px;
  grid-column: 1 / 13;
}

.risultati-sette-dodici {
  padding-top:15px;
  grid-column: 1 / 13;
}

.risultati-due-quattro {
  padding-top:90px;
  grid-column: 1 / 13;
}

.project-hero {
  position: relative;
  z-index: 2;
  grid-column: 1 / 13;
  width: 100%;
  min-width: 0;
  margin: 100px 0 0;
  overflow: hidden;
  background: transparent;
  box-sizing: border-box;
}

.project-hero-verticale {
  position: relative;
  z-index: 2;
  grid-column: 3 / 11;
  width: 100%;
  min-width: 0;
  margin: 100px 0 0;
  overflow: hidden;
  background: transparent;
  box-sizing: border-box;
}


.dieci-colonne-centro {
  padding-top:150px;
  grid-column: 1 / 13;
}

.project-case .project-hero {
  position: relative;
  z-index: 2;
grid-column: 1 / 13;
  height: auto;
  margin: 0;
  overflow: hidden;
  background: #111;
  box-sizing: border-box;
}

.project-backstage .sei-dieci {
  flex: 0 0 clamp(360px, 34vw, 560px);
  align-self: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 0;
  transform: translateY(14vh);
  padding-bottom: 100px;
}


.project-next__title {
    font-size: 2rem;
    line-height: 0.9;
  }

  .project-next__label {
    font-size: 0.9rem;
    line-height: 1.1;
  }

  .desc-progetti-works {
    position: fixed;
    bottom:7rem;
    left:50%;
    transform: translateX(-50%);
    width: 100%;
    padding-left:1rem;
    padding-right:1rem;
    box-sizing: border-box;
  }

   .desc-progetti-works h2 {
    font-size: 2rem;
    line-height: 1.1;
    font-weight: bold;
    margin: 0;
    text-align: center;
  }


  .project-case__intro-inner {
  text-align: left;
}

.project-case__intro h1 {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}

.project-case__intro .project-case__lead {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}

.project-case__services {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}


.works-scroll-indicator {
  width: 100%;
  padding-left: 4rem;
  padding-right: 4rem;
  box-sizing: border-box;
}

.works-scroll-indicator__track {
  width: 100%;
}

.works-scroll-indicator__item {
  flex: 1 1 0;
  width: auto;
}



.contenitore-contact {
  height: 100vh;
  width: 100%;

  display: grid;
  grid-template-columns: repeat(12, 1fr);

  grid-auto-rows: max-content;
  column-gap: 1rem;
  row-gap: 80px;

  align-content: center;
  align-items: start;
  padding-left:1rem;
  padding-right:1rem;
  box-sizing: border-box;
}

.mail-contatto {
  	grid-column: 1 / 13;
      grid-row: 1;
}



.contenitore-contact h1 {
  margin: 0;

  font-family: "Google Sans Flex", sans-serif;

  font-size: 1.5rem;
  line-height: 1.2;

  font-weight: var(--type-weight-body);
  letter-spacing: -0.035em;

  font-optical-sizing: auto;
}

.contenitore-contact h2 {
    margin: 0;
    margin-top:30px;
  font-size: 3rem;
  line-height: 1.1;
  font-weight: var(--type-weight-body);
}

.contenitore-contact a {
  margin: 0;
  margin-top:30px;
font-size: 2rem;
line-height: 1.1;
  font-weight: 650;
  color:#111;
}

.sede {
  text-align: left;
  grid-column: 1 / 6;
  grid-row: 2;
  margin: 0;
}

.social-contact {
  text-align: left;
  grid-column: 7 / 13;
  grid-row: 2;
  margin: 0;
}

.contenitore-contact p {
  font-size: var(--type-size-body);
  line-height: 1.2;
  font-weight: var(--type-weight-body);
  margin:0;
}


.social-contact a{
  font-size: var(--type-size-body);
  line-height: 1.2;
  font-weight: var(--type-weight-body);
  padding-right: 15px;
}






.site-nav {
  right: 1rem;
  top: 1rem;
  gap: 8px;
}

.site-nav__cta,
.site-nav__toggle {
  padding: 11px 16px;
  font-size: 0.78rem;
}

.site-nav__panel {
  top: calc(100% + 8px);

  width: min(330px, calc(100vw - 2rem));
  min-height: 0;

  padding: 20px;
  border-radius: 18px;
}

ul.menu {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.18rem;

  padding-left: 0;
  padding-right: 0;
}

ul.menu li,
ul.menu li:nth-child(1),
ul.menu li:nth-child(2),
ul.menu li:nth-child(3),
ul.menu li:nth-child(4) {
  width: 100%;
  justify-self: auto;
}

ul.menu li a {
  font-size: clamp(2rem, 11vw, 3rem);
  line-height: 0.92;
}


.site-nav__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;

  width: calc(100vw - 2rem);
  height: auto;

  padding: 20px 22px 22px;
  box-sizing: border-box;

  border-radius: 18px;
  background: #fafaf8;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateY(-6px);
  transform-origin: top right;

  transition:
    opacity 0.24s ease,
    visibility 0.24s ease,
    transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);

  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.08);

  overflow: hidden;
}





}

/* ==================================================
   MOBILE ABOUT / PROJECT — VIRTUAL PAGE SCROLL
   --------------------------------------------------
   Home mantiene il suo sistema is-mobile-virtual-scroll esistente.
   About e Project usano invece mobile-virtual-scroll.js:
   il root document resta fermo e il container Barba viene traslato.
   In questo modo la browser bar non riceve uno scroll nativo verticale.
================================================== */
@media (max-width: 820px) {
  html.is-mobile-page-virtual-scroll,
  html.is-mobile-page-virtual-scroll body {
    height: 100%;
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  html.is-mobile-page-virtual-scroll
  [data-barba="container"].is-mobile-page-virtual-scroll-container {
    max-width: 100%;
    overflow: visible;
    backface-visibility: hidden;
  }

  /*
    Con il root fermo CSS sticky non riceve più uno scroll reale.
    Le tre sticky effettivamente usate in About mobile vengono emulate
    dai rispettivi moduli JS tramite translateY.
  */
  html.is-mobile-page-virtual-scroll .about-horizontal__viewport,
  html.is-mobile-page-virtual-scroll .about-services__media,
  html.is-mobile-page-virtual-scroll .about-next__sticky {
    position: relative !important;
    top: 0 !important;
  }
}

/* ==================================================
   WORKS — MOBILE: SOLO TITOLO DEL PANNELLO CENTRALE
   Il JS aggiorna l'h2 in base al pannello più vicino al centro.
   Il sottotitolo/description resta esclusivamente desktop.
================================================== */
@media (max-width: 820px) {
  .desc-progetti-works p {
    display: none !important;
  }
}


.copyright a,
.copyright-mobile a {
  color: inherit !important;
}

html.is-page-about .copyright a,
html.is-page-about .copyright-mobile a,
html.is-page-works .copyright a,
html.is-page-works .copyright-mobile a {
  color: #fafaf8 !important;
}