/*
Theme Name: 	Aversa
Description: 	Responsive WordPress Theme create for antonio aversa
Version:     	2.7.3
Author:     	Antonio Aversa
Author URI:   https://www.linkedin.com/in/antonio-aversa/
Text Domain: 	aversa.design
Domain Path: 	/languages
Tags:        	grid-layout, blog, custom-menu, featured-images, right-sidebar

License:  Copyright (c) 2026 Antonio Aversa
Questo tema WordPress è protetto da copyright.
Nessuna parte del tema, inclusi i file sorgente, il codice HTML, CSS e JavaScript, PHP,
può essere utilizzata, modificata o distribuita senza la previa autorizzazione
scritta del titolare del copyright.
Qualsiasi violazione dei diritti d'autore sarà perseguita ai sensi della legge.

*/
/* usa questa classe per inveritre colori dei blocchi di ghutemberg 

" section-invert "
*/
.cinematic-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--v-color-void);
  z-index: 10000;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  transition: opacity .35s ease, visibility 0s linear .35s;
}

.cinematic-overlay.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.cinematic-overlay.is-gone {
  display: none !important;
}

.line-mask {
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

.line-item {
  display: block;
}


#site-header {
  transform: translate3d(0, -100%, 0);
}

.grain-bg {
  position: fixed;
  opacity: 1;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  background-color: var(--v-color-void);
  pointer-events: none;
  overflow: hidden;
}

.grain-bg::before {
  position: absolute;
  content: '';
  top: -10rem;
  left: -10rem;
  width: calc(100% + 20rem);
  height: calc(100% + 20rem);
  background-image: url(img/bg-noise.png);
  background-position: 50%;
  animation: BgNoise 1s steps(2) infinite;
  opacity: 1;
  mix-blend-mode: inherit;
}

@keyframes BgNoise {
  0% {
    transform: translate(0, 0);
  }

  20% {
    transform: translate(-2rem, -1rem);
  }

  40% {
    transform: translate(-3rem, 1.5rem);
  }

  60% {
    transform: translate(2.5rem, -2.5rem);
  }

  80% {
    transform: translate(1.5rem, 2rem);
  }

  100% {
    transform: translate(-1rem, -1.5rem);
  }
}

/* -------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------- */
/* ! DESIGN SYSTEM IMPORT */
/* -------------------------------------------------------------------------------- */
/* The core variables and typography are defined in css/v-design-system.css */

:root {
  /* DARK THEME (DEFAULT) */
  --bg-color: var(--v-color-void);
  --text-main: var(--v-color-text2);
  --text-heading: var(--v-color-text0);
  --text-sub: var(--v-color-text3);
  --border-color: var(--v-color-border);
  --surface: var(--v-color-surface1);
  --card-border-hi: var(--v-color-border);

  --selection-bg: var(--v-color-text0);
  --selection-color: var(--v-color-void);



  /* Legacy Mapping */
  --book: 400;
  --light: 300;
  --light-grey: var(--border-color);
  --medium: 500;
  --primary: var(--white);
  --red: var(--v-color-purple);
  --regular: 400;
  --secondary: var(--v-color-void);
  --white: var(--v-color-text0);
  --bold: 700;
  --black: 700;
}

body.light {
  /* In light mode le variabili v-design-system ridefiniscono:
     --v-color-void   → #F5F0E8 (beige chiaro = sfondo)
     --v-color-text0  → #0C1219 (scuro = testo principale) */
  --bg-color: var(--v-color-void);
  /* #F5F0E8 - sfondo chiaro */
  --text-main: var(--v-color-text0);
  /* #0C1219 - testo scuro */
  --text-heading: var(--v-color-text0);
  /* #0C1219 - titoli scuri */
  --text-sub: var(--v-color-text3);
  /* #68707F - sottotitoli */
  --border-color: var(--v-color-border);
  /* #E2E0DD */
  --surface: var(--v-color-surface1);
  /* var(--white) */
  --white: var(--v-color-void);
  /* #F5F0E8 */
  --secondary: var(--v-color-text0);
  /* #0C1219 */
  --primary: var(--v-color-text0);
  /* #0C1219 */
  --selection-bg: var(--v-color-text0);
  /* #0C1219 */
  --selection-color: var(--v-color-void);
  /* #F5F0E8 */
  --card-border-hi: var(--v-color-blue);
}

/* Ensure base text is dark in light mode */
body.light,
body.light h1,
body.light h2,
body.light h3,
body.light h4,
body.light h5,
body.light h6,
body.light p,
body.light li,
body.light a,
body.light :not(.button)>span {
  color: var(--v-color-text0);
}


/* --- REGOLE GLOBALI TIPOGRAFIA (MARZO 2026) --- */
p,
.body-text {
  font-family: 'DM Sans', sans-serif !important;
  font-size: var(--v-font-size-body) !important;
  font-weight: 400;
  line-height: 1.6;
}

/* Mai font-size sotto 16px eccetto labels/tags */
* {
  --min-font-size: 16px;
}

/* Homepage Titles */
.home .hero-title {
  font-size: var(--v-font-size-hero) !important;
}


/* Homepage Section Titles */
.section-title,
.home h2 {
  font-family: 'Syne', sans-serif !important;
  font-size: var(--v-font-size-h2) !important;
  font-weight: 700;
}

/* Card Titles */
.lp-text-card h3,
.card-title {
  font-family: 'Syne', sans-serif !important;
  font-size: var(--v-font-size-h3) !important;
  font-weight: 700;
}

/* Labels e Tag Inline */
.hero-top-headline,
.label,
.tag-inline,
.cta-center-block__label,
.lp-itp__label {
  font-family: 'DM Mono', monospace !important;
  font-size: var(--v-font-size-h5) !important;
  text-transform: uppercase;
  letter-spacing: var(--v-ls-mono) !important;

  font-weight: 500;
}




/* -------------------------------------------------------------------------------- */

/* Pulsanti carichi (pieni) in light mode - sfondo scuro e testo bianco */
body.light .button.bg-white,
body.light .cta-center-block__cta {
  background: var(--v-color-text1) !important;
  color: var(--v-color-surface1) !important;
  border: none;
}


body.light .button.bg-white span,
body.light .cta-center-block__cta span {
  color: var(--v-color-surface1) !important;
}




body.light .button:hover {
  color: var(--v-color-text0) !important;
  border-color: var(--v-color-text0) !important;
}

/* In light mode, outline buttons need a dark ripple, filled buttons need a light ripple */
body.light .button::after {
  background: radial-gradient(circle at var(--ripple-x) var(--ripple-y), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0) 70%);
}

/* Filled buttons in Light Mode need a light ripple */
body.light .button.bg-white::after,
body.light .cta-center-block__cta::after {
  background: radial-gradient(circle at var(--ripple-x) var(--ripple-y), rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 70%);
}


body.light .button.bg-white:hover,
body.light .cta-center-block__cta:hover {
  background: var(--v-color-text0) !important;
  color: var(--white) !important;
  opacity: 0.9;
}

body.light .button.bg-white::after,
body.light .cta-center-block__cta::after {
  background: radial-gradient(circle at var(--ripple-x) var(--ripple-y), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 70%);
}


/* ! SECTION INVERT (background flip on scroll)                                     */
/* -------------------------------------------------------------------------------- */
/* Aggiungi la classe "section-invert" a qualsiasi blocco in Gutenberg.             */
/* In dark mode → sfondo chiaro. In light mode → sfondo scuro.                      */
/* Funziona automaticamente grazie alle variabili --white e --bg-color del tema.    */

.section-invert {
  transition:
    background-color 0.7s cubic-bezier(0.215, 0.61, 0.355, 1),
    color 0.7s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.section-invert.is-inview {
  background-color: var(--white);
  color: var(--v-color-void);
}

.section-invert.is-inview h1,
.section-invert.is-inview h2,
.section-invert.is-inview h3,
.section-invert.is-inview h4,
.section-invert.is-inview p,
.section-invert.is-inview li,
.section-invert.is-inview span,
.section-invert.is-inview a {
  color: var(--v-color-void);
}

/* -------------------------------------------------------------------------------- */
/* ! HELPERS */
/* -------------------------------------------------------------------------------- */

.d-block {
  display: block;
}


.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important
}

.hide {
  display: none
}

.visibility-hide {
  opacity: 0;
  visibility: hidden
}

.over-hidden {
  overflow: hidden
}

.static {
  position: static
}

.w-100 {
  max-width: 100%;
  width: 100%
}

.m-auto {
  margin: auto
}

.text-primary {
  color: var(--primary)
}

.bg-white {
  background: var(--white);
  color: var(--v-color-void);
}

.bg-secondary {
  background: var(--secondary);
  color: var(--white);
}

.b-radius-xs {
  border-radius: var(--v-radius-sm) !important;
}

.b-radius-sm,
.b-radius-8 {
  border-radius: var(--v-radius-sm) !important;
}

.b-radius-md {
  border-radius: var(--v-radius-sm) !important;
}

.b-radius-lg,
.b-radius-16 {
  border-radius: var(--v-radius-sm) !important;
}

.b-radius-xl {
  border-radius: var(--v-radius-sm) !important;
}

.b-radius-pill {
  border-radius: var(--v-radius-pill) !important;
}

.font-light {
  font-weight: var(--light)
}

.font-regular {
  font-weight: var(--regular)
}

.font-bold {
  font-weight: var(--bold)
}

.font-black {
  font-weight: var(--black)
}

.font-sm,
.font-base {
  font-size: var(--v-font-size-body) !important;
}

.font-md {
  font-size: var(--v-font-size-h3) !important;
  line-height: 1.3 !important;
}

.font-lg {
  font-size: var(--v-font-size-h2) !important;
  line-height: 1.3 !important;
}

.font-xl {
  font-size: var(--v-font-size-h1) !important;
  line-height: 1.2 !important;
}

.font-xxl,
.font-xxxl {
  font-size: var(--v-font-size-kpi) !important;
  line-height: 1 !important;
}

.align-content-center {
  align-content: center !important
}

.align-items-center {
  align-items: center !important
}

.d-flex {
  display: flex
}

.d-grid {
  display: grid
}

.m-0 {
  margin: 0 !important
}

.m-1 {
  margin: var(--v-space-2) !important
}

.m-2 {
  margin: var(--v-space-4) !important
}

.m-3 {
  margin: var(--v-space-5) !important
}

.m-4 {
  margin: var(--v-space-6) !important
}

.m-5 {
  margin: var(--v-space-7) !important
}

.m-6 {
  margin: var(--v-space-8) !important
}

.m-7 {
  margin: var(--v-space-9) !important
}

.m-8 {
  margin: var(--v-space-10) !important
}

.mt-0 {
  margin-top: 0 !important
}

.mt-1 {
  margin-top: var(--v-space-2) !important
}

.mt-2 {
  margin-top: var(--v-space-4) !important
}

.mt-3 {
  margin-top: var(--v-space-5) !important
}

.mt-4 {
  margin-top: var(--v-space-6) !important
}

.mt-5 {
  margin-top: var(--v-space-7) !important
}

.mt-6 {
  margin-top: var(--v-space-8) !important
}

.mt-7 {
  margin-top: var(--v-space-9) !important
}

.mt-8 {
  margin-top: var(--v-space-10) !important
}

.mb-0 {
  margin-bottom: 0 !important
}

.mb-1 {
  margin-bottom: var(--v-space-2) !important
}

.mb-2 {
  margin-bottom: var(--v-space-4) !important
}

.mb-3 {
  margin-bottom: var(--v-space-5) !important
}

.mb-4 {
  margin-bottom: var(--v-space-6) !important
}

.mb-5 {
  margin-bottom: var(--v-space-7) !important
}

.mb-6 {
  margin-bottom: var(--v-space-8) !important
}

.mb-7 {
  margin-bottom: var(--v-space-9) !important
}

.mb-8 {
  margin-bottom: var(--v-space-10) !important
}

.ml-0 {
  margin-left: 0 !important
}

.ml-1 {
  margin-left: var(--v-space-2) !important
}

.ml-2 {
  margin-left: var(--v-space-4) !important
}

.ml-3 {
  margin-left: var(--v-space-5) !important
}

.ml-4 {
  margin-left: var(--v-space-6) !important
}

.ml-5 {
  margin-left: var(--v-space-7) !important
}

.ml-6 {
  margin-left: var(--v-space-8) !important
}

.ml-7 {
  margin-left: var(--v-space-9) !important
}

.ml-8 {
  margin-left: var(--v-space-10) !important
}

.mr-0 {
  margin-right: 0 !important
}

.mr-1 {
  margin-right: var(--v-space-2) !important
}

.mr-2 {
  margin-right: var(--v-space-4) !important
}

.mr-3 {
  margin-right: var(--v-space-5) !important
}

.mr-4 {
  margin-right: var(--v-space-6) !important
}

.mr-5 {
  margin-right: var(--v-space-7) !important
}

.mr-6 {
  margin-right: var(--v-space-8) !important
}

.mr-7 {
  margin-right: var(--v-space-9) !important
}

.mr-8 {
  margin-right: var(--v-space-10) !important
}

.p-0 {
  padding: 0 !important
}

.p-1 {
  padding: var(--v-space-2) !important
}

.p-2 {
  padding: var(--v-space-4) !important
}

.p-3 {
  padding: var(--v-space-5) !important
}

.p-4 {
  padding: var(--v-space-6) !important
}

.p-5 {
  padding: var(--v-space-7) !important
}

.p-6 {
  padding: var(--v-space-8) !important
}

.p-7 {
  padding: var(--v-space-9) !important
}

.p-8 {
  padding: var(--v-space-10) !important
}

.pt-0 {
  padding-top: 0 !important
}

.pt-1 {
  padding-top: var(--v-space-2) !important
}

.pt-2 {
  padding-top: var(--v-space-4) !important
}

.pt-3 {
  padding-top: var(--v-space-5) !important
}

.pt-4 {
  padding-top: var(--v-space-6) !important
}

.pt-5 {
  padding-top: var(--v-space-7) !important
}

.pt-6 {
  padding-top: var(--v-space-8) !important
}

.pt-7 {
  padding-top: var(--v-space-9) !important
}

.pt-8 {
  padding-top: var(--v-space-10) !important
}

.pb-0 {
  padding-bottom: 0 !important
}

.pb-1 {
  padding-bottom: var(--v-space-2) !important
}

.pb-2 {
  padding-bottom: var(--v-space-4) !important
}

.pb-3 {
  padding-bottom: var(--v-space-5) !important
}

.pb-4 {
  padding-bottom: var(--v-space-6) !important
}

.pb-5 {
  padding-bottom: var(--v-space-7) !important
}

.pb-6 {
  padding-bottom: var(--v-space-8) !important
}

.pb-7 {
  padding-bottom: var(--v-space-9) !important
}

.pb-8 {
  padding-bottom: var(--v-space-10) !important
}

.pl-0 {
  padding-left: 0 !important
}

.pl-1 {
  padding-left: var(--v-space-2) !important
}

.pl-2 {
  padding-left: var(--v-space-4) !important
}

.pl-3 {
  padding-left: var(--v-space-5) !important
}

.pl-4 {
  padding-left: var(--v-space-6) !important
}

.pl-5 {
  padding-left: var(--v-space-7) !important
}

.pl-6 {
  padding-left: var(--v-space-8) !important
}

.pl-7 {
  padding-left: var(--v-space-9) !important
}

.pl-8 {
  padding-left: var(--v-space-10) !important
}

.pr-0 {
  padding-right: 0 !important
}

.pr-1 {
  padding-right: var(--v-space-2) !important
}

.pr-2 {
  padding-right: var(--v-space-4) !important
}

.pr-3 {
  padding-right: var(--v-space-5) !important
}

.pr-4 {
  padding-right: var(--v-space-6) !important
}

.pr-5 {
  padding-right: var(--v-space-7) !important
}

.pr-6 {
  padding-right: var(--v-space-8) !important
}

.pr-7 {
  padding-right: var(--v-space-9) !important
}

.pr-8 {
  padding-right: var(--v-space-10) !important
}

.subheadline,
.title,
.subtitle {
  margin: 0 0 20px
}




.img-res {
  width: 100%
}

.padding-all {
  padding: var(--v-space-4)
}

.page-min-height {
  min-height: 101vh
}

.display-none {
  display: none
}

.max-width {
  margin: 10px auto;
  max-width: 600px
}


.hero-404 {
  margin-top: 50px;
  min-height: 300px
}

.cnt-404 {
  height: 100vh;
  min-height: 800px
}

.img-404 {
  width: 100px
}

@-webkit-keyframes animate-svg-stroke-1 {
  0% {
    stroke-dasharray: 3096.04px;
    stroke-dashoffset: 3096.04px
  }

  to {
    stroke-dasharray: 3096.04px;
    stroke-dashoffset: 6192.09px
  }
}

@keyframes animate-svg-stroke-1 {
  0% {
    stroke-dasharray: 3096.04px;
    stroke-dashoffset: 3096.04px
  }

  to {
    stroke-dasharray: 3096.04px;
    stroke-dashoffset: 6192.09px
  }
}

.svg-intro-1 {
  -webkit-animation: animate-svg-stroke-1 3s cubic-bezier(.47, 0, .745, .715) 1s both;
  animation: animate-svg-stroke-1 3s cubic-bezier(.47, 0, .745, .715) 1s both
}

@-webkit-keyframes animate-svg-stroke-2 {
  0% {
    stroke-dasharray: 7145.8369140625px;
    stroke-dashoffset: 7145.8369140625px
  }

  100% {
    stroke-dasharray: 7145.8369140625px;
    stroke-dashoffset: 0
  }
}

@keyframes animate-svg-stroke-2 {
  0% {
    stroke-dasharray: 7145.8369140625px;
    stroke-dashoffset: 7145.8369140625px
  }

  100% {
    stroke-dasharray: 7145.8369140625px;
    stroke-dashoffset: 0
  }
}

.svg-menu-1 {
  -webkit-animation: animate-svg-stroke-2 2s linear 1s both;
  animation: animate-svg-stroke-2 2s linear 1s both;
  width: auto
}

#main-menu svg {
  height: calc(100vh + 381px) !important;
  transform: translate(-34%, -23vh) !important;
  width: 100% !important
}

@keyframes border-transform {

  0%,
  100% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%
  }

  14% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%
  }

  28% {
    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%
  }

  42% {
    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%
  }

  56% {
    border-radius: 61% 39% 67% 33%/70% 50% 50% 30%
  }

  70% {
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%
  }

  84% {
    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%
  }
}

.progress-wrap {
  position: fixed;
  border-radius: 50px;
  bottom: 78px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.15);
  cursor: pointer;
  display: block;
  height: 56px;
  right: 30px;
  width: 56px;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease
}

.progress-wrap::after {
  -webkit-transition: all 200ms linear;
  color: var(--white);
  content: "↑";
  cursor: pointer;
  display: block;
  font-size: 24px;
  height: 56px;
  left: 0;
  line-height: 56px;
  position: absolute;
  text-align: center;
  top: 0;
  transition: all 200ms linear;
  width: 56px;
  z-index: 1
}

.progress-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.35s ease, transform 0.35s ease;
  z-index: 0;
  pointer-events: none;
}

.progress-wrap:hover::before {
  opacity: 0.18;
  transform: scale(1.25);
}

.progress-wrap svg path {
  fill: none
}

.progress-wrap svg.progress-circle path {
  -webkit-transition: all 200ms linear;
  box-sizing: border-box;
  stroke: var(--primary);
  stroke-width: 4;
  transition: all 200ms linear
}

.progress-circle {
  height: 56px;
  width: 56px
}

body.light .progress-wrap {
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2);
}

body.light .progress-wrap::after {
  color: var(--v-color-text0);
}

body.light .progress-wrap svg.progress-circle path {
  stroke: var(--v-color-void);

}

body.light .progress-wrap::before {
  background: rgba(0, 0, 0, 0.4);
}

.progress-wrap.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.panel-full-image {
  border-radius: 8px;
  position: relative;
  z-index: -2
}

body.light .panel-full-image {
  background: var(--v-color-surface2) !important;
}

.bg-av .accordion-section,
.bg-av .accordion-header,
.bg-av .accordion-button {
  color: var(--white) !important
}

.accordion-header {
  align-content: center;
  align-items: center;
  border-bottom: solid 1px var(--light-grey);
  cursor: pointer;
  display: flex;
  font-size: var(--v-font-size-h2);
  justify-content: space-between;
  margin-bottom: -1px;
  padding: 3.3rem 0;
  position: relative;
  transition: all 1.2s cubic-bezier(.215, .61, .355, 1)
}

.accordion-header:first-child {
  border-top: solid 1px var(--light-grey);
}

.accordion-header::after {
  background: var(--v-color-text4);
  opacity: 0.12;
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transform: scaleY(0);
  transform-origin: left bottom;
  transition: transform .5s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
  width: 100%;
  z-index: 0
}

body.light .accordion-header::after {
  background: var(--v-color-text3);
  opacity: 0.12;
}

.accordion-header:hover::after {
  transform: scaleY(100%)
}

.accordion-header .accordion-button {
  padding: 0;
  text-align: left;
  transition: padding .5s ease-in-out;
  font-weight: var(--book);
}

.accordion-header:hover .accordion-button {
  padding-left: 35px
}

/* Accordion — inner content vertical alignment */
.accordion-content .card-body.row {
  align-items: center;
}

/* Accordion — max-height fluida e morbida */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1), padding 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0 1rem;

}

.accordion-content.is-open {
  transition: all 0.3s ease-in-out;
}

.icon-accordion {
  float: right;
  margin-right: 25px;
  transform: rotate(135deg);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  color: currentColor;
}

.icon-accordion.is-open {
  transform: rotate(-45deg);
}

.accordion-button {
  background: transparent;
  border: 0 transparent;
  color: var(--color-text0)
}

.project-info {
  list-style: none;
  padding: 0
}

.filters-select {
  appearance: auto;
  background: transparent;
  border: solid 2px var(--primary);
  border-radius: 100px;
  box-shadow: none !important;
  font-size: var(--v-font-size-h5);
  height: 55px;
  outline: none;
  padding: 0 34px;
  width: 100%
}

.cnt-filter {
  flex-wrap: wrap
}

.cnt-filter .active {
  display: flex;
}

.cnt-title-work {
  bottom: 0;
  color: var(--white);
  padding: 0 10% 10%;
  position: absolute;
  width: 100%;
  z-index: 99
}

.cnt-title-work h3 {
  margin-bottom: 10px
}

/* Titoli progetti leggibili in light mode */
body.light .cnt-title-work,
body.light .cnt-title-work h3 {
  color: var(--v-color-void);
}

.cont-control-cntact {
  height: 113px;
  position: relative
}

.footer-contact.wp-block-columns.is-layout-flex {
  gap: 1em !important;
  line-height: 31px
}

.cnt-logo-contact {
  display: inline-block !important;
  left: 43px;
  position: relative;
  top: 39px;
  opacity: 1 !important;
  visibility: visible !important;
  color: var(--v-color-text0);
}

.cont-contatti {
  height: 100%;
  overflow: auto;
  padding: 3.29vw !important;
  background: var(--v-color-surface2);
}

body.light .cont-contatti {
  background: var(--v-color-surface2);
}

.message {
  background: var(--color-text);
  color: var(--color-bg);
  padding: 1rem;
  text-align: center
}

.frame__title {
  margin: 0 0 1rem
}

.frame__links {
  display: block
}

.frame__links>:not(:last-child),
.frame__demos>:not(:last-child) {
  margin-right: 1rem
}

.frame__demos {
  margin: 1rem 0
}

.frame__demos span {
  color: var(--color-link)
}

.frame__initials {
  line-height: 18px;
  pointer-events: none
}

.content p {
  color: var(--color-content);
  max-width: 80vw;
  text-transform: none
}

.content p a {
  font-style: italic;
  position: relative
}

.content p a::after {
  background: currentColor;
  bottom: .5vw;
  content: '';
  height: 1px;
  left: 0;
  opacity: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: all .25s ease-out;
  width: 100%
}

.content p a:hover::after,
.content p a:focus::after {
  opacity: 1;
  transform: scaleX(1)
}

.menu {
  justify-content: center;
  list-style: none;
  overflow: hidden;
  padding: 0;
  position: relative
}

.side-menu-left {
  align-self: flex-end;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 37px
}

.cnt-side-menu {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center
}

.svg-menu-logo {
  height: 100px
}

.side_menu {
  gap: 4%;
  justify-content: space-around;
  padding: 0;
  width: 100%
}

.menu-item {
  color: var(--color-text0) !important;
  cursor: default;
  cursor: pointer;
  transition: all 1s cubic-bezier(.215, .61, .355, 1)
}

.menu-item li {
  list-style: none
}

.menu-item a {
  color: var(--color-text0) !important;
  transition: all 1s cubic-bezier(.215, .61, .355, 1)
}

.menu__item:hover,
.menu__item:focus {
  color: var(--color-menu-link-hover)
}

html {
  background-color: var(--bg-color);
  transition: background-color 0.6s ease;
}

body {
  background-color: var(--bg-color);
  transition: background-color 0.6s ease;
  color: var(--text-main);
  font-size: var(--v-font-size-body);
  height: auto;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  scrollbar-gutter: stable;
}

body {
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background 0.4s ease-in-out, color 0.4s ease-in-out;
  position: relative;
}

/* Animazione Slide + Gradient per Light/Dark Mode */
@keyframes slideGradient {
  0% {
    transform: translateY(-100%);
    background: linear-gradient(180deg,
        var(--v-color-void) 0%,
        var(--v-color-surface1) 100%);
    opacity: 1;
  }

  100% {
    transform: translateY(100%);
    background: linear-gradient(180deg,
        var(--v-color-surface1) 0%,
        var(--v-color-void) 100%);
    opacity: 0;
  }
}

body.theme-switching::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  animation: slideGradient 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.bg-av {
  background: var(--primary) !important
}

body.admin-bar .navbar-fixed-top {
  height: auto;
  position: fixed;
  top: 32px;
  z-index: 1000
}

.svg-text-center {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: hidden
}

.has-scroll-smooth [data-scroll-container] {
  overflow: hidden
}

.scroll-container {
  overflow-x: hidden
}

.preloader {
  background: var(--secondary);
  clip-path: circle(153% at 50% 50%) !important;
  height: 100%;
  left: 0;
  opacity: 1;
  position: fixed;
  top: 0;
  transition: opacity .45s ease, visibility 0s linear .45s;
  visibility: visible;
  width: 100%;
  z-index: 9999;
}

body.light .preloader {
  background: var(--v-color-void);
}

.preloader.hide {
  clip-path: circle(0% at 50% 50%);
  opacity: 0;
  visibility: hidden
}

.preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader.is-gone {
  display: none !important;
}

.preloader svg {
  display: flex;
  height: 100vh;
  margin: auto;
  overflow-x: hidden;
  overflow-y: hidden;
  width: 250px
}

.preloader__logo {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--v-color-text0);
  transform: translateZ(0);
  animation: preloaderFade 1.4s ease-out infinite;
}

body.light .preloader__logo {
  color: var(--v-color-text0);
}

.preloader__logo svg {
  width: 120px;
  height: auto;
}

.preloader__path {
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: preloaderDraw 1.4s cubic-bezier(.45, 0, .55, 1) infinite;
}

.preloader.is-hidden .preloader__logo,
.preloader.is-hidden .preloader__path {
  animation-play-state: paused;
}

@keyframes preloaderDraw {
  0% {
    stroke-dashoffset: 420;
  }

  50% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: -420;
  }
}

@keyframes preloaderFade {

  0%,
  100% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }
}

.container {
  width: 100%;
  max-width: 2200px;
  margin: 0 auto;
  padding: 0 var(--v-space-7);
}

.container-box {
  width: 100%;
  padding: 0 var(--v-space-7);
}

/* Breakpoint: Extra small devices (320px - 479px) */
@media screen and (max-width: 479px) {

  .container,
  .container-box {
    padding: var(--v-space-3) var(--v-space-3);
  }

  .header {
    padding: var(--v-space-3) var(--v-space-3);
  }

  .hero-container {
    padding: var(--v-space-3) var(--v-space-3);
  }
}

/* Breakpoint: Small devices (480px - 639px) */
@media screen and (min-width: 480px) and (max-width: 639px) {

  .container,
  .container-box {
    padding: 0 var(--v-space-5);
  }

  .header {
    padding: var(--v-space-3) var(--v-space-5);
  }

  .hero-container {
    padding: 0 var(--v-space-5);
  }
}

/* Breakpoint: Tablet (640px - 767px) */
@media screen and (min-width: 640px) and (max-width: 767px) {

  .container,
  .container-box {
    padding: 0 var(--v-space-7);
  }

  .header {
    padding: var(--v-space-3) var(--v-space-5);
  }

  .hero-container {
    padding: 0 var(--v-space-7);
  }
}

/* Breakpoint: Tablet (768px - 1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {

  .container,
  .container-box {
    padding: 0 var(--v-space-7);
  }

  .header {
    padding: var(--v-space-3) var(--v-space-5);
  }

  .hero-container {
    padding: 0 var(--v-space-7);
  }
}

/* Breakpoint: Large tablet / Small desktop (1024px - 1279px) */
@media screen and (min-width: 1024px) and (max-width: 1279px) {

  .container,
  .container-box {
    padding: 0 var(--v-space-7);
  }

  .header {

    padding: var(--v-space-3) var(--v-space-5);
  }

  .hero-container {
    padding: 0 var(--v-space-7);
  }
}

/* Breakpoint: Desktop (1280px - 1439px) */
@media screen and (min-width: 1280px) and (max-width: 1439px) {

  .container {
    padding: 0 var(--v-space-10);
  }

  .container-box {
    padding: 0 var(--v-space-7);
  }

  .header {
    padding: var(--v-space-3) var(--v-space-10);
  }

  .hero-container {
    margin: 0 auto;
    padding: 0 var(--v-space-10);
  }
}

/* Breakpoint: Large desktop (1440px - 1919px) */
@media screen and (min-width: 1440px) and (max-width: 1919px) {

  .container {
    padding: 0 var(--v-space-10);
  }

  .container-box {
    padding: 0 var(--v-space-7);
  }

  .header {
    padding: var(--v-space-5) var(--v-space-10);
  }

  .hero-container {
    margin: 0 auto;
    padding: 0 var(--v-space-10);
  }
}

/* Breakpoint: Extra large desktop (1920px+) */
@media screen and (min-width: 1920px) {

  .container {
    padding: 0 var(--v-space-10);
  }

  .container-box {
    padding: 0 var(--v-space-7);
  }

  .header {
    max-width: 1360px;
    padding: var(--v-space-5) var(--v-space-10);
  }

  .hero-container {
    margin: 0 auto;
    padding: 0 var(--v-space-10);
  }
}

/* -------------------------------------------------------------------------------- */
/* ! WP BLOCKS → THEME GRID NORMALIZATION                                           */
/* Mappa i blocchi nativi Gutenberg al framework di griglia del tema.               */
/* Gutter: --v-grid-gutter (24px) | Container: --v-container-max-width (1200px)     */
/* Colonne: la % si imposta nell'editor (es. 40% / 60%) come col-40/col-60         */
/* -------------------------------------------------------------------------------- */

/* Columns block: gap uguale al gutter del tema */
.wp-block-columns.is-layout-flex,
.wp-block-columns.is-layout-grid {
  gap: var(--v-grid-gutter) !important;
}

/* Stack mobile alle stesse breakpoint del tema (640px) */

/* Rimuove il margin-bottom automatico di WP che crea spazio doppio */
.wp-block-columns {
  margin-bottom: 0;
}

/* Group block: nessun gap di default (lo si aggiunge manualmente) */
.wp-block-group.is-layout-flex,
.wp-block-group.is-layout-grid {
  gap: 0;
}

/* Separator: usa il colore bordo del design system */
.wp-block-separator {
  border: 0 !important;
  height: 1px !important
}

.accordion,
.accordion-section {
  width: 100%
}

/* Filter select mobile: visibile SOLO su mobile, nascosto su desktop */
.filter-select-mobile {
  width: 100%;
  display: none;
  /* nascosto di default — mostrato solo sotto 768px */
}

@media screen and (max-width: 767px) {
  .filter-select-mobile {
    display: block;
  }
}

.box-img-work,
.cnt-form {
  position: relative
}



body.light {
  --selection-bg: var(--v-color-void);
  --selection-color: var(--white);
}

::selection {
  background: var(--selection-bg);
  color: var(--selection-color);
}

::-moz-selection {
  background: var(--selection-bg);
  color: var(--selection-color);
}



p {
  font-size: var(--v-font-size-body);
}

.headline {
  position: relative;
  z-index: 1
}

h1,
.h1 {
  font-family: "Syne", sans-serif;
  font-size: var(--v-font-size-h1);

  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--text-heading);
}

h2,
.h2 {
  font-family: "Syne", sans-serif;
  font-size: var(--v-font-size-h2);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.3px;
  color: var(--text-heading);
}

h3,
.h3 {
  font-family: "Syne", sans-serif;
  font-size: var(--v-font-size-h3);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.3px;
  color: var(--text-heading);
}

h4,
.h4 {
  font-family: "Syne", sans-serif;
  font-size: var(--v-font-size-h4);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-main);
}

h5,
.h5 {
  font-family: "DM Mono", monospace;
  font-size: var(--v-font-size-h5);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: var(--v-ls-mono);

  color: var(--text-sub);
  text-transform: uppercase;
}

h1,
h2,
h3,
h4,
h5,
h1,
h6 {
  margin: 0;
  padding: 0
}

.text-white,
.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white p,
.text-white a {
  color: var(--white) !important
}

.text-white .button {
  border-color: var(--white) !important;
  color: var(--white)
}

.text-red {
  color: var(--primary)
}

.bg-yellow {
  background: var(--v-color-blue)
}

.bg-green {
  background: var(--primary)
}

.bg-av .cnt-text-logobrand {
  color: var(--white)
}

.br-yellow {
  border: var(--v-color-blue) solid 1px
}

.br-green {
  border: solid 1px var(--primary)
}

.text-center,
.text-center h1,
.text-center h2,
.text-center h3,
.text-center h4,
.text-center p {
  text-align: center
}

@keyframes reveal {
  0% {
    transform: translate(0, 100%)
  }

  100% {
    transform: translate(0, 0)
  }
}

/* ! TEXT REVEAL  */
@media screen and (prefers-reduced-motion: reduce),
(update: slow) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    /* Hat tip Nick/cssremedy (https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/#comment-1700170) */
    transition-duration: 0.001ms !important;
  }
}

.text-reveal {
  overflow: hidden;
  display: block;
}

.text-reveal span,
.text-reveal b,
.text-reveal>div {
  display: block;
  transform: translateY(115%);
  transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.text-reveal.is-inview span,
.text-reveal.is-inview b,
.text-reveal.is-inview>div {
  transform: translateY(0);
}


a {
  color: var(--primary);
  text-decoration: none
}



input[type=submit],
.button {
  --ripple-x: 50%;
  --ripple-y: 50%;
  --ripple-opacity: 0;
  --ripple-scale: 0;
  font-family: "DM Mono", monospace;
  border: 1px solid var(--border-color);
  border-radius: var(--v-radius-pill);
  color: var(--text-heading);
  cursor: pointer;
  display: flex;
  font-size: var(--v-font-size-h5);
  font-weight: 600;
  line-height: var(--v-lh-none);
  letter-spacing: var(--v-ls-tight);

  padding: 18px 24px;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  transition: all .3s cubic-bezier(0.28, 0.44, 0.49, 1);
  background: transparent;
  align-content: center;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--ripple-x) var(--ripple-y), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 70%);
  transform: scale(var(--ripple-scale, 0));
  opacity: var(--ripple-opacity, 0);
  transition: transform 0.5s ease, opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}

.button>span {
  position: relative;
  z-index: 2;
}


.button:hover {
  color: var(--white) !important;
  border-color: var(--white);
}

.button:hover::after,
.button.is-hovered::after {
  transform: scale(3.8) !important;
  opacity: 1 !important;
}

.button.bg-white {
  background: var(--white);
  color: var(--v-color-void);
  border: none;
}


.button.bg-white:hover {
  background: var(--white);
  color: var(--v-color-void) !important;
  border-color: var(--white);
}


.button.bg-white::after {
  background: radial-gradient(circle at var(--ripple-x) var(--ripple-y), rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0) 70%);
}

.button-frame {
  color: var(--secondary);
  display: inline-block;
  margin-top: 15px;
  padding: 20px 60px 20px 40px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: all .3s cubic-bezier(0.28, 0.44, 0.49, 1)
}

.button-frame:after,
.button-frame:before {
  border: 2px solid var(--secondary);
  bottom: 0;
  content: " ";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: all .3s cubic-bezier(0.28, 0.44, 0.49, 1)
}

.button-frame:after {
  transform: translate(3px, 3px)
}

.button-frame:before {
  transform: translate(-3px, -3px)
}

.button-frame:hover:after,
.button-frame:hover:before {
  transform: translate(0px, 0px)
}

.button-frame span {
  position: relative
}

.button-frame span:after {
  background: url(img/arrow-right.svg) no-repeat center center;
  content: " ";
  height: 30px;
  position: absolute;
  right: -40px;
  top: -3px;
  transition: all .3s cubic-bezier(0.28, 0.44, 0.49, 1);
  width: 30px
}

.button-frame:hover span:after {
  right: -50px
}

.button-frame--small {
  padding: 10px 20px
}


.hide-scroll {
  transform: translate3d(0, -100%, 0) !important;
}

#site-header.unpinned {
  transform: translate3d(0, -100%, 0);
}

#cnt-header {
  transition: all 1s cubic-bezier(.215, .61, .355, 1)
}

#site-header {
  overflow: visible;
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  backface-visibility: hidden;
  /* Transizione più reattiva: 0.4s */
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), background 0.4s ease, backdrop-filter 0.4s ease;
}

.header {
  display: flex;

  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  width: 100%;

  transition: all 0.4s ease;
}

/* Glassmorphism Header State */
#site-header.is-scrolled {



  background: rgba(6, 10, 14, 0.31);
  /* Using --v-color-void equivalent */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.light #site-header.is-scrolled {
  background: rgba(237, 242, 247, 0.49);
  /* --v-color-text0 con opacità */
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

#site-header.is-scrolled .header {
  padding: var(--v-space-3) var(--v-space-10);
}



/* Hero Section Styles */
.hero-section {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  overflow: hidden;

}


/* Homepage Hero */
.home .hero-section {
  min-height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}

/* Pagine Interne Standard (About, Metodo, AI Lab, Lavori) - 60-70vh */
body:not(.home):not(.single-progetti) .hero-section {
  min-height: 360px;
  max-height: 70vh;
  background-image: none !important;
  color: var(--v-color-text0);
  padding: var(--v-space-10) 0 var(--v-space-9) 0;
  display: flex;
  align-items: center;
}


/* Caso Speciale: Single Progetto (80-90vh Cinematic) */
body.single-progetti .hero-section,
.hero-section.hero-project-full {
  min-height: 80vh;
  max-height: 90vh;
  display: flex;
  align-items: flex-end;
  /* Testo in basso */
  padding-bottom: var(--v-padding-lateral-desktop);
  background-size: cover;
  background-position: center;
  position: relative;
}


body.single-progetti .hero-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(6, 10, 14, 0) 0%, rgba(6, 10, 14, 0.85) 70%, rgba(6, 10, 14, 1) 100%);
  z-index: 1;
}

body.single-progetti .hero-section .hero-container {
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  min-height: calc(80vh - var(--v-space-10));
  text-align: left;
  gap: var(--v-space-5);
}



.hero-project-full {
  min-height: 75vh;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  text-align: center;
}

.hero-project-full .hero-container {
  justify-content: center;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 100%);
  z-index: 1;
}

body.light .hero-overlay {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.3) 100%);
}

.hero-container {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  align-items: center;
  min-height: 100vh;
}


.hero-split .hero-content {
  flex: 5.5;
}

.hero-image-right {
  flex: 4.5;
  position: relative;
  isolation: isolate;
  border-radius: 8px;
  overflow: hidden;
  opacity: 0;
  transition: filter 0.6s ease;
  max-height: 100vh;
  margin-top: -20px;
}


.hero-img-light {
  display: none !important;
}

body.light .hero-img-dark {
  display: none !important;
}

body.light .hero-img-light {
  display: block !important;
}

body.light .hero-image-right {
  box-shadow: none;
  transition: filter 0.6s ease;
}

.hero-img-dark,
.hero-img-light {
  width: 100%;
  height: 100vh;
  display: block;
  object-fit: cover;
  object-position: top center;
}

.hero-image-right img {
  width: 100%;
  height: 100vh;
  display: block;
  object-fit: cover;
  object-position: top center;
  filter: grayscale(1);
  transition: filter 0.6s ease;
}

.hero-image-right:hover img,
.hero-image-right:focus-within img {
  filter: grayscale(0);
}

.hero-top-headline {
  margin-bottom: var(--v-space-2);
  overflow: hidden;
}

.hero-top-headline span {
  display: inline-block;
  transform: translateY(115%);
}


.hero-title {
  font-family: "Syne", sans-serif !important;
  line-height: var(--v-lh-tight);

  margin: 0;
  display: block;
  font-weight: 800;
}


/* Regola specifica Titolo Pagina Interna (~75% homepage — gerarchia consapevole) */
body:not(.home):not(.single-progetti) .hero-title {
  font-size: var(--v-font-size-hero-inner) !important;
  letter-spacing: var(--v-ls-hero);
  max-width: none;
  /* Rimosso max-width per wrap naturale */
}



/* Regola Titolo Progetto Single (pagina interna — gerarchia consapevole) */
body.single-progetti .hero-title {
  font-size: var(--v-font-size-hero-inner) !important;
  line-height: var(--v-lh-tight);
  letter-spacing: var(--v-ls-hero);
  font-weight: 800;
  text-align: left !important;

}

/* New rule from instruction */
body.single-progetti.home .hero-title {
  font-size: var(--v-font-size-hero) !important;
  line-height: var(--v-lh-tight);
}

.hero-subtitle {
  font-family: "DM Sans", sans-serif !important;
  max-width: 670px;
  line-height: 1.6;
}

/* Metrica e Numero Progetto */
.hero-metrica {
  font-size: var(--v-font-size-body);
  color: var(--v-color-text2);
  font-family: 'DM Sans', sans-serif;
  margin-top: 10px;
}

.hero-metrica b,
.hero-metrica .number {
  color: var(--v-color-green) !important;
  font-weight: 700;
}

/* Regola sottotitolo pagine interne */
body:not(.home) .hero-subtitle {
  font-size: var(--v-font-size-h4) !important;
  font-weight: 400;
  color: var(--v-color-text2);
}



.hero-ctas {
  display: flex !important;
  gap: var(--v-space-5);
  margin-top: var(--v-space-7);
  opacity: 0;
  transform: translateY(15px);
}

/* Hero Back Button - Single Progetto */
.hero-back-btn {
  position: absolute;
  top: 140px;
  left: var(--v-space-7);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--v-color-text2);
  font-size: var(--v-font-size-small);
  font-weight: 500;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  z-index: 10;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.hero-back-btn:hover,
.hero-back-btn:active,
.hero-back-btn:focus {
  outline: none !important;
  box-shadow: none !important;
  color: var(--v-color-text2) !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
}

.hero-back-btn svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.5;
}

body.light .hero-back-btn {
  color: var(--v-color-text2);
}

/* Hero Categories - Single Progetto */
.hero-categories {
  display: flex !important;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin-bottom: var(--v-space-5);
  opacity: 0;
  /* Base per animazione fade */
}

/* Classe per attivare il fade in manuale o via Locomotive */
.hero-categories.is-inview,
.hero-categories.fade-up.is-inview {
  opacity: 1;
}

.hero-category-tag {
  display: inline-block;
  padding: 0;
  border: none;
  font-size: var(--v-font-size-small);
  font-weight: 400;
  color: var(--v-color-text2);
  text-transform: none;
  letter-spacing: 0;
}

.hero-category-tag::after {
  content: " · ";
  margin: 0 0.5em;
  /* Spazio equidistante intorno al puntino */
  color: var(--v-color-text3);
}

.hero-category-tag:last-child::after {
  content: "";
}

/* Nessun effetto hover */
.hero-category-tag:hover {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--v-color-text2) !important;
}

body.light .hero-category-tag {
  color: var(--v-color-text3);
}

body.light .hero-category-tag:hover {
  color: var(--v-color-text3) !important;
}

.hero-archive {
  min-height: 75vh;

}


/* 3-Column Balanced Layout */
/* .header__logo,
.header-control {
  flex: 1;
} */

.header__logo {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

/* Logo visibility + sizing */
.logo-desktop {
  display: block;
}

.logo-mobile {
  display: none;
}

.logo-desktop .custom-logo-link,
.logo-mobile .custom-logo-link {
  display: flex;
  align-items: center;
  height: 44px;
}

.logo-desktop .custom-logo-link svg,
.logo-mobile .custom-logo-link svg {
  height: 44px;
  width: auto;
  color: var(--text-heading);
}

.header-nav-desktop {
  display: flex;
  justify-content: center;
  flex: none;
  width: auto;
}

#menu-top-menu {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: var(--v-space-6);
  width: auto;
}

.header-control {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--v-space-4);

}

.header__icon {

  border-radius: 100%;
  border-radius: 100%;
  color: var(--primary);
  cursor: pointer;
  height: 56px;
  position: relative;
  transition: all .5s cubic-bezier(.215, .61, .355, 1);
  width: 56px;
  z-index: 99999
}

.desk-only {
  display: flex !important;
}

.mob-only {
  display: none !important;
}


/* Menu responsivo per tablet */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
  #menu-top-menu {
    gap: 24px;
  }

  #menu-top-menu .menu-item a {
    font-size: var(--v-font-size-h5);
  }
}

/* Menu responsivo per small desktop */
@media screen and (min-width: 1280px) and (max-width: 1439px) {
  #menu-top-menu {
    gap: 28px;
  }

  #menu-top-menu .menu-item a {
    font-size: var(--v-font-size-h5);
  }
}

/* Forza stato chiuso del menu mobile su schermi > 991px —
   impedisce che rimanga aperto dopo un resize */

.site-nav-wrap {
  display: flex;
  align-items: center;
  height: 100%;
}

.site-nav-desk {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 30px;
}

.site-nav-desk li {
  display: inline-block;
}

.site-nav-desk li a {
  color: var(--secondary);
  text-decoration: none;
  font-weight: var(--medium);
  font-size: var(--v-font-size-base);
  transition: color 0.3s ease;
}

.dark .site-nav-desk li a {
  color: var(--white);
}

.site-nav-desk li a:hover {
  color: var(--primary);
}

/* Effetto hover menu desktop: voce attiva illuminata, altre scurite */
.site-nav-desk li a {
  transition: color 0.3s ease, opacity 0.3s ease;
}

/* Dark mode: voci non attive diventano grigie */
.site-nav-desk.nav-dimmed li a:not(.nav-active) {
  color: rgba(255, 255, 255, 0.25) !important;
}

.site-nav-desk.nav-dimmed li a.nav-active {
  color: var(--white) !important;
}

/* Light mode: voci non attive diventano grigie */
body.light .site-nav-desk.nav-dimmed li a:not(.nav-active) {
  color: rgba(0, 0, 0, 0.25) !important;
}

body.light .site-nav-desk.nav-dimmed li a.nav-active {
  color: var(--v-color-text0) !important;
}

/* Reset: annulla qualsiasi stile del menu mobile che filtra su .menu-item condivisi */
#desktop-primary-nav .menu-item,
#desktop-primary-nav .menu-item a {
  display: inline-block !important;
  transform: none !important;
  opacity: 1 !important;
  overflow: visible !important;
  margin-bottom: 0 !important;
  transition: color 0.3s ease !important;
  font-family: 'DM Mono', monospace !important;
  text-transform: uppercase !important;
  font-size: var(--v-font-size-small);
  letter-spacing: 0.05em;
}

.site-nav {
  list-style-type: none;
  padding: 0;
  position: relative
}

.site-nav>li {
  display: inline-block
}

.site-nav>li a {
  color: var(--secondary);
  display: block;
  opacity: .5;
  padding: var(--v-space-5);
  text-decoration: none
}

.logo {
  display: block;
  margin-top: 15px;
  padding: 10px;
  text-align: center
}

.line-menu {
  background: var(--primary);
  bottom: 24px;
  height: 2px;
  position: absolute
}

.active a {
  opacity: 1 !important
}

/* ================================================
   CUSTOM CURSOR — sistema completo
   ================================================ */

/* Nasconde cursore di sistema su desktop */

/* ---- Pallino centrale ---- */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  background: var(--primary);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999999;
  will-change: transform;
}

body.light .cursor {
  background: var(--v-color-text0);
}

/* Pallino nascosto durante hover card */
.cursor.cursor-hidden {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0) !important;
}

/* ---- Ring / outline ---- */
.outline {
  position: fixed;
  top: 0;
  left: 0;
  width: 38px;
  height: 38px;
  border: 1.5px solid var(--v-color-border);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999998;
  will-change: transform;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.3s ease,
    border 0.3s ease,
    opacity 0.3s ease;
}

body.light .outline {
  border-color: rgba(0, 0, 0, 0.45);
}

/* ---- Hover su card progetto: blob glassmorphism ---- */
.outline.cursor_project_hover {
  width: 160px;
  height: 160px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: none;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

body.light .outline.cursor_project_hover {
  background: rgba(20, 20, 20, 0.85);
  box-shadow: 0 12px 40px rgba(255, 255, 255, 0.15);
}

/* Testo dentro il blob */
.cursor-text {
  opacity: 0;
  font-family: "DM Mono", monospace;
  font-size: var(--v-font-size-small);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  color: var(--v-color-text0);
  pointer-events: none;
  line-height: 1.3;
  max-width: 120px;
  transition: opacity 0.25s ease;
}

.outline.cursor_project_hover .cursor-text {
  opacity: 1;
}

body.light .outline.cursor_project_hover .cursor-text {
  color: var(--white);
}

/* ---- Hover su pulsanti / link: glassmorphism con freccia ---- */
.outline.cursor-interactive-hover {
  width: 64px;
  height: 64px;
  border: none;
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10), 0 4px 24px rgba(0, 0, 0, 0.18);
}

body.light .outline.cursor-interactive-hover {
  background: rgba(15, 15, 15, 0.12);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18), 0 4px 24px rgba(0, 0, 0, 0.1);
}

/* Freccia dentro il cursore */
.cursor-arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

body.light .cursor-arrow {
  color: rgba(15, 15, 15, 0.9);
}

.outline.cursor-interactive-hover .cursor-arrow {
  opacity: 1;
}

@keyframes cursor-ring-pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.35);
  }

  50% {
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0);
  }
}

@keyframes cursor-ring-pulse-light {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.22);
  }

  50% {
    box-shadow: 0 0 0 8px rgba(0, 0, 0, 0);
  }
}

/* ---- Pulsante stesso: glow pulsante su hover cursore ---- */
.btn-cursor-focus {
  animation: btn-focus-pulse 1.4s ease-out infinite !important;
}

body.light .btn-cursor-focus {
  animation: btn-focus-pulse-light 1.4s ease-out infinite !important;
}

@keyframes btn-focus-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.45);
  }

  100% {
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
  }
}

@keyframes btn-focus-pulse-light {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.35);
  }

  100% {
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
  }
}



/* ========================================
   CURSOR TRAIL - Effetto scia animato
   ======================================== */

.cursor-trail-particle {
  position: fixed;
  width: 8px;
  height: 8px;
  background: var(--primary);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999998;
  box-shadow: 0 0 8px rgba(237, 115, 26, 0.4);
  will-change: opacity, transform;
}

body.light .cursor-trail-particle {
  background: var(--secondary);
  box-shadow: 0 0 8px rgba(47, 48, 51, 0.15);
}



#menu-menu-social .menu-item {
  display: table;
  line-height: 2.5rem;
  overflow: hidden
}

#menu-top-menu .menu-item {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  overflow: visible;
  white-space: nowrap;
  flex-shrink: 0;
}

#menu-menu-social .menu-item a,
#menu-top-menu .menu-item a {
  display: inline-block;
  white-space: nowrap;
  transform: translate3d(0, 100%, 0);
  transition: all 1s cubic-bezier(.4, .0, .0, 1);
  font-family: 'DM Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

#menu-menu-social .menu-item.is-inviews a,
#menu-top-menu .menu-item.is-inviews a {
  transform: none;
  transform: translate3d(0, 0, 0)
}

.menu-item {
  display: inline;
  position: relative
}

#menu-menu-social .menu-item a:nth-child(1),
#menu-top-menu .menu-item a::after:nth-child(1) {
  transition-delay: .5s
}

#menu-menu-social .menu-item a:nth-child(2),
#menu-top-menu .menu-item a::after:nth-child(3) {
  transition-delay: .8s
}

#menu-menu-social .menu-item a:nth-child(3),
#menu-top-menu .menu-item a::after:nth-child(4) {
  transition-delay: 1s
}

#menu-menu-social .menu-item a:nth-child(4),
#menu-top-menu .menu-item a::after:nth-child(5) {
  transition-delay: 1.2s
}

#menu-menu-social .menu-item a:nth-child(5),
#menu-top-menu .menu-item a::after:nth-child(6) {
  transition-delay: 1.4s
}

#menu-menu-social .menu-item a:nth-child(6),
#menu-top-menu .menu-item a::after:nth-child(7) {
  transition-delay: 1.6s
}

.filter-item-span {
  display: flex !important
}

.filter-item.active,
.filter-item:hover {
  color: var(--primary)
}

.filter-item {
  display: flex;
  position: relative;
  transition: all .5s cubic-bezier(.215, .61, .355, 1)
}

#desktop-primary-nav .menu-item a::after {
  display: none !important;
}

.site-nav-desk {
  position: relative;
  /* Coordinate system for the moving line */
}

.nav-moving-line {
  position: absolute;
  bottom: 0px;
  left: 0;
  height: 1.5px;
  background-color: var(--primary);
  pointer-events: none;
  opacity: 0;
  z-index: 5;
  will-change: transform, width;
}

body.light .nav-moving-line {
  background-color: var(--v-color-text0);
}

/* Underline handled by JS sliding logic */

.cnt-filter-nav {
  align-items: center;
  flex-wrap: wrap
}

/* -------------------------------------------------------------------------------- */

#main-menu svg {
  position: absolute
}

#menu-top-menu .menu-item {
  display: table;
  font-size: var(--v-font-size-h1);
  font-weight: var(--light)
}

.cnt-side-mobile-left {
  font-weight: var(--light)
}

#light-mode-btn {
  transition: all .5s cubic-bezier(.215, .61, .355, 1);
  padding: 5px;
  height: 34px;
  width: 34px;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.head_cont_scroll .icon-mode,
.head_cont_scroll .cta-heder,
.head_cont_scroll .header__icon {
  box-shadow: rgba(0, 0, 0, 0.145) 0 8px 20px -9px,
    rgba(0, 0, 0, 0.145) -4px 3px 6px -9px !important
}


/* -------------------------------------------------------------------------------- */
/* ! HEADER */
/* -------------------------------------------------------------------------------- */



.scroll-down .bottom-light-mode,
.scroll-down .cta-heder,
.scroll-down .header__icon {
  box-shadow: 2px 2.1px 1.7px -21px rgba(0, 0, 0, 0), 4.9px 5.1px 4.1px -21px rgba(0, 0, 0, 0), 9.3px 9.6px 7.6px -21px rgba(0, 0, 0, 0), 16.5px 17.2px 13.6px -21px rgba(0, 0, 0, 0), 30.9px 32.2px 25.5px -21px rgba(0, 0, 0, 0), 74px 77px 61px -21px rgba(0, 0, 0, 0)
}

/* Prevent persistent header-sized gaps while the header is translated out */
body.scroll-down [data-scroll-container],
body.scroll-down .scroll-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#site-header.hide-scroll~.scroll-container,
#site-header.unpinned~.scroll-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#site-header.hide-scroll~.scroll-container .hero-section,
#site-header.unpinned~.scroll-container .hero-section {
  padding-top: 0 !important;
}


.dark .head_cont_scroll .cta-heder,
.head_cont_scroll .cta-heder {
  background: transparent !important;
}

.cta-heder {
  z-index: 1;
  padding: var(--v-space-4) var(--v-space-5);

}

.cta-heder:hover,
.cta-heder:focus {
  background: var(--white) !important;
  border-color: var(--white) !important;
  color: var(--v-color-void) !important;
}

body.light .cta-heder,
body.light .bg-av .header .cta-heder {
  background: transparent !important;
  border-color: var(--v-color-text0) !important;
  color: var(--v-color-text0) !important;
}

body.light .cta-heder:hover,
body.light .cta-heder:focus {
  background: var(--v-color-text0) !important;
  border-color: var(--v-color-text0) !important;
  color: var(--v-color-void) !important;
}

.scroll-down .bg-white-gradient-top::before {
  opacity: 1;
  transition: background-image .5s linear
}

.bg-av-gradient-top::before {
  background: var(--primary);
  background: linear-gradient(0deg, rgba(245, 245, 245, 0) 0%, rgba(255, 255, 255, 0) 25%, var(--primary) 100%)
}

.bg-av .header .button {
  background: var(--primary);
  border-color: var(--white) !important;
  color: var(--white) !important
}

.bg-av .header .cta-heder {
  background: transparent !important;
  border-color: var(--white) !important;
  color: var(--white) !important;
}

.bg-av .header .cta-heder:hover,
.bg-av .header .cta-heder:focus {
  background: var(--white) !important;
  color: var(--v-color-void) !important;
}

/* Moved to consolidated rule above */

body.light .bg-av .header .cta-heder:hover,
body.light .bg-av .header .cta-heder:focus {
  background: var(--v-color-void) !important;
  color: var(--v-color-text0) !important;
}

.bg-av .header .icon-hamburger span,
.bg-av .header .icon-hamburger span::before,
.bg-av .header .icon-hamburger span::after,


.bg-av h1,
.bg-av h2,
.bg-av h3,
.bg-av h4,
.bg-av h5,
.bg-av p,
.bg-av,
.bg-av .header {
  color: var(--white)
}

.bg-av .custom-logo {
  filter: brightness(0) saturate(100%) invert(98%) sepia(40%) saturate(0%) hue-rotate(309deg) brightness(114%) contrast(100%)
}

.bg-av #btn-progetti {
  border-color: var(--white);
  color: var(--white)
}


.header__menu {
  background: var(--secondary);
  clip-path: circle(0% at 95.6% 6.3%);
  color: var(--white);
  display: none;
  height: 100vh;
  left: 0;
  opacity: 0;
  overflow-x: hidden;
  pointer-events: none;
  position: absolute;
  top: 0;
  transition: all 1.1s cubic-bezier(.215, .61, .355, 1);
  width: 100%;
  z-index: 1100;
}

.header__menu--open {
  box-shadow: 0 5px 20px rgba(0, 0, 0, .05);
  clip-path: circle(150% at 90% 20%);
  display: block;
  height: 100%;
  opacity: 1;
  overflow: hidden;
  pointer-events: auto;
  position: fixed;
  z-index: 1100;
  animation: move 2s forwards;
}

.header__menu--open,
.header__menu--open .header__menu {
  clip-path: circle(150% at 90% 20%);
}

@keyframes move {}

/* Light mode: menu mask diventa light */
body.light .header__menu {
  background: var(--v-color-void);
  color: var(--v-color-text0);
}



/* -------------------------------------------------------------------------------- */
/* ! NEW Hamburger MENU */
/* -------------------------------------------------------------------------------- */


.menu--2 input {
  display: none;
}

.menu--2 label {
  display: block;
  cursor: pointer;
  position: absolute;
  max-width: 56px;
  max-height: 56px;
}




.menu--1 label,
.menu--2 label {
  bottom: 0;
}

.menu--3 label,
.menu--4 label {
  top: 0;
}

.menu--1 label,
.menu--3 label {
  right: 0;
}

.menu--2 label,
.menu--4 label {
  left: 0;
}

.menu--2 path {
  fill: none;
  stroke: var(--primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  --length: 24;
  --offset: -38;
  stroke-dasharray: var(--length) var(--total-length);
  stroke-dashoffset: var(--offset);
  transition: all 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.menu--2 circle {
  fill: rgba(237, 242, 247, 0.2);
  /* --v-color-text0 con opacità */
  opacity: 0;
}

.menu--2 label:hover circle {
  opacity: 1;
}

.cross input:checked+svg .line--1,
.cross input:checked+svg .line--3 {
  --length: 22.627416998;
}

.cross input:checked+svg .line--2 {
  --length: 0;
}

.back input:checked+svg .line--1,
.back input:checked+svg .line--3 {
  --length: 8.602325267;
}

.menu--2 {
  width: 56px;
  height: 100%;
  position: relative;
}

.menu--2 .line--1,
.menu--2 .line--3 {
  --total-length: 111.22813415527344;
  --offset: -50.22813415527344;
}

.menu--2 .line--2 {
  --total-length: 99;
}

.menu--2 input:checked+svg path {
  transform: translateX(30px);
}

.menu--2 input:checked+svg .line--1,
.menu--2 input:checked+svg .line--3 {
  --offset: -16.9705627485;
}

.menu--2 input:checked+svg .line--2 {
  --offset: -20;
}



/* -------------------------------------------------------------------------------- */
/* ! HABURGHER MENU */
/* -------------------------------------------------------------------------------- */


.icon-hamburger {
  display: block;
  height: 0;
  left: 14px;
  position: absolute;
  top: 22px;
  transition: all .5s cubic-bezier(.215, .61, .355, 1);
  width: 22px
}

.icon-hamburger.active {
  top: 28px;
  width: 28px
}

.icon-hamburger span:before,
.icon-hamburger span:after {
  background: var(--primary);
  content: ' ';
  height: 2px;
  margin-top: -10px;
  position: absolute;
  transition: all .3s cubic-bezier(.215, .61, .355, 1);
  width: 100%
}

.icon-hamburger span:before {
  width: 20px
}

.icon-hamburger span {
  background: var(--primary);
  height: 2px;
  position: absolute;
  right: -4px;
  top: 4px;
  transition: all .2s ease-in-out;
  width: 25px
}

.icon-hamburger span:after {
  margin-top: 10px;
  width: 30px
}

.has-cover .icon-hamburger span,
.has-cover .icon-hamburger span:before,
.has-cover .icon-hamburger span:after {
  background: var(--primary)
}

.icon-hamburger--open span {
  background: var(--primary) !important
}

.icon-hamburger--open span:before {
  margin-top: 0;
  transform: rotate(45deg)
}

.icon-hamburger--open span:after {
  margin-top: 0;
  transform: rotate(-45deg)
}

#icon-hamburger.active span {
  background-color: var(--primary);
  height: 2px;
  left: 50%;
  margin-left: -15px;
  margin-top: -1px;
  position: absolute;
  top: 50%;
  transform: rotate(45deg);
  width: 30px
}

#icon-hamburger.active span:before,
#icon-hamburger.active span:after {
  background-color: var(--primary);
  content: "";
  height: 2px;
  position: absolute;
  width: 30px
}

#icon-hamburger.active span:before {
  left: 0;
  top: 10px;
  transform: rotate(-90deg);
  transform-origin: center center;
  width: 30px !important
}

#icon-hamburger.active span:after {
  opacity: 0;
  transform: rotate(90deg);
  transform-origin: right center
}

/* Hamburger / close icon in light mode → deve essere scuro */
body.light .icon-hamburger span,
body.light .icon-hamburger span:before,
body.light .icon-hamburger span:after,
body.light #icon-hamburger.active span,
body.light #icon-hamburger.active span:before,
body.light #icon-hamburger.active span:after {
  background-color: var(--v-color-void) !important;
}

.icon-close-menu {
  position: absolute;
  right: 46px;
  top: 37px
}

.icon-close-contact {
  position: absolute;
  right: 41px;
  top: 40px;
}

.icon-close-contact .plus:hover {
  background: var(--v-color-text0) !important;
  box-shadow: 0 0 1px 10px rgba(237, 242, 247, 0.4), 0 0 1px 20px rgba(237, 242, 247, 0.3), 0 0 1px 30px rgba(237, 242, 247, 0.2) !important;
  color: var(--v-color-void) !important;
}

.icon-close-contact .plus:hover i {
  color: var(--v-color-void) !important;
}

body.light .icon-close-contact .plus:hover {
  background: var(--v-color-void) !important;
  box-shadow: 0 0 1px 10px rgba(6, 10, 14, 0.4), 0 0 1px 20px rgba(6, 10, 14, 0.3), 0 0 1px 30px rgba(6, 10, 14, 0.2) !important;
  color: var(--v-color-text0) !important;
}

body.light .icon-close-contact .plus:hover i {
  color: var(--v-color-text0) !important;
}

.plus {
  align-items: center;
  background: var(--v-color-surface3);
  border: solid 2px transparent;
  border-radius: 50%;
  color: var(--primary);
  display: flex;
  height: 60px;
  justify-content: center;
  position: relative;
  transform: rotate(0deg);
  transition: all .5s cubic-bezier(.215, .61, .355, 1);
  width: 60px;
  z-index: 1
}

.plus i {
  color: var(--white);
  font-size: 25px;
  height: 27px
}

.plus:hover {
  background: var(--primary);
  box-shadow: 0 0 1px 10px rgba(252, 79, 30, 0.4), 0 0 1px 20px rgba(252, 79, 30, 0.3), 0 0 1px 30px rgba(252, 79, 30, 0.2);
  cursor: pointer;
  transform: rotate(90deg)
}

.social-icons {
  bottom: 50%;
  position: fixed;
  right: 30px;
  transform: translateY(50%);
  width: 100px;
  z-index: 0
}

.social-icons a {
  display: block;
  padding: var(--v-space-5);
  text-align: center;
  width: 100%
}

.social-icons a img {
  width: 30px
}

.bottom-icon-left img,
.bottom-icon-right img {
  width: 40px
}

/* gap già normalizzato nella sezione "WP BLOCKS → THEME GRID" */

.sub-footer-section .wp-block-columns.is-layout-flex {
  gap: 0em !important
}


.dot:before {
  background: var(--surface);
  border-radius: 100%;
  content: ' ';
  height: 30px;
  left: 0;
  position: absolute;
  top: 0;
  transform: scale(0);
  transition: all .6s cubic-bezier(.17, .67, .3, 1.33);
  transition-delay: 1s;
  width: 30px
}

.dot.is-inview:before {
  transform: scale(1)
}

.dot--1::before,
.dot--4::before {
  background: var(--v-color-blue)
}

.dot--2::before {
  background: var(--v-color-purple)
}

.dot--3::before {
  background: var(--primary)
}


.dot--1 {
  left: 20%;
  top: 10%
}

.dot--2 {
  height: 400px;
  right: 0;
  top: 0;
  z-index: 4
}

.dot--2 svg {
  display: block;
  height: auto;
  position: absolute;
  right: -240px;
  top: -396px;
  width: 1000px
}

.dot--3 {
  bottom: 20%;
  right: 20%
}

.dot--4 {
  bottom: 40%;
  left: 13%
}

.scroll-down-icon {
  bottom: 0;
  display: block;
  height: 100px;
  left: 50%;
  margin-left: -50px;
  position: absolute;
  width: 100px
}

.line-center {
  animation: vertical_line_growth 4s cubic-bezier(.215, .61, .355, 1) infinite;
  background: var(--secondary);
  height: 0;
  left: 50%;
  margin-top: 10px;
  opacity: 0;
  position: absolute;
  width: 3px
}

.line-center span {
  bottom: -20px;
  color: var(--secondary);
  display: block;
  left: -50px;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  width: 100px
}

.icon-hamburger:hover span,
.icon-hamburger:hover span:after,
.icon-hamburger .icon-hamburger:hover span:before,
.header__icon:hover span,
.header__icon:hover span:after,
.header__icon:hover span:before,
.btn-close:hover #icon-hamburger.active span::before,
.btn-close:hover #icon-hamburger.active span {
  background: var(--white)
}

.dot,
.dot--1,
.dot--2,
.dot--3,
.dot--4 {
  position: absolute
}

@keyframes vertical_line_growth {
  40% {
    height: 0;
    opacity: 1
  }

  100% {
    height: 30px;
    opacity: 0
  }

  0%,
  20% {
    height: 0;
    opacity: 0
  }

  60%,
  80% {
    height: 30px;
    opacity: 1
  }
}

.has-cover .header .button {
  border-color: var(--white);
  color: var(--white)
}

.has-cover .logo {
  filter: invert(1)
}

.scroll-down.has-cover .site-nav>li a {
  color: var(--secondary)
}

.scroll-down.has-cover .header .button {
  border-color: var(--secondary);
  color: var(--secondary)
}

.scroll-down.has-cover .logo {
  filter: invert(0)
}

.has-cover .line-center {
  background: var(--white)
}

.cover {
  align-items: center;
  background: var(--secondary);
  display: flex;
  height: 100vh;
  position: relative;
  width: 100%;
  z-index: 0
}

.cover__content {
  color: var(--white);
  padding: var(--v-space-5);
  position: relative;
  text-align: center;
  width: 100%;
  z-index: 1
}

.cover:before {
  background: var(--secondary);
  content: ' ';
  height: 100%;
  left: 0;
  opacity: .5;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0
}

.cover-text {
  align-items: center;
  display: flex;
  height: 63vh;
  min-height: 500px;
  position: relative;
  width: 100%
}

/* Hero Categories */
.category-tag {
  display: inline;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  font-size: var(--v-font-size-small);
  font-weight: 400;
  color: var(--v-color-text1);
  text-transform: none;
  letter-spacing: 0;
  transition: none;
}

.category-tag::after {
  content: " · ";
  margin: 0 0.3em;
}

.category-tag:last-child::after {
  content: "";
  margin: 0;
}

.category-tag:hover {
  background: transparent;
  border-color: transparent;
}

body.light .category-tag {
  color: var(--v-color-text1);
  background: transparent;
  border-color: transparent;
}

body.light .category-tag:hover {
  background: transparent;
  border-color: transparent;
}

/* Hero Logo Section & Back Button */
.hero-logo-section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--v-space-6);
}

.hero-back-button {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: var(--v-space-5);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.6em 1.2em;
  background: transparent;
  border: 1px solid var(--v-color-border);
  border-radius: 4px;
  color: var(--v-color-text1);
  font-size: var(--v-font-size-small);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.back-link:hover {
  border-color: var(--card-border-hi);
  color: var(--card-border-hi);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
}

.back-link svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.5;
}

body.light .back-link {
  border-color: var(--v-color-border);
  color: var(--v-color-text1);
}

body.light .back-link:hover {
  border-color: var(--card-border-hi);
  color: var(--card-border-hi);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
}




.block-ps-cover {
  align-items: center;
  display: flex;
  position: relative
}

.block-ps-cover:before {
  background: var(--v-color-void);
  content: ' ';
  height: 100%;
  left: 0;
  opacity: .5;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0
}

.block-ps-cover .grid {
  margin: 0 auto;
  padding: 200px 0 150px;
  width: 100%
}

.block-ps-text {
  align-items: center;
  display: flex;
  margin: 0 auto;
  max-width: 750px;
  position: relative
}

.block-ps-text .grid {
  margin: 0 auto;
  width: 100%
}

.block-ps-panel {
  padding: 100px
}

.block-ps-panel__img img {
  display: block;
  height: 600px;
  margin: 0 auto;
  max-width: 550px;
  object-fit: cover;
  width: 100%
}

.panel {
  padding: 100px 0;
  position: relative
}

.panel__img img {
  border-radius: 8px;
  display: block;
  margin: 0 auto;
  min-height: 100%;
  object-fit: cover;
  width: 100%
}

.panel--grey {
  background: var(--surface)
}

.panel--text-white .button-frame:after,
.panel--text-white .button-frame:before {
  border: 2px solid var(--white)
}

.panel--text-white .button-frame span:after {
  background: url(img/arrow-right-white.svg) no-repeat center center
}

.panel-info {
  background: var(--v-color-surface1);
  padding: 200px 0 300px;
  position: relative
}

body.light .panel-info {
  background: var(--v-color-surface2);
}

.panel-info__image {
  height: 500px;
  object-fit: cover;
  width: 100%
}

.panel-info .headline {
  color: var(--white);
  mix-blend-mode: difference
}

.panel-info__intro {
  letter-spacing: var(--v-ls-mono);

  padding-right: 0;
  text-align: center;
  text-transform: uppercase
}

.vertical-separator {
  background: var(--secondary);
  height: 80px;
  margin: 40px auto;
  width: 2px
}

.has-cover .line-center span,
.panel--text-white h3,
.panel--text-white p,
.panel--text-white .button-frame {
  color: var(--white)
}

.block-ps-panel__text,
.panel__text {
  align-items: center;
  display: flex;
  height: 100%;
  max-width: 550px;
  padding: var(--v-space-5);
  width: 100%
}

/* -------------------------------------------------------------------------------- */
/* ! Min 728 MEDIA QUERY */
/* -------------------------------------------------------------------------------- */

.news__intro {
  text-align: center
}

.news__item {
  display: flex;
  flex-direction: column;
  margin-top: 40px;
  position: relative;
  overflow: visible;
  /* contenuto testo sotto l'immagine, non tagliato */
  transform-style: preserve-3d;
  will-change: transform;
  transition: box-shadow 0.4s ease;
  background: var(--bg-default);
  border-radius: 8px;
}


.news__item__image {
  width: 100%;
  height: 400px;
  background-size: cover;
  background-position: center;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  overflow: hidden;
  /* overlay e tilt confinati all'immagine */
  border-radius: 8px;
  /* bordi arrotondati solo sull'immagine */
}

/* Overlay nero per hover desktop */

.news__item__content {
  position: relative;
  padding: 24px 20px;
  color: var(--text-color);
  z-index: 2;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

body.light .news__item__content {
  color: var(--v-color-void);
}

/* Descrizione con ellipsis su hover desktop */


.news__item__content .title {
  margin: 0 0 12px 0;
  font-size: var(--v-font-size-h4);
  font-weight: 600;
  font-family: 'Syne', sans-serif;
}

/* Categorie */
.news__item__categories {
  display: inline;
  margin-top: auto;
}

.category {
  font-size: var(--v-font-size-small);
  color: var(--text-secondary, rgba(255, 255, 255, 0.6));
  padding: 0;
  border: none;
  border-radius: 0;
  text-transform: none;
  letter-spacing: 0;
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  display: inline;
}

.category::after {
  content: " · ";
  margin: 0 0.3em;
}

.category:last-child::after {
  content: "";
  margin: 0;
}

body.light .category {
  color: rgba(6, 10, 14, 0.6);
  border-color: transparent;
}

.panel-cta {
  padding: 200px 0;
  position: relative
}

.panel-cta__content {
  margin: auto;
  max-width: 900px;
  position: relative;
  text-align: center;
  z-index: 10
}

/* -------------------------------------------------------------------------------- */
/* ! Max 767 MEDIA QUERY */
/* -------------------------------------------------------------------------------- */



.media-affix {
  margin-bottom: 525px;
  padding: 200px 0 300px
}

.media-affix__item {
  margin-bottom: 200px;
  position: relative
}

.media-affix__image {
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0
}

.media-affix__text {
  position: relative;
  z-index: 1
}

.media-affix__item h4 {
  margin-bottom: 20px;
  margin-left: 230px;
  padding-top: 40px;
  position: relative;
  z-index: 1
}

.media-affix__item h4 a {
  display: block;
  transform: scale(1);
  transition: all 1s cubic-bezier(.215, .61, .355, 1)
}

.media-affix__item h4 a:hover {
  transform: scale(1.1)
}

.media-affix__item p,
.media-affix__item ul {
  list-style-type: none;
  margin-left: 280px;
  padding: 0
}

.media-affix__item ul li {
  padding: 10px
}

.media-affix__item ul li span {
  border-radius: 100%;
  display: inline-block;
  height: 32px;
  margin-right: 5px;
  padding: 4px;
  position: relative;
  top: 5px;
  width: 32px
}

.media-affix .button-frame {
  left: 60px;
  position: absolute;
  top: 380px
}

/* Full-width bg change on inview */
/* media-affix fullwidth bg overlay removed */

/* background toggle removed */




.home-title {
  color: var(--white);
  position: absolute;
  top: -9999px
}

.page-min-height {
  min-height: 60vh
}


.single-post .intro-text {
  padding-top: 10px
}

.article-horizontal {
  padding: 0 0 50px
}

.article-horizontal .col-30 {
  padding-right: 20px
}

.sidebar {
  padding: 20px
}

.grid-filter {
  background: var(--v-color-surface2);
  margin: 0 auto !important
}

.grid-filter:after {
  clear: both;
  content: '';
  display: block
}

.grid-work-item {
  box-sizing: border-box;
  margin-bottom: 10px;
  width: 50% !important
}

.cnt-text-below {
  padding: 14px 8px 4px;
}

.cnt-text-below h3 {
  margin: 0 0 6px;
}

.cnt-text-below .box-term-work {
  font-size: var(--v-font-size-small);
  opacity: 0.6;
}

body.light .cnt-text-below h3,
body.light .cnt-text-below a {
  color: var(--v-color-text0);
}

body.light .cnt-text-below .box-term-work {
  color: var(--v-color-text0);
}

.box-img-work img {
  height: 100%;
  object-fit: cover;
  width: 100%
}

.box-img-work {
  border-radius: 8px;
  height: 550px;
  max-height: 550px;
  object-fit: cover;
  overflow: hidden;
  background-color: var(--v-color-void)
}

.grid-work-item .o-image_wrapper,
.grid-work-item .o-image {
  height: 100%;
}

.grid-work-item .o-image img {
  height: 120%;
  width: 100%;
  object-fit: cover;
}

.filter-button-group {
  position: relative
}

/* -------------------------------------------------------------------------------- */
/* ! Min 992 MEDIA QUERY */
/* -------------------------------------------------------------------------------- */

.grid-item {
  height: 900px;
  width: calc(33.33% - 80px)
}


.sub-footer-section {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

/* -------------------------------------------------------------------------------- */
/* ! Max 992 MEDIA QUERY */
/* -------------------------------------------------------------------------------- */



.grid-item img {
  height: 100% !important;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%
}

.filter-item {
  background: transparent;
  border: none;
  color: var(--white);
  cursor: pointer;
  font-size: var(--v-font-size-h2);
  list-style: none;
  margin: 10px 10px 20px 0;
  white-space: nowrap
}

.filter-carousel {
  align-items: center
}

.count-post {
  font-size: var(--v-font-size-small);
  margin-left: 5px
}

footer {
  height: auto
}

.container-arrow {
  align-items: center;
  display: flex;
  justify-content: end
}

.arrows {
  font-size: 0;
  visibility: hidden
}

.arrow {
  animation: arrow 1s ease-in-out infinite;
  color: var(--white);
  font-size: 60px;
  margin-left: 10px;
  opacity: 0;
  visibility: visible
}

.arrow-2 {
  animation-delay: .33s
}

.arrow-3 {
  animation-delay: .66s
}

@keyframes arrow {
  0% {
    opacity: 1
  }

  33% {
    opacity: .5
  }

  100% {
    opacity: 0
  }
}

footer,
footer p,
footer a {
  font-size: var(--v-font-size-body);
  line-height: 2rem !important
}

footer .menu-item {
  display: table;
  line-height: 29px;
  position: relative
}

.wp-container-4 {
  justify-content: flex-end
}

.button-footer {
  font-size: var(--v-font-size-h2);
  font-weight: var(--light) !important;
  padding: 20px 40px !important
}

.full-footer-section {
  border-bottom: solid 1px var(--v-color-border);
  padding-bottom: 11vh
}

.sub-footer-section .col-foot {
  width: 100%;
}


.footer {


  color: var(--white);
  display: block;

  position: relative
}

.container-cta-footer {
  width: 100% !important
}

.footer__logo {
  height: auto;
  width: 150px
}

.horizontal-separator {
  background: var(--border-color);
  height: 2px;
  position: absolute;
  right: 0;
  top: 10px;
  width: calc(100% - 180px)
}

.footer__final-text {
  margin-top: 80px;
  text-align: center
}

.cmplz-document .intro-text {
  text-align: center
}

.cmplz-document .intro-text h1 {
  min-width: 100%
}

.c-scrollbar:hover,
.has-scroll-dragging .c-scrollbar,
.has-scroll-scrolling .c-scrollbar {
  opacity: 1 !important
}

.c-scrollbar_thumb {
  background-color: var(--primary) !important;
  opacity: 1 !important
}

.bg-av .c-scrollbar_thumb {
  background-color: var(--white) !important
}

.bottom-light-mode {
  color: inherit;
  cursor: pointer;
  font-size: 34px;
  transition: all .5s cubic-bezier(.215, .61, .355, 1)
}

.la-sun {
  padding: 3px 2px
}

.bottom-light-mode:hover,
.bottom-light-mode:focus {
  color: var(--secondary)
}

@keyframes lightmode-icon-spin-once {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

#light-mode-btn svg {
  transform-origin: center;
  transform-box: fill-box;
}



.icon-modes {

  border-radius: 100px;
  color: var(--white);
  padding: 7px 9px;
  transition: all 1s cubic-bezier(.215, .61, .355, 1)
}

.icon-mode:hover {

  color: var(--white)
}

.site-container {
  position: relative;
  z-index: 0
}


.dark .horizontal-separator,
.dark .vertical-separator,
.dark .date:after {
  background: var(--white)
}

.dark .filters-select,
.dark .site-nav>li a,
.dark .headeline,
.dark .subhealine,
.dark .title,
.dark .subtitle,
.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6,
.dark p,
.dark span,
.dark .cover-text__content,
.dark .button-frame {
  color: var(--white)
}

.dark .social-icons a img,
.dark .bottom-icon-left img,
.dark .bottom-icon-right img,
.dark .footer__logo {
  filter: invert(1)
}

.dark,
.dark .header__icon,
.dark .icon-mode,
.dark .panel-info {
  background: var(--v-color-surface1);
  color: var(--white)
}

.dark .cta-heder {
  background: transparent !important;
  border-color: var(--white) !important;
  color: var(--white) !important;
}

.dark .cta-heder:hover,
.dark .cta-heder:focus {
  background: var(--white) !important;
  border-color: var(--white) !important;
  color: var(--v-color-void) !important;
}



.dark .panel--grey {
  background: var(--secondary) !important
}

.dark .search-icon {
  border-color: var(--white)
}

.dark .search-panel {
  background: var(--secondary)
}

.dark #searchInput {
  background: var(--secondary);
  border-bottom: 4px solid var(--v-color-text3);
  color: var(--white)
}

.dark .icon-hamburger span,
.dark .icon-hamburger span:before,
.dark .icon-hamburger span:after,
.dark .search-button:before,
.dark .search-button:after {
  background: var(--white)
}


.pagination {
  margin: 40px 0;
  padding: 0;
  width: 100%
}

.pagination span,
.pagination a {
  border: 1px solid var(--v-color-border);
  float: left;
  margin: 0 10px 10px 0;
  padding: 14px 19px
}

.gallery {
  float: left;
  margin: 20px 0;
  width: 103.55%
}

.gallery-item {
  float: left;
  text-align: center;
  width: 33.333333%
}

.gallery img {
  border: none !important;
  height: auto;
  margin: 0 10% 0 0;
  width: 90%
}

.gallery-caption {
  margin: 10px 0 0;
  width: 90%
}

.alignleft {
  float: left;
  height: auto;
  margin-bottom: 10px;
  margin-right: 20px;
  max-width: 97%
}

.alignright {
  float: right;
  height: auto;
  margin-bottom: 10px;
  margin-left: 20px;
  max-width: 97%
}

.aligncenter {
  display: block;
  height: auto;
  margin: 0 auto;
  max-width: 97%
}

.alignnone {
  height: auto;
  max-width: 97%
}

.img-res {
  height: auto;
  width: 100%
}

.cnt-video {
  aspect-ratio: 13 / 8;
  border-radius: 0;
  border-radius: 0;
  border-radius: 4px;
  clip-path: inset(0px 6rem round 8px);
  display: flex;
  height: 90%;
  overflow: hidden;
  position: relative;
  transition: clip-path .4s cubic-bezier(0.2, 0.85, 0.45, 1) 0s;
  width: 100%;
  z-index: -2
}

.video-container {
  margin-left: -1rem;
  margin-right: -1rem;
  position: relative;
  z-index: 1
}

.video-container iframe,
.video-container video {
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%
}

table {
  border-collapse: collapse;
  margin: 40px 0;
  width: 100%
}

table,
th,
td {
  border: 1px solid var(--v-color-border);
  padding: 10px;
  text-transform: capitalize
}

table tr:first-child td {
  background: var(--v-color-surface2);
  padding: 12px 8px;
  text-transform: uppercase
}

.wp-caption {
  border: 1px solid var(--v-color-border);
  margin-bottom: 0;
  margin-top: 1.5rem;
  max-width: 97%;
  padding: 10px;
  text-align: center
}

.wp-caption img {
  border: 0 none;
  height: auto;
  margin: 0;
  padding: 0;
  width: 100% !important
}

.wp-caption p.wp-caption-text {
  line-height: 17px;
  margin: 0;
  padding: 8px
}

.sticky {
  border-bottom: 3px solid var(--v-color-border);
  border-right: 3px solid var(--v-color-surface2)
}

.sticky-fixed {
  position: sticky
}

.box-cat-list {
  font-size: var(--v-font-size-h5);
  margin-right: 0;
  padding: 0 2px
}

.card-img-overlay {
  background: linear-gradient(to bottom, transparent 44%, rgba(6, 10, 14, 0.9) 96%, rgba(6, 10, 14, 0.60) 100%);
  bottom: -89px;
  height: 100%;
  opacity: 0;
  position: absolute;
  transition: all 2s cubic-bezier(.215, .61, .355, 1);
  transition-delay: 2s;
  width: 100%
}

.card-img-overlay.is-inview {
  opacity: 1 !important
}

.box-cat-sep {
  padding: 0 10px
}

.cnt-box-work {
  color: var(--white);
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 9
}

.cnt-text {
  bottom: 8px;
  color: var(--white);
  padding: 0 0 8% 8%;
  position: absolute;
  width: 100%;
  z-index: 11
}

.box-join-team {
  align-content: space-around;
  align-items: center;
  background: var(--primary);
  border: solid 2px;
  border-radius: 100px;
  display: flex;
  height: 100%;
  margin-top: auto;
  padding: 34px 30px;
  transition: all .5s cubic-bezier(.215, .61, .355, 1)
}

.box-join-team .cnt-text {
  padding: 0 8% 8%
}

.box-join-team a {
  border-radius: 100px !important;
  order: solid 2px !important;
  padding: 26px 6px 25px 32px !important;
  transition: all 1s cubic-bezier(.215, .61, .355, 1)
}

.box-join-team a:hover {
  background: var(--white);
  color: var(--primary) !important
}

.section-team {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr
}

.images-container {
  z-index: 0
}

.section-team .images-container {
  display: grid;
  gap: 60px;
  grid-template-columns: repeat(3, 1fr)
}

.section-2 {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-columns: 40% 60%
}

.section-2 .images-container {
  display: grid;
  gap: var(--v-space-5);
  grid-template-columns: 1fr
}

.section-3 .images-container {
  display: grid;
  gap: 60px;
  grid-template-columns: repeat(1fr, 1fr, 1fr)
}

.images-container img {
  align-self: stretch;
  object-fit: cover;
  width: 100%
}

.o-image.is-inview img {
  object-fit: cover;
  opacity: 1;
  transform: scale(1.1);
  transition-delay: .6s
}

.o-image img {
  border-radius: 8px;
  opacity: 0;
  transform: scale(1.4);
  transition: opacity 1.2s cubic-bezier(.215, .61, .355, 1), transform 1.2s cubic-bezier(.215, .61, .355, 1);
  transition-delay: 0s, 0s;
  width: 100%
}

.c-speed-block {
  border-radius: 8px;
  position: relative
}

.c-speed-block_image {
  border-radius: 8px !important;
  letter-spacing: var(--v-ls-mono) !important;
  height: 100%
}

.o-image_wrapper {
  background-color: var(--wite);
  border-radius: 8px;
  overflow: hidden;
  position: relative
}

.o-image_wrapper::before {

  background-color: var(--v-color-void);
  display: block;

}

.o-speed-block {
  border-radius: 8px;
  position: relative
}

.o-speed-block_image {
  border-radius: 8px;
  margin-bottom: -30px;
  margin-top: -30px
}

.search-form {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-evenly
}

.search-form input[type=text] {
  background: var(--v-color-text2);
  color: var(--secondary);
  max-width: 400px;
  width: 100%
}

.search-form button {
  background: none;
  border: none;
  border: solid 1px var(--primary);
  float: right;
  height: 50px;
  padding: 4px;
  width: 58px
}

/* -------------------------------------------------------------------------------- */
/* ! CONTACT FORM 7 */
/* -------------------------------------------------------------------------------- */
.wpcf7-submit {
  background: var(--primary);
  color: var(--white) !important;
  width: 100% !important
}

.cnt-accept {
  justify-content: space-between
}

.btn-contatti {
  background-image: url(img/send-icon.svg);
  background-position: 46px;
  background-repeat: no-repeat;
  background-size: 25%;
  border-radius: 100%;
  float: right;
  height: 120px !important;
  transform: rotate(-28deg);
  transition: all .5s cubic-bezier(.215, .61, .355, 1);
  width: 120px !important
}

.btn-contatti:hover {
  box-shadow: 0 0 1px 10px var(--white) 0 0 1px 20px var(--v-color-border) 0 0 1px 30px var(--white);

  cursor: pointer;
  transform: rotate(0deg)
}

.Accept-field {
  align-items: baseline;
  display: flex;
  justify-content: flex-start
}

.Accept-field input {
  margin-right: 10px;
  width: 20px
}

.comment-form-author,
.comment-form-email,
.comment-form-url {
  float: left;
  margin-right: 3%;
  margin-top: 20px;
  width: 30.3333333%
}

ol.commentlist {
  list-style: none;
  margin: 0 0 1em;
  padding: 0;
  text-indent: 0
}

ol.commentlist li.comment {
  border-top: 1px solid var(--v-color-border);
  padding: 1em
}

ol.commentlist li.comment div.vcard cite.fn {
  text-transform: uppercase
}

ol.commentlist li.comment div.vcard img.avatar {
  border-radius: 50px;
  float: left;
  margin: 6px 1em 1em 0
}

ol.commentlist li.comment ul {
  margin: 0 0 1em 2em
}

ol.commentlist li.comment div.reply {
  margin-left: 80px
}

ol.commentlist li.comment ul.children {
  list-style: none;
  margin: 1em 0 0;
  text-indent: 0
}

ol.commentlist li.parent {
  border-left: 1px solid var(--v-color-border)
}

ol.commentlist li img {
  max-width: 97%
}

input[type=text],
input[type=tel],
input[type=email] {
  -webkit-appearance: none;
  background: transparent;
  border-bottom: solid 1px var(--white);
  border-radius: 0;
  border-width: 0 0 2px;
  color: var(--white);
  margin-right: 10px;
  outline: none;
  padding: 15px;
  transition: all .5s cubic-bezier(.215, .61, .355, 1);
  width: 98%
}

textarea {
  -webkit-appearance: none;
  background: transparent;
  border-bottom: solid 2px var(--white);
  border-radius: 0;
  border-width: 0 0 1px;
  height: 80px;
  outline: none;
  padding: 10px;
  width: 100%
}

label {
  display: block;
  margin-bottom: 10px
}

.bg-secondary label,
.bg-secondary p,
.bg-primary label {
  color: var(--white)
}

input[type=text]:hover,
input[type=text]:focus,
input:hover[type=tel],
input:focus[type=tel],
input[type=email]:hover,
input[type=email]:focus,
textarea:hover,
textarea:focus {
  background: var(--v-color-surface3);
  border-bottom: solid 2px var(--primary);
  color: var(--white)
}

#wp-calendar a {
  border: none;
  padding: 0
}

#wp-calendar caption,
.screen-reader-text {
  color: var(--secondary);
  padding-bottom: 10px;
  text-align: left;
  text-transform: uppercase
}

#wp-calendar thead th {
  padding-bottom: 10px
}

#wp-calendar tbody {
  color: var(--v-color-text3)
}

#wp-calendar tbody td {
  background: var(--v-color-surface1);
  border: 1px solid var(--white);
  padding: 8px;
  text-align: center
}

#wp-calendar tbody .pad {
  background: none
}

#wp-calendar tfoot #next {
  text-align: right;
  text-transform: uppercase
}

#wp-calendar tfoot #prev {
  padding-top: 10px;
  text-transform: uppercase
}

.clearfix:after {
  clear: both;
  content: " ";
  display: block;
  font-size: 0;
  height: 0;
  visibility: hidden
}

.grid {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  margin: 0 auto;

}

.grid--center {
  justify-content: center
}

.grid--gap {
  gap: var(--v-space-6)
}

.col {
  flex: 1
}

[class*='col-'] {
  box-sizing: border-box;
  padding: 0 1.5%;
  position: relative
}

.col-20 {
  flex: 0 0 20%;
  max-width: 20%
}

.col-25 {
  flex: 0 0 25%;
  max-width: 25%
}

.col-30 {
  flex: 0 0 30%;
  max-width: 30%
}

.col-33 {
  flex: 0 0 33.33%;
  max-width: 33.33%
}

.col-40 {
  flex: 0 0 40%;
  max-width: 40%
}

.col-50 {
  flex: 0 0 50%;
  max-width: 50%
}

.col-60 {
  flex: 0 0 60%;
  max-width: 60%
}

.col-70 {
  flex: 0 0 70%;
  max-width: 70%
}

.col-80 {
  flex: 0 0 80%;
  max-width: 80%
}

.col-90 {
  flex: 0 0 90%;
  max-width: 90%
}

.col-100 {
  flex: 0 0 100%;
  max-width: 100%
}

.wpcf7 label,
.comment-form-author input,
.comment-form-email input,
.comment-form-url input,
#comments,
#wp-calendar {
  width: 100%
}

ol.commentlist li.comment ul.children li.depth-2,
ol.commentlist li.comment ul.children li.depth-3,
ol.commentlist li.comment ul.children li.depth-4 {
  border-left: 1px solid var(--v-color-border);
  margin: 0 0 .25em .25em
}

ol.commentlist li.even,
#wp-calendar tbody td:hover {
  background: var(--white)
}

* html .clearfix,
:first-child+html .clearfix {
  zoom: 1
}

/* -------------------------------------------------------------------------------- */
/* ! Max 1400 MEDIA QUERY */
/* -------------------------------------------------------------------------------- */

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px
}



*,
:before,
:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

.clip-effect-left {
  clip-path: circle(0% at 0% 100%);
  -webkit-clip-path: circle(0% at 0% 100%);
  will-change: clip-path
}

.clip-effect-right {
  clip-path: circle(0% at 95.4% 7%);
  -webkit-clip-path: circle(0% at 95.4% 7%);
  will-change: clip-path
}

.clip-effect-left.is-inview {
  animation: clip-circle-left 2s cubic-bezier(.215, .61, .355, 1) forwards;
}

.clip-effect-right.is-inview {
  animation: clip-circle-right 2s cubic-bezier(.215, .61, .355, 1) forwards;
}

@keyframes clip-circle-left {
  from {
    clip-path: circle(0% at 0% 100%);
    -webkit-clip-path: circle(0% at 0% 100%);
  }

  to {
    clip-path: circle(150% at 0% 100%);
    -webkit-clip-path: circle(150% at 0% 100%);
  }
}

@keyframes clip-circle-right {
  from {
    clip-path: circle(0% at 95.4% 7%);
    -webkit-clip-path: circle(0% at 95.4% 7%);
  }

  to {
    clip-path: circle(150% at 95.4% 7%);
    -webkit-clip-path: circle(150% at 95.4% 7%);
  }
}

.fade-left {
  opacity: 0;
  transform: translateX(-30%);
  transition: all 1s cubic-bezier(.215, .61, .355, 1);
  transition-delay: .5s
}

.fade-right {
  opacity: 0;
  transform: translateX(30%);
  transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.2s;
}

.fade-up {
  opacity: 0;
  transform: translateY(30%);
  transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.2s;
}

.fade-up-small {
  opacity: 0;
  transform: translateY(40px);
  transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.2s;
}

.fade-down {
  opacity: 0;
  transform: translateY(-30%);
  transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.2s;
}

.fade {
  opacity: 0;
  transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.2s;
}

.fade.is-inview {
  opacity: 1
}

.reveal-top {
  height: 0;
  overflow: hidden;
  transition: all 1.5s cubic-bezier(.215, .61, .355, 1);
  transition-delay: .5s
}

.reveal-top.is-inview {
  height: 100%
}

.reveal-left {
  overflow: hidden;
  transition: all 1.5s cubic-bezier(.215, .61, .355, 1);
  transition-delay: .5s;
  width: 0
}

.reveal-left.is-inview {
  width: 100%
}

.zoom-in {
  opacity: 0;
  transform: scale(1.2);
  transition: all 1s cubic-bezier(.215, .61, .355, 1);
  transition-delay: .5s
}

.zoom-out {
  opacity: 0;
  transform: scale(0);
  transition: all .6s cubic-bezier(.215, .61, .355, 1)
}

.zoom-fade-right {
  opacity: 0;
  transform: scale(0.8);
  transition: all .6s cubic-bezier(.215, .61, .355, 1)
}

.marker {
  position: relative
}

.marker:after {
  animation: subliner 5s cubic-bezier(.215, .61, .355, 1) infinite;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  background: var(--primary);
  border-radius: 100px;
  bottom: 8%;
  content: " ";
  height: 4px;
  left: 0;
  position: absolute;
  width: 0;
  z-index: -1
}

.marker--1:after {
  animation-delay: .5s
}

.marker--2:after {
  animation-delay: 1s;
  background: var(--v-color-blue)
}

.marker--3:after {
  animation-delay: 1.5s;
  background: var(--primary)
}

.fade-left.is-inview,
.fade-right.is-inview {
  opacity: 1;
  transform: translateX(0px)
}

.fade-up.is-inview,
.fade-up-small.is-inview,
.fade-down.is-inview {
  opacity: 1;
  transform: translateY(0px)
}

.zoom-in.is-inview,
.zoom-out.is-inview,
.zoom-fade-right.is-inview {
  opacity: 1;
  transform: scale(1)
}

@keyframes subliner {

  0%,
  25% {
    width: 0
  }

  50%,
  75%,
  100% {
    opacity: 1;
    width: 100%
  }
}

.scroll-down-icon {
  bottom: 0;
  display: block;
  height: 100px;
  left: 50%;
  margin-left: -50px;
  position: absolute;
  width: 100px
}

.line-center {
  animation: vertical_line_growth 4s cubic-bezier(.215, .61, .355, 1) infinite;
  background: var(--white) height: 0;
  left: 50%;
  margin-top: 10px;
  opacity: 0;
  position: absolute;
  width: 3px
}

.line-center span {
  bottom: -20px;
  color: var(--white);
  display: block;
  font-size: var(--v-font-size-small);
  left: -50px;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  width: 100px
}


@keyframes vertical_line_growth {
  40% {
    height: 0;
    opacity: 1
  }

  100% {
    height: 30px;
    opacity: 0
  }

  0%,
  20% {
    height: 0;
    opacity: 0
  }

  60%,
  80% {
    height: 30px;
    opacity: 1
  }
}

.delay-1 {
  transition-delay: .1s !important
}

.delay-2 {
  transition-delay: .2s !important
}

.delay-3 {
  transition-delay: .3s !important
}

.delay-4 {
  transition-delay: .4s !important
}

.delay-5 {
  transition-delay: .5s !important
}

.delay-6 {
  transition-delay: .6s !important
}

.delay-7 {
  transition-delay: .7s !important
}

.delay-8 {
  transition-delay: .8s !important
}

.delay-9 {
  transition-delay: .9s !important
}

.delay-10 {
  transition-delay: 1s !important
}

.delay-11 {
  transition-delay: 1.1s !important
}

.delay-12 {
  transition-delay: 1.2s !important
}

.delay-13 {
  transition-delay: 1.3s !important
}

.delay-14 {
  transition-delay: 1.4s !important
}

.delay-15 {
  transition-delay: 1.5s !important
}

.delay-16 {
  transition-delay: 1.6s !important
}

.delay-17 {
  transition-delay: 1.7s !important
}

.delay-18 {
  transition-delay: 1.8s !important
}

.delay-19 {
  transition-delay: 1.9s !important
}

.delay-20 {
  transition-delay: 2s !important
}

/* -------------------------------------------------------------------------------- */
/* ! Min 768 MEDIA QUERY */
/* -------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------- */
/* ! Min 1890 MEDIA QUERY */
/* -------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------- */
/* ! Max 1900 MEDIA QUERY */
/* -------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------- */
/* ! Min 992 MEDIA QUERY */
/* -------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------- */
/* ! Min 769 max 1200 MEDIA QUERY */
/* -------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------- */
/* ! Min 769 max 1200 MEDIA QUERY */
/* -------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------- */
/* ! Max 640 MEDIA QUERY */
/* -------------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------------- */
/* ! Min 639 MEDIA QUERY */
/* -------------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------------- */
/* ! GCB: LP Text Card + Counter                                                    */
/* -------------------------------------------------------------------------------- */

.lp-text-card {
  --_ba: 225deg;
  /* default: highlight at bottom-left corner */
  --_ring-base: var(--v-color-void);
  --_ring-accent: var(--card-border-hi);
  position: relative;
  border-radius: 8px;
  text-align: left;
  padding: var(--v-space-6);
  background: transparent;
  border: 1px solid var(--v-color-border);

  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.lp-text-card:hover {
  transform: translateY(-5px);
}


body.light .lp-text-card {
  background: transparent;
}

body.light .lp-text-card::after {
  background: conic-gradient(from var(--_ba),
      var(--_ring-base) 0%,
      var(--_ring-accent) 25%,
      var(--_ring-base) 50%,
      var(--_ring-base) 100%);
}

.lp-text-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--_ba),
      var(--_ring-base) 0%,
      var(--_ring-accent) 25%,
      var(--_ring-base) 50%,
      var(--_ring-base) 100%);
  -webkit-mask:
    linear-gradient(var(--white)0 0) content-box,
    linear-gradient(var(--white)0 0);
  mask:
    linear-gradient(var(--white)0 0) content-box,
    linear-gradient(var(--white)0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Inverti i loghi SVG in light mode */
body.light .url-brand img,
body.light .url-brand svg {
  filter: invert(1);
}

/* Counter */
.lp-counter {
  font-family: "DM Mono", monospace;
  font-size: var(--v-font-size-kpi);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: var(--v-space-5);
  color: var(--text-heading);
  -webkit-text-stroke: 0;
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  gap: 0.2em;
  padding: 14px 8px 4px;
}

.lp-counter__text {
  font-family: "DM Mono", monospace;
  font-size: var(--v-font-size-kpi);
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--text-heading);
  -webkit-text-stroke: 0;
}

/* Counter & Text Card — centrati su mobile */

/* -------------------------------------------------------------------------------- */
/* ! GCB: CTA Center Block                                                          */
/* -------------------------------------------------------------------------------- */

.cta-center-block {
  --secondary: var(--v-color-text0);
  --_ba: -60deg;
  --_ring-base: var(--v-color-void);
  --_ring-accent: var(--card-border-hi);
  --_cta-bg: var(--v-color-surface2);
  background: var(--v-color-surface1);
  border-radius: var(--v-radius-sm);
  color: var(--v-color-text0);
  padding: var(--v-space-9) var(--v-padding-lateral-mobile);
  position: relative;
  text-align: center;
  overflow: hidden;
}

.cta-center-block::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(from var(--_ba),
      var(--_ring-base) 0%,
      var(--_ring-accent) 25%,
      var(--_ring-base) 50%,
      var(--_ring-base) 100%);
  z-index: 0;
  pointer-events: none;
  animation: cta-ring-spin 8s ease-in-out infinite;
}

.cta-center-block::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--v-radius-sm) - 2px);
  background: var(--_cta-bg);
  z-index: 1;
  pointer-events: none;
}

body.light .cta-center-block::before {
  background: conic-gradient(from var(--_ba),
      var(--_ring-base) 0%,
      var(--_ring-accent) 25%,
      var(--_ring-base) 50%,
      var(--_ring-base) 100%);
}

@keyframes cta-ring-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.cta-center-block__inner {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--v-space-5);
  position: relative;
  z-index: 2;
}

.cta-center-block__label {
  margin: 0;
  color: var(--v-color-text3);
}

.cta-center-block__title {
  margin: 0;
  color: var(--v-color-text0);
}

.cta-center-block__subtitle {
  margin: 0;
  max-width: 640px;
  color: var(--v-color-text2);
}

.cta-center-block__cta {
  margin-top: var(--v-space-4);
  text-decoration: none;
}

body.light .cta-center-block {
  --secondary: var(--v-color-text0);
  background: var(--v-color-surface1);
  color: var(--v-color-text0);
  --_ba: -60deg;
  --_ring-base: var(--v-color-text0);
  --_ring-accent: var(--v-color-border);
  --_cta-bg: var(--v-color-surface3);
}

body.light .cta-center-block__title {
  color: var(--v-color-text0);
}

body.light .cta-center-block__subtitle,
body.light .cta-center-block__label {
  color: var(--v-color-text4);
}


/* -------------------------------------------------------------------------------- */
/* ! GCB: LP Image + Text Parallax */
/* -------------------------------------------------------------------------------- */

.lp-image-text-parallax,
.lp-image-text-parallax-cta {
  position: relative;
}

.lp-image-text-parallax .lp-itp__media,
.lp-image-text-parallax-cta .lp-itp__media {
  height: 800px;
  overflow: hidden;
  border-radius: 8px;
}

.lp-image-text-parallax-cta .lp-itp__media.mask-reveal {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.6s cubic-bezier(.215, .61, .355, 1);
  will-change: clip-path;
}

.lp-image-text-parallax-cta .lp-itp__media.mask-reveal.is-inview {
  clip-path: inset(0 0 0 0);
}

.lp-image-text-parallax-cta .lp-itp__media.mask-reveal .lp-itp__img {
  transform: none;
  /* Keep mask-reveal behavior, but allow grayscale -> color transition */
  transition: filter 5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: filter;
}

img.mask-reveal-target.mask-reveal-img {
  clip-path: inset(100% 0 0 0);
  transform: scale(1.15);
  transition: clip-path 0.6s cubic-bezier(.215, .61, .355, 1),
    transform 3s cubic-bezier(.215, .61, .355, 1);
  will-change: clip-path, transform;
  display: block;
}

img.mask-reveal-target.mask-reveal-img.mask-reveal-img--in {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
}

.lp-image-text-parallax .lp-itp__img,
.lp-image-text-parallax-cta .lp-itp__img {
  width: 100%;
  height: calc(100% + 180px);
  object-fit: cover;
  margin-top: -7px;
  display: block;
  border-radius: 8px;
  filter: grayscale(1);
  transition: filter 2.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: filter;
}

.lp-itp__media.is-color .lp-itp__img,
.lp-itp__media:hover .lp-itp__img,
.lp-itp__media:focus-within .lp-itp__img {
  filter: grayscale(0);
}

.lp-image-text-parallax .col-60,
.lp-image-text-parallax-cta .col-60 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.lp-itp__label {
  display: block;
  padding-bottom: var(--v-space-4);
}


/* -------------------------------------------------------------------------------- */
/* ! SWUP PAGE TRANSITIONS */
/* -------------------------------------------------------------------------------- */

.transition-fade {
  transition: opacity 0.4s, transform 0.4s;
  opacity: 1;
}

html.is-animating .transition-fade {
  opacity: 0;
  transform: translateY(20px);
}

html.is-leaving .transition-fade {
  opacity: 0;
  transform: translateY(-20px);
}



/***************************************************
 *LOGO SVG ANIMATION 
 **************************************************/

@-webkit-keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 244.4915771484375px;
    stroke-dasharray: 244.4915771484375px
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 244.4915771484375px
  }
}

@keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 244.4915771484375px;
    stroke-dasharray: 244.4915771484375px
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 244.4915771484375px
  }
}

.svg-elem-1 {
  stroke: var(--text-heading);
  stroke-dashoffset: 244.4915771484375px;
  stroke-dasharray: 244.4915771484375px;
}

/* Mobile: GSAP non gira → mostra il logo subito senza animazione */

/* ========================================
 * FLOATING CTA WIDGET
 * ======================================== */

.mobile-bottom-bar,
.floating-cta-widget {
  position: fixed;
  left: 12px;
  right: 12px;
  padding: 12px 16px;
  background: rgba(15, 15, 19, 0.35);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.051);
  border-radius: 100px;
  bottom: 16px;
  z-index: 998;
  transform: translateY(calc(100% + 48px));
  opacity: 0;
  /* Entrata: ease-out veloce */
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}


.mobile-bottom-bar.is-visible,
.floating-cta-widget.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Uscita: ease-in morbida e più lenta */
.mobile-bottom-bar.is-hiding,
.floating-cta-widget.is-hiding {
  transition: transform 0.65s cubic-bezier(0.4, 0, 1, 1),
    opacity 0.55s cubic-bezier(0.4, 0, 1, 1);
}

.floating-cta-btn {
  display: block;
  padding: 12px 24px;
  background: var(--primary);
  color: var(--v-color-void);
  text-align: center;
  border-radius: 8px;
  font-size: var(--v-font-size-body);
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  font-family: "Syne", sans-serif;
}

.floating-cta-btn:hover {
  background: rgba(237, 242, 247, 0.9);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(237, 242, 247, 0.2);
}

/* Light mode */
body.light .mobile-bottom-bar,
body.light .floating-cta-widget {
  background: rgba(237, 242, 247, 0.34);
  border-top-color: rgba(0, 0, 0, 0.1);
}

body.light .floating-cta-btn,
body.light .mobile-bottom-bar__cta {
  background: var(--v-color-void);
  color: var(--v-color-text0);
}

body.light .floating-cta-btn:hover {
  background: rgba(6, 10, 14, 0.9);
  box-shadow: 0 8px 24px rgba(6, 10, 14, 0.2);
}

/* Mobile only - show only on screens <= 991px */
/* Moved to consolidated 992px block above */

/* Logo slider — desktop spacing */
.logo-slider .logo-slide,
.logo-slide-inverse .logo-slide {
  padding: 0 30px;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.logo-slide img,
.logo-slide svg {
  max-width: 120px;
  height: auto;
}

/* Logo slider — griglia statica su mobile */

/* Mobile Bottom Bar inner */
.mobile-bottom-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.mobile-bottom-bar__cta {
  display: block;
  width: 100%;
  padding: 14px 24px;
  background: #EDF2F730;
  color: var(--white);
  text-align: center;
  border-radius: 100px;
  font-size: var(--v-font-size-body);
  font-weight: 600;
  text-decoration: none;
  font-family: "Syne", sans-serif;
  transition: all 0.3s ease;
}



/* Blur effect for default CTA */
.mobile-bottom-bar__cta--blur {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  border: none;
  color: rgba(0, 0, 0, 0.9);
  font-family: "DM Mono", monospace;
}

body.light .mobile-bottom-bar__cta--blur {
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(12px);
  border: none;
  color: rgba(255, 255, 255, 0.9);
  font-family: "DM Mono", monospace;
}

/* ======================================
   MOBILE MENU — struttura a due sezioni
   ====================================== */
.mobile-menu-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 100px 32px 48px;
  box-sizing: border-box;
  overflow-y: auto;
}

/* Menu principale — sopra la linea */
.mobile-menu-primary {
  flex: 1;
  display: flex;
  align-items: center;

}

.mobile-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.mobile-nav-list li {
  margin-bottom: 8vw;
  overflow: hidden;
}

.mobile-nav-list li:last-child {
  margin-bottom: 0;
}

.mobile-nav-list li a {
  font-family: 'Syne', sans-serif;
  font-size: var(--v-font-size-h2);
  font-weight: 700;
  color: var(--white);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: block;
  transition: opacity 0.2s ease;
}

.mobile-nav-list li a:hover {
  opacity: 0.6;
}

/* Separatore */
.mobile-menu-divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
  margin: 32px 0;
  flex-shrink: 0;
}

body.light .mobile-menu-divider {
  background: rgba(0, 0, 0, 0.15);
}

/* Menu social — sotto la linea */
.mobile-menu-social {
  flex-shrink: 0;
}

.mobile-nav-list--social li {
  margin-bottom: 16px;
}

.mobile-nav-list--social li a {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--v-font-size-body);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.7);
}

body.light .mobile-nav-list li a {
  color: var(--v-color-void);
}

body.light .mobile-nav-list--social li a {
  color: rgba(0, 0, 0, 0.6);
}

body.light .mobile-nav-list--social li a:hover {
  color: var(--v-color-void);
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════
   COLOR CHANGE ON SCROLL — Locomotive Scroll
   ═══════════════════════════════════════════════════════════════

   UTILIZZO IN GUTENBERG:
   Seleziona un blocco Gruppo → Avanzate → Classi CSS aggiuntive
   Aggiungi due classi separate da spazio, es:

     js-color-section color-section--surface1

   La prima classe (js-color-section) è sempre obbligatoria
   e attiva il comportamento. La seconda definisce il colore
   di sfondo che verrà applicato al body quando il blocco
   entra nel viewport.

   CLASSI DISPONIBILI (tutte le superfici del design system):
   ─────────────────────────────────────────────────────────
   color-section--void       → --v-color-void      #060A0E
   color-section--surface1   → --v-color-surface1  #0C1219
   color-section--surface2   → --v-color-surface2  #111922
   color-section--surface3   → --v-color-surface3  #172029
   color-section--blue       → --v-color-blue      #0057FF
   color-section--green      → --v-color-green     var(--v-color-green)
   color-section--purple     → --v-color-purple    #7055FF
   ─────────────────────────────────────────────────────────
   Il colore torna allo stato precedente non appena il blocco
   esce dal viewport (gestito da Locomotive Scroll via
   data-scroll-call="colorChange" + data-scroll-repeat).
   ═══════════════════════════════════════════════════════════════ */

/* ─── Color Change on Scroll ─────────────────────────────── */



.color-section--void {
  --js-bg-color: var(--v-color-void);
}

.color-section--surface1 {
  --js-bg-color: var(--v-color-surface1);
}

.color-section--surface2 {
  --js-bg-color: var(--v-color-surface2);
}

.color-section--surface3 {
  --js-bg-color: var(--v-color-surface3);
}

.color-section--blue {
  --js-bg-color: var(--v-color-blue);
}

.color-section--green {
  --js-bg-color: var(--v-color-green);
}

.color-section--purple {
  --js-bg-color: var(--v-color-purple);
}




/* --- HEADER DINAMICO --- */

#site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1), background 0.4s ease, backdrop-filter 0.4s ease;
}

/* Classe quando l'header è nascosto (scroll down) */
#site-header.hide-scroll {
  transform: translate3d(0, -100%, 0);
}

/* Classe quando l'header è attivo (scroll up o in cima) */
#site-header.is-scrolled {
  background-color: rgba(var(--v-color-void-rgb), 0.85);
  /* Serve avere la variabile RGB nel design system */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--v-color-border);
}

/* --- NAVIGAZIONE MAGNETICA --- */
.nav-moving-line {
  pointer-events: none;
  z-index: -1;
  border-radius: 2px;
}

.nav-dimmed li a {
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.nav-dimmed li a.nav-active {
  opacity: 1;
}


.cursor,
.outline {
  pointer-events: none;
  position: fixed;
  z-index: 99999;
  border-radius: 50%;
}

.cursor-hidden {
  opacity: 0;
}

/* Evita che il cursore appaia sopra i menu a tutto schermo */
.header__menu--open~.cursor,
.header__menu--open~.outline {
  z-index: 99;
}


/* --- INTEGRAZIONE CORE GSAP/LOCOMOTIVE --- */

/* Impedisce il flash di contenuto non stilizzato (FOUC) */
[data-scroll-container] {
  opacity: 0;
  transition: opacity 0.6s ease;
}


/* Classe aggiunta dal JS appena i calcoli sono pronti */
.has-scroll-init [data-scroll-container] {
  opacity: 1;
}

/* Fix per lo scroll fluido: nasconde lo scroll nativo del browser */
html.has-scroll-smooth {
  overflow: hidden;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

/* Fix per elementi "Pinati" (fissati) con GSAP */
.gsap-marker-start,
.gsap-marker-end,
.gsap-marker-scroller-start,
.gsap-marker-scroller-end {
  display: none !important;
  /* Nasconde i marker di debug in produzione */
}

/* --- ANIMAZIONI DI REVEAL --- */

/* Immagini con effetto Mask */
.mask-reveal-img {
  clip-path: inset(0% 0% 100% 0%);
  transition: clip-path 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}


.mask-reveal-img--in {
  clip-path: inset(0% 0% 0% 0%);
}

/* Reveal generico Fade Up */
.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-up.is-inview {
  opacity: 1;
  transform: translateY(0);
}

/* -------------------------------------------------------------------------------- */
/* ! ACF Block: Reviews Wall                                                         */
/* -------------------------------------------------------------------------------- */

.lp-reviews {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.lp-reviews.p-7 {
  padding: 0 !important;
}

.lp-reviews__header {
  max-width: 800px;
  margin-bottom: var(--v-space-10);
}

.lp-reviews__header .headline {
  margin-top: var(--v-space-2);
  color: var(--v-color-text0);
}


.lp-reviews__grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: var(--v-space-6);
  align-items: start;
}



.section-2 .images-container {
  display: grid;
  gap: var(--v-space-6);
  grid-template-columns: 1fr
}

/* Track destra: offset verticale per effetto parallasse visivo */
.lp-reviews__track--right {
  display: contents;
}

.lp-reviews__track {
  display: contents;
}

/* Card recensione — eredita .lp-text-card */
.review-card {
  --_ba: 225deg;
  /* default: highlight at bottom-left corner */
  --_ring-base: var(--v-color-void);
  --_ring-accent: var(--card-border-hi);
  display: flex;
  flex-direction: column;
  gap: var(--v-space-5);
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transition: opacity 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  background: transparent;
  padding: var(--v-space-6);
  border-radius: 8px;
  border: 1px solid var(--v-color-border);
  position: relative;
}

/* Stagger effect — ogni colonna ha un delay diverso per il parallasse */
.review-card:nth-child(3n + 1) {
  transition-delay: 0ms;
}

.review-card:nth-child(3n + 2) {
  transition-delay: 100ms;
}

.review-card:nth-child(3n + 3) {
  transition-delay: 200ms;
}

/* Offset verticale parallasse — alterniamo le posizioni */
.review-card:nth-child(3n + 2) {
  margin-top: var(--v-space-6);
}

.review-card:nth-child(3n + 3) {
  margin-top: var(--v-space-8);
}

.review-card.is-inview {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.review-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--_ba),
      var(--_ring-base) 0%,
      var(--_ring-accent) 25%,
      var(--_ring-base) 50%,
      var(--_ring-base) 100%);
  -webkit-mask:
    linear-gradient(var(--white)0 0) content-box,
    linear-gradient(var(--white)0 0);
  mask:
    linear-gradient(var(--white)0 0) content-box,
    linear-gradient(var(--white)0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

body.light .review-card::after {
  background: conic-gradient(from var(--_ba),
      var(--_ring-base) 0%,
      var(--_ring-accent) 25%,
      var(--_ring-base) 50%,
      var(--_ring-base) 100%);
}

.review-card__text {
  margin: 0;
  font-size: var(--v-font-size-body);
  line-height: 1.7;
  color: var(--v-color-text1);
  flex: 1;
  text-align: left;
}

.review-card__text p {
  margin: 0;
}


.review-card__meta {
  display: flex;
  align-items: center;
  gap: var(--v-space-4);
  margin-top: var(--v-space-4);
}

.review-card__avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--v-color-surface3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.review-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.review-card__initials {
  font-family: 'DM Mono', monospace;
  font-size: var(--v-font-size-small);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--v-color-text2);
  text-transform: uppercase;
}

.review-card__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.review-card__name {
  font-size: var(--v-font-size-body);
  font-weight: 600;
  color: var(--v-color-text0);
  line-height: 1.2;
  text-align: left;
}

.review-card__title {
  font-size: var(--v-font-size-small) !important;
  color: inherit;
  opacity: 0.6;
  letter-spacing: 0;
  text-align: left;
}

.review-card__title label {
  font-size: var(--v-font-size-small) !important;
  opacity: 0.6;
}

body.light .review-card {
  background: var(--v-color-surface2);
}

/* Mobile: 1 colonna, no offset */

/* Tablet: 2 colonne, offset ridotto */

/* ===== RESPONSIVE MEDIA QUERIES ===== */

@media (max-width: 479px) {
  .wp-block-columns.is-layout-flex {
    flex-direction: column !important;
    gap: var(--v-space-6) !important;
  }

  .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }

  #site-header.is-scrolled .header {
    padding: var(--v-space-3) var(--v-space-7);
  }

  .hero-content {
    display: flex;
    flex-direction: column;
  }


  .hero-section {
    min-height: auto;
    text-align: center;

    justify-content: center;
    padding-top: 100px;
    padding-bottom: 60px;
  }

  /* Internal Hero mobile height auto */
  body:not(.home):not(.single-progetti) .hero-section {
    min-height: auto !important;
    max-height: none !important;
  }

  /* Single progetto mobile non va sotto 60vh */
  body.single-progetti .hero-section {
    min-height: 60vh !important;
    max-height: none !important;
    padding-bottom: 40px;
  }


  /* Grain reduction su mobile */
  .grain-bg::before {
    animation: BgNoise 1s steps(6) infinite !important;
  }

  .hero-container {
    flex-direction: column;
    text-align: center;
    gap: 40px;
  }

  /* Titolo mobile rule: reduce size if too long */
  .hero-title {
    text-align: center;
    font-size: var(--v-font-size-h1) !important;
    /* Minimum defined in clamp */
  }

  /* Touch Targets 44px global */
  a,
  button,
  .button,
  .btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* CTA altezza minima 48px */
  .button,
  .btn,
  .cta-heder {
    min-height: 48px !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hero-subtitle {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-ctas {
    flex-direction: column !important;
    align-items: center;
    justify-content: center;

  }

  .hero-ctas a,
  .hero-ctas button {
    width: 100%;
    max-width: 400px;
  }

  .hero-split .hero-content,
  .hero-image-right {
    max-width: 100%;
    width: 100%;
  }

  /* .hero-title font-size ora gestito da clamp() nel design system */

  .hero-top-headline {
    font-size: var(--v-font-size-small);
    margin-bottom: 1rem;
    text-align: center;
  }



  body.single-progetti .hero-title {
    text-align: center !important;
  }

  .desk-only {
    display: none !important;
  }

  .mob-only {
    display: block !important;
  }

  .header__menu {
    background: var(--v-color-surface2) !important;
    display: block !important;
    visibility: hidden;
    clip-path: circle(0% at 90% 5%) !important;
    pointer-events: none;
  }

  .header__menu--open {
    visibility: visible !important;
    clip-path: circle(150% at 90% 5%) !important;
    pointer-events: auto;
  }

  .cursor,
  .outline,
  .cursor-trail-particle {
    display: none !important;
  }

  .news__item__excerpt {
    display: none !important;
  }

  .sub-footer-section {
    flex-direction: column !important;
    margin-top: 10px !important;
    flex-wrap: nowrap;
    align-content: space-around;
    align-items: center;
  }

  .cnt-btn-accept {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 15px;
  }

  .grid-work-item {
    padding: 0 !important;
    width: 100% !important
  }

  .accordion-header:hover .accordion-button {
    padding-left: 0
  }


  .cnt-accortion-text {
    display: flex;
    align-content: center;
  }

  .cnt-filter-nav {
    flex-direction: column
  }

  .has-cover .site-nav>li a {
    color: var(--white)
  }

  .bottom-icon-left img,
  .bottom-icon-right img {
    width: 25px
  }

  .bottom-icon-left {
    left: 0
  }

  .bottom-icon-right {
    right: 0
  }

  .site-nav li {
    width: 100%
  }

  .site-nav li a {
    color: var(--secondary);
    display: block;
    width: 100%
  }

  .logo {
    overflow: hidden;
    width: 67px
  }

  .cnt-filter,
  .social-icons,
  .line-menu {
    display: none
  }

  [class*='col-'] {
    width: 100%
  }


  body.admin-bar .navbar-fixed-top {
    top: 42px
  }

  .dark .header__menu,
  .light .header__menu {
    background: var(--secondary) !important
  }

  .grid-item {
    width: 100%
  }

  .m-4 {
    margin: var(--v-space-6) !important
  }

  .mt-4 {
    margin-top: var(--v-space-6) !important
  }

  .mt-5 {
    margin-top: var(--v-space-7) !important
  }

  .ml-4 {
    margin-left: var(--v-space-6) !important
  }

  .mr-4 {
    margin-right: var(--v-space-6) !important
  }

  .mb-4 {
    margin-bottom: var(--v-space-6) !important
  }


  .media-affix {
    padding-bottom: 50px
  }

  .media-affix__image {
    width: 160px
  }

  .media-affix__item h4 {
    margin-left: 140px
  }

  .media-affix__item p,
  .media-affix__item ul {
    margin-left: 180px
  }

  .block-ps-panel__img img {
    height: 260px
  }

  .block-ps-panel__right .col-40 {
    order: 2
  }

  .block-ps-panel,
  .block-ps-panel__text {
    padding: 20px 0
  }

  .lp-affix-sticky {
    transform: none !important;
    position: static !important;
    top: auto !important;
    width: 100% !important;
  }

  .cnt-logo-intro,
  .logo-footer {
    display: none
  }


  .spacing-sm-20 {
    height: var(--v-space-4) !important
  }

  .mt-sma-0 {
    margin-top: 0 !important
  }

  .mt-sma-1 {
    margin-top: var(--v-space-2) !important
  }

  .mt-sma-2 {
    margin-top: var(--v-space-4) !important
  }

  .mt-sma-3 {
    margin-top: var(--v-space-5) !important
  }

  .mt-sma-4 {
    margin-top: var(--v-space-6) !important
  }

  .mt-sma-5 {
    margin-top: var(--v-space-7) !important
  }

  .mt-sma-6 {
    margin-top: var(--v-space-8) !important
  }

  .mt-sma-7 {
    margin-top: var(--v-space-9) !important
  }

  .mt-sma-8 {
    margin-top: var(--v-space-10) !important
  }

  .mb-sma-0 {
    margin-bottom: 0 !important
  }

  .mb-sma-1 {
    margin-bottom: var(--v-space-2) !important
  }

  .mb-sma-2 {
    margin-bottom: var(--v-space-4) !important
  }

  .mb-sma-3 {
    margin-bottom: var(--v-space-5) !important
  }

  .mb-sma-4 {
    margin-bottom: var(--v-space-6) !important
  }

  .mb-sma-5 {
    margin-bottom: var(--v-space-7) !important
  }

  .mb-sma-6 {
    margin-bottom: var(--v-space-8) !important
  }

  .mb-sma-7 {
    margin-bottom: var(--v-space-9) !important
  }

  .mb-sma-8 {
    margin-bottom: var(--v-space-10) !important
  }

  .p-sma-0 {
    padding: 0 !important
  }

  .p-sma-1 {
    padding: var(--v-space-2) !important
  }

  .p-sma-2 {
    padding: var(--v-space-4) !important
  }

  .p-sma-3 {
    padding: var(--v-space-5) !important
  }

  .p-sma-4 {
    padding: var(--v-space-6) !important
  }

  .p-sma-5 {
    padding: var(--v-space-7) !important
  }

  .p-sma-6 {
    padding: var(--v-space-8) !important
  }

  .p-sma-7 {
    padding: var(--v-space-9) !important
  }

  .p-sma-8 {
    padding: var(--v-space-10) !important
  }

  .pt-sma-0 {
    padding-top: 0 !important
  }

  .pl-sma-0 {
    padding-left: 0 !important
  }

  .pr-sma-0 {
    padding-right: 0 !important
  }

  .pb-sma-0 {
    padding-bottom: 0 !important
  }

  .pt-sma-1 {
    padding-top: var(--v-space-2) !important
  }

  .pt-sma-2 {
    padding-top: var(--v-space-4) !important
  }

  .pt-sma-3 {
    padding-top: var(--v-space-5) !important
  }

  .pt-sma-4 {
    padding-top: var(--v-space-6) !important
  }

  .pt-sma-5 {
    padding-top: var(--v-space-7) !important
  }

  .pt-sma-6 {
    padding-top: var(--v-space-8) !important
  }

  .pt-sma-7 {
    padding-top: var(--v-space-9) !important
  }

  .pt-sma-8 {
    padding-top: var(--v-space-10) !important
  }

  .pl-sma-1 {
    padding-left: var(--v-space-2) !important
  }

  .pl-sma-2 {
    padding-left: var(--v-space-4) !important
  }

  .pl-sma-3 {
    padding-left: var(--v-space-5) !important
  }

  .pl-sma-4 {
    padding-left: var(--v-space-6) !important
  }

  .pl-sma-5 {
    padding-left: var(--v-space-7) !important
  }

  .pl-sma-6 {
    padding-left: var(--v-space-8) !important
  }

  .pl-sma-7 {
    padding-left: var(--v-space-9) !important
  }

  .pl-sma-8 {
    padding-left: var(--v-space-10) !important
  }

  .pr-sma-1 {
    padding-right: var(--v-space-2) !important
  }

  .pr-sma-2 {
    padding-right: var(--v-space-4) !important
  }

  .pr-sma-3 {
    padding-right: var(--v-space-5) !important
  }

  .pr-sma-4 {
    padding-right: var(--v-space-6) !important
  }

  .pr-sma-5 {
    padding-right: var(--v-space-7) !important
  }

  .pr-sma-6 {
    padding-right: var(--v-space-8) !important
  }

  .pr-sma-7 {
    padding-right: var(--v-space-9) !important
  }

  .pr-sma-8 {
    padding-right: var(--v-space-10) !important
  }

  .pb-sma-1 {
    padding-bottom: var(--v-space-2) !important
  }

  .pb-sma-2 {
    padding-bottom: var(--v-space-4) !important
  }

  .pb-sma-3 {
    padding-bottom: var(--v-space-5) !important
  }

  .pb-sma-4 {
    padding-bottom: var(--v-space-6) !important
  }

  .pb-sma-5 {
    padding-bottom: var(--v-space-7) !important
  }

  .pb-sma-6 {
    padding-bottom: var(--v-space-8) !important
  }

  .pb-sma-7 {
    padding-bottom: var(--v-space-9) !important
  }

  .pb-sma-8 {
    padding-bottom: var(--v-space-10) !important
  }

  .sma-20 {
    flex: 0 0 20% !important;
    max-width: 20% !important
  }

  .sma-25 {
    flex: 0 0 25% !important;
    max-width: 25% !important
  }

  .sma-33 {
    flex: 0 0 30% !important;
    max-width: 30% !important
  }

  .sma-50 {
    flex: 0 0 50% !important;
    max-width: 50% !important
  }

  .sma-100 {
    flex: 0 0 100% !important;
    max-width: 100% !important
  }

  .sma-hide {
    display: none !important
  }



  .grid-item {
    width: calc(50% - 20px)
  }


  .box-img-work {

    height: 400px;

  }

  .wp-block-columns.is-layout-flex {
    gap: 1em !important;
  }

  .grid-work-item {
    width: 100% !important
  }


  .cnt-logo-slider {
    padding-bottom: 70px
  }

  .footer {
    padding: 2rem 6vw;
  }

  footer .menu-menu-social-container .menu {
    display: flex;
    justify-content: space-evenly
  }

  footer .menu-item {
    margin: 5px
  }

  footer #menu-privacy-policy {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    text-align: center;
    margin-bottom: 0px;
  }

  footer {
    justify-content: center
  }




  .first-col p {

    text-align: center;
    width: 100%
  }

  .first-col p,
  .second-col p {
    margin-bottom: 0;
  }

  .footer {
    padding: 2rem
  }

  .has-text-align-right {
    text-align: center
  }

  input[type=text],
  input[type=tel],
  textarea,
  input[type=email] {
    background: var(--v-color-surface3)
  }

  .box-join-team {
    height: 250px
  }

  .home .headline {
    font-size: var(--v-font-size-h1) !important;
  }

  .headline {
    font-size: var(--v-font-size-h2) !important;
  }

  .box-join-team a {
    margin-bottom: 80px
  }

  #menu-menu-social .menu-item {
    line-height: 2rem
  }

  .spacing-sm-0 {
    height: 0 !important
  }



  .spacing-sm-30 {
    height: 30px !important
  }

  .spacing-sm-40 {
    height: 40px !important
  }

  .spacing-sm-50 {
    height: 50px !important
  }

  .spacing-sm-80 {
    height: 80px !important
  }

  .spacing-sm-100 {
    height: 100px !important
  }

  .section-2 .images-container {
    gap: 28px
  }

  #menu-top-menu {
    padding-bottom: 8vw;
  }

  #menu-menu-social {
    margin-bottom: 27px;
    margin-top: 0;
    padding-top: 8vw;
    border-top: 2px solid rgba(255, 255, 255, 0.2);
  }

  #menu-top-menu .menu-item {
    margin-bottom: 14vw;
    width: 100%
  }

  #menu-menu-social .menu-item {
    margin-bottom: 3vw;
    width: 100%
  }

  #menu-menu-social .menu-item a,
  #menu-top-menu .menu-item a {
    font-family: 'Syne', sans-serif;
    font-size: var(--v-font-size-h2);
    transition: unset
  }

  #menu-menu-social .menu-item a {
    font-size: var(--v-font-size-body);
  }

  .cnt-side-menu {
    padding-left: 10.25vw;
    padding-right: 10.25vw
  }

  .side-menu-left {
    margin-bottom: 0
  }

  .side-menu-left,
  .side_menu {
    flex-direction: column-reverse
  }

  .accordion-header .accordion-button {
    font-size: var(--v-font-size-h2);
  }

  .accordion-header {
    padding: 1.5rem 0;
  }

  input[type="submit"],
  .button {
    width: 100%
  }

  footer .wp-block-columns.is-layout-flex {
    gap: 0 !important;
    margin-bottom: 0;
  }





  .cnt-video {
    clip-path: inset(0px 1.835rem round 8px);
    clip-path: inset(0px 9% round 8px) !important
  }

  .logo-mobile {
    display: block;
  }

  .home .cover-text {
    height: auto;
    min-height: 160px
  }

  .cover-text {
    height: auto;
    min-height: 155px;
    margin: 6.8rem auto 2rem !important;
  }

  .section-team .images-container {
    gap: 24px
  }

  .section-team .images-container,
  .section-2 .images-container {
    display: grid;
    grid-template-columns: 1fr
  }

  .header-control {
    gap: 16px
  }




  .cover-text__content {
    color: var(--secondary);
    position: relative;
    text-align: left;
    width: 100%
  }

  .sub-footer-section #menu-top-menu-1,
  .header__menu svg,
  .container-arrow,
  .logo-desktop,
  .cta-heder {
    display: none
  }

  /* .cursor e .outline NON vengono nascosti qui — li gestisce la media query dedicata del custom cursor (min-width: 768px) */

  #menu-top-menu,
  #menu-top-menu .menu-item::last-child {
    margin: 0
  }

  .lp-text-card {
    text-align: center;
  }

  .lp-counter {
    justify-content: center;
  }

  .lp-image-text-parallax .lp-itp__media,
  .lp-image-text-parallax-cta .lp-itp__media {
    height: 420px;
  }

  .lp-image-text-parallax .lp-itp__img,
  .lp-image-text-parallax-cta .lp-itp__img {
    height: calc(100% + 126px);
    margin-top: -63px;
  }

  .svg-elem-1 {
    stroke-dashoffset: 0 !important;
    animation: none !important;
  }

  .logo-slider--grid {

    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    align-items: center;
    justify-items: center;
  }

  .logo-slider--grid .url-brand,
  .logo-slider--grid li,
  .logo-slider--grid>* {
    width: 100% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  .logo-slider--grid img,
  .logo-slider--grid svg {
    max-width: 80px;
    height: auto;
    width: 100%;
  }

  .lp-reviews__grid {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: var(--v-space-6);
  }

  .lp-reviews__track--right {
    margin-top: 0;
  }

  .lp-reviews__header {
    text-align: left;
    max-width: 100%;
  }

}

@media (min-width: 480px and max-width: 767px) {
  .logo-mobile {
    display: none
  }
}

@media (min-width: 768px and max-width: 991px) {
  #site-header.is-scrolled .header {
    padding: var(--v-space-3) var(--v-space-5);
  }

  /* Mostra il cursore di sistema insieme al cursore custom */
  html,
  body,
  body * {
    cursor: auto !important;
  }

  /* Mantiene il cursore visibile nel backend WP */
  body.wp-admin,
  body.wp-admin * {
    cursor: auto !important;
  }

  .headline--right {
    margin-top: 250px
  }

  .headline--left {
    margin-top: 100px;
    text-align: right
  }

  .panel-info .button-frame {
    left: 30px;
    position: absolute;
    top: 100px
  }

  .panel-info .col-33:nth-child(2) {
    order: -1
  }

  .filters-select {
    display: none
  }

  .panel--text-left .subheadline {
    position: relative;
    width: 140%;
    z-index: 10
  }

  .panel--text-right .subheadline {
    left: -30%;
    position: relative;
    position: relative;
    width: 140%;
    z-index: 10
  }

  .grid-work-item {
    width: 50% !important
  }

  .third-col {
    width: 60%;
  }

  .grid-work-item {
    width: 50% !important
  }

  .lp-reviews__track--right {
    margin-top: var(--v-space-7);
  }
}

@media (min-width: 992px and max-width: 1279px) {
  .lp-reviews__grid {
    grid-template-columns: 1fr 1fr 1fr !important;
  }

  /* Nascondi il pulsante hamburger */
  .mob-only,
  .header__icon {
    display: none !important;
  }

  /* Forza il menu overlay sempre chiuso — clip-path a 0% */
  .header__menu,
  .header__menu.header__menu--open {
    clip-path: circle(0% at 95.6% 6.3%) !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  .news__item:hover {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  }

  .news__item__image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
    pointer-events: none;
  }

  .news__item:hover .news__item__image::after {
    opacity: 1;
  }

  .news__item__excerpt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    text-align: center;
    color: var(--white);

    font-size: var(--v-font-size-body);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 11;
  }

  .news__item:hover .news__item__excerpt {
    opacity: 1;
  }

  .third-col {
    width: 500px;
  }


  .d-lg-none {
    display: none !important
  }

  .box-work-link {
    height: 100%
  }

  .mobile-bottom-bar,
  .floating-cta-widget {
    display: none !important;
  }

  .cta-center-block {
    padding-left: var(--v-padding-lateral-desktop);
    padding-right: var(--v-padding-lateral-desktop);
  }
}

@media (min-width: 1280px and max-width: 1919px) {
  .lp-reviews__grid {
    grid-template-columns: 1fr 1fr 1fr !important;
  }

  .tab-20 {
    flex: 0 0 20%;
    max-width: 20%
  }

  .tab-25 {
    flex: 0 0 25%;
    max-width: 25%
  }

  .tab-33 {
    flex: 0 0 30%;
    max-width: 30%
  }

  .tab-50 {
    flex: 0 0 50% !important;
    max-width: 50% !important
  }

  .tab-100 {
    flex: 0 0 100% !important;
    max-width: 100% !important
  }

  .box-img-work {
    height: 550px
  }
}

@media (min-width: 1920px) {
  .lp-reviews__grid {
    grid-template-columns: 1fr 1fr 1fr !important;
  }

  .box-img-work {
    height: 550px !important
  }

  .cmplz-manage-consent {
    display: none
  }
}

@media ((hover: hover) and (pointer: fine)) {
  #light-mode-btn:hover svg {
    animation: lightmode-icon-spin-once 0.6s ease-in-out 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  #light-mode-btn:hover svg {
    animation: none !important;
  }
}

/* Next Project Section - Single Progetti */
.next-project-section {
  padding: var(--v-space-10) var(--v-space-7);
  border-top: 1px solid var(--v-color-border);

  position: relative;
  z-index: 2;
}

.next-project-label {
  margin-bottom: var(--v-space-4);
  text-transform: uppercase;
  color: var(--v-color-text3);
}

.next-project-title {
  font-weight: 800;
  color: var(--v-color-text0);
  line-height: var(--v-lh-tight);
  margin: var(--v-space-5) 0 var(--v-space-7);
}

.next-project-cta {
  display: flex;
  justify-content: center;
}

body.light .next-project-section {
  background: var(--v-color-void);
  border-color: var(--v-color-border);
}

body.light .next-project-title {
  color: var(--v-color-text0);
}

/* Sub-Footer Widget Styles */
.sub-footer-widget-wrap {
  color: var(--v-color-text2);
  font-size: var(--v-font-size-small);
}

.sub-footer-widget-wrap a {
  color: var(--v-color-text2);
  text-decoration: none;
  transition: color 0.3s ease;
}

.sub-footer-widget-wrap a:hover {
  color: var(--v-color-text0);
}

.sub-footer-widget-wrap h5 {
  color: var(--v-color-text0);
  font-size: var(--v-font-size-h5);
  margin-bottom: var(--v-space-3);
  text-transform: uppercase;
  letter-spacing: 1px;
}