/*
 Theme Name: Hello Elementor Child
 Theme URI: https://elementor.com/
 Description: Child Theme for Hello Elementor
 Author: Gerico Agency
 Template: hello-elementor
 Version: 1.0.0
 Text Domain: hello-elementor-child
*/


/* === GLOBAL === */
html, body {
  overflow-x: clip;
}

:root { overflow-y: scroll; }



/* ==========================================================
   TEXT-ANIMATION-01 // Scroll Animation // text + svg + text
   ========================================================== */

.text-animation-01-about {
  font-family: "BaseNeueTrial-CondensedBlack", Sans-serif;
  background-color: #FDC52E;
  text-align: center;
}

.text-animation-01-services .text-animation-01-services-header img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: invert(1);
}

.text-animation-01-about :is(h1, h2),
.text-animation-01-services-copy :is(h1, h2) {
  font-size: 6vw;
  line-height: 1em;
}

.text-animation-01-services {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin-top: 10vh;
}

.text-animation-01-services-header {
  position: relative;
  width: 100%;
  padding: 0 2rem;
  background-color: #FDC52E;
  will-change: transform;
}

.text-animation-01-services-header:nth-child(1),
.text-animation-01-services-header:nth-child(3) {
  transform: translateX(100%) translateY(0%);
}

.text-animation-01-services-header:nth-child(2) {
  transform: translateX(-100%) translateY(0%);
  z-index: 2;
}

.text-animation-01-services-copy {
  font-family: "BaseNeueTrial-CondensedBlack", Sans-serif;
  position: relative;
  width: 100%;
  height: 100%;
  margin-top: 155vh;
  padding: 2rem 2rem 25vh 2rem;
  text-align: center;
}

.text-animation-01-animate-text {
  position: relative;
  width: 80%;
  margin: 0 auto;
  color: #D39700;
  --clip-value: 100%;
}

.text-animation-01-animate-text::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  color: #000000;
  clip-path: inset(0 0 var(--clip-value) 0);
  will-change: clip-path;
}

@media (max-width: 1000px) {
  .text-animation-01-about :is(h1, h2),
  .text-animation-01-services-copy :is(h1, h2) {
    /* Fluido (12vw) MA con tetto: sotto ~450px = 12vw come prima (telefoni invariati),
       oltre (iPad 768) si ferma a 3.4rem invece di esplodere a 92px → niente sovrapposizione.
       (fix proporzionale WHAT WE DO, Daniel 23/07) */
    font-size: clamp(2.4rem, 12vw, 3.4rem);
    letter-spacing: 0rem;
  }

  .text-animation-01-animate-text {
    width: 100%;
  }

  .text-animation-01-services {
    height: 40vh;
    margin-top: 19.2vh; /* -20% rispetto a 24vh (richiesta Daniel 23/07): meno spazio tra la prima frase e i 3 SVG */
    justify-content: flex-start;
    padding-top: 2vh;
  }

  .text-animation-01-services-header {
    padding: 0 0;
    transform: scale(1.4) translateX(100%);
  }

  .text-animation-01-services-header:nth-child(2) {
    transform: scale(1.4) translateX(-100%);
  }

  .text-animation-01-services-copy {
    margin-top: 100vh;
    padding: 1.5rem 1.5rem 15vh 1.5rem;
  }

  .text-animation-01-about {
    padding: 2rem 1rem;
  }
}


/* ==========================================================
   TEXT-ANIMATION-02 // text horizontal
   ========================================================== */

.text-animation-02 {
  position: relative;
  overflow: hidden;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 4vh;
  color: white;
  font-family: 'Inter Tight', sans-serif;
}

.text-animation-02__container {
  display: flex;
  align-items: center;
  width: 100%;
  overflow: hidden;
}

.text-animation-02__text {
  display: flex;
  width: max-content;
  white-space: nowrap;
  gap: 4vw;
  padding-left: 100vw;
  /* Ancora per gli sticker SVG in position:absolute (initSceneMarketingMask) */
  position: relative;
}

/* Sticker SVG che scorrono col testo orizzontale (scene-marketing-mask),
   ispirazione truus.co. Posizionati e animati via JS; qui solo il chrome. */
.scene-sticker {
  position: absolute;
  z-index: 3;
  height: auto;
  pointer-events: none;
  will-change: transform;
}

.text-animation-02 .heading-xl {
  font-size: clamp(2.5rem, 13vw, 13rem);
  font-weight: 600;
  line-height: 1.1;
}

@media (max-width: 1000px) {
  .text-animation-02 .heading-xl {
    font-size: clamp(3rem, 20vw, 12rem);
  }
}

.text-animation-02__box {
  width: 100%;
  padding: 0 2vw;
  color: white;
  font-family: 'SuisseIntl-Regular', sans-serif;
  /* Testo piccolo tipo truus.co "Audiences…" (~15px @1440): prima 1.5vw ≈ 21px,
     percepito troppo grande. Clamp per restare fluido ma contenuto (daniel 13/07). */
  font-size: clamp(0.85rem, 1.05vw, 1.1rem);
  line-height: 1.65;
  text-align: center;
}

@media (max-width: 1024px) {
  .text-animation-02__box {
    font-size: 2vw;
  }
}

@media (max-width: 767px) {
  .text-animation-02__box {
    font-size: 4vw;
  }
}

.text-animation-02__box p {
  margin: 0 auto;
  /* Colonna stretta (richiesta daniel 13/07, riferimento truus.co "Audiences…"):
     il paragrafo non deve occupare tutta la larghezza dello schermo. */
  max-width: 560px;
}


/* ==========================================================
   PORTFOLIO-ANIMATION-01 // Image + Image
   ========================================================== */

.portfolio-animation-01-work-item {
  height: 100svh;
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #1a1a1a;
  border-radius: 25px;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><rect width="100" height="100" rx="5" ry="5" fill="white"/></svg>') 0/100% 100% no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><rect width="100" height="100" rx="5" ry="5" fill="white"/></svg>') 0/100% 100% no-repeat;
}

.portfolio-animation-01-img {
  position: absolute;
  width: 100%;
  height: 100%;
  clip-path: polygon(25% 25%, 75% 40%, 100% 100%, 0% 100%);
  z-index: 0;
}

.portfolio-animation-01-work-item .portfolio-animation-01-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.portfolio-animation-01-img::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.portfolio-animation-01-name {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: 1;
  text-align: center;
}

.portfolio-animation-01-name h1 {
  color: #fff;
  text-transform: uppercase;
  font-size: 4vw;
  font-weight: 550;
  font-family: "BaseNeueTrial-CondensedBlack", Sans-serif;
  line-height: 1;
  margin: 0;
}

.portfolio-animation-01-name h2 {
  color: #fff;
  text-transform: uppercase;
  font-size: 2rem;
  font-family: "BaseNeueTrial-CondensedBlack", Sans-serif;
  line-height: 1;
  margin: 0;
}

.portfolio-animation-01-name {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}

.portfolio-animation-01-subtitle {
  font-size: 1.5vw;
  color: #fff;
  font-family: "TheSilverEditorial-Italic", sans-serif;
  line-height: 1.2;
}

.portfolio-animation-01-link {
  display: inline-block;
  font-family: "BaseNeueTrial-CondensedBlack", Sans-serif;
  font-size: clamp(0.625rem, 1.04vw, 1rem);
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: #000;
  border: 1px solid #000;
  border-radius: 50px;
  padding: 0.5em 1.5em;
  letter-spacing: 0.03em;
}

@media (max-width: 1000px) {
  .portfolio-animation-01-name h1 {
    font-size: 6vw;
  }

  .portfolio-animation-01-subtitle {
    font-size: 3vw;
  }

  .portfolio-animation-01-link {
    font-size: clamp(0.6rem, 2.5vw, 0.9rem);
  }
}


/* ==========================================================
   MASK-TRANSITION-01 // Scroll Animation // Text + svg + Image
   ========================================================== */

.mask-transition-01 {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: #101010;
  color: #fff;
  overflow: hidden;
}

.mask-transition-01-images {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 300vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: translateY(5%);
  will-change: transform;
}

.mask-transition-01-row {
  width: 100%;
  padding: 2rem;
  display: flex;
  gap: 2rem;
}

.mask-transition-01-img {
  flex: 1;
  aspect-ratio: 5 / 7;
  overflow: hidden;
}

.mask-transition-01 .mask-transition-01-img img {
  opacity: 0.5;
  filter: saturate(0);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mask-transition-01-mask-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  -webkit-mask: url('/wp-content/uploads/2025/10/spotlight-mask.svg') center/contain no-repeat;
  mask: url('/wp-content/uploads/2025/10/spotlight-mask.svg') center/contain no-repeat;
  overflow: hidden;
  -webkit-mask-size: 0%;
  mask-size: 0%;
  z-index: 10;
}

.mask-transition-01-mask-img {
  width: 100%;
  height: 100%;
  transform-origin: center;
}

.mask-transition-01-header {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 50%;
  z-index: 1;
}

.mask-transition-01-header h1 {
  text-transform: uppercase;
  font-family: "BaseNeueTrial-CondensedBlack", Sans-serif;
  font-size: 6rem;
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.02rem;
}

.mask-transition-01-word {
  opacity: 0;
  display: inline-block;
}

@media (max-width: 1000px) {
  .mask-transition-01-header {
    width: calc(100% - 4rem);
  }

  .mask-transition-01-header h1 {
    font-size: 4rem;
  }

  .mask-transition-01-images {
    width: 200vw;
    left: -25vw;
  }
}


/* ==========================================================
   MASK-TRANSITION-02 // Scroll Animation // Text + svg + Image
   ========================================================== */

section.spotlight {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  background-color: #1A1A1A;
  color: #fff;
  overflow: hidden;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

section.spotlight *,
section.spotlight *::before,
section.spotlight *::after {
  box-sizing: border-box;
}

.spotlight .header {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 50vw;
  z-index: 1;
}

.spotlight .header :is(h1, h2) {
  font-size: 6rem;
  font-weight: 900;
  font-family: "BaseNeueTrial-CondensedBlack", Sans-serif;
  line-height: 0.85;
  letter-spacing: -0.02rem;
}

/* Interlinea di "SE LA PENSI COME NOI, PARLIAMONE" (scena mask finale) come
   l'hero "ACCELERIAMO…" (0.9) su DESKTOP — era 0.85, troppo stretta (Daniel 22/07).
   Più specifica della base .spotlight .header → vince senza !important; su mobile
   resta 1.05 (dal blocco @media max-width:1024 con !important). */
.scene-marketing-mask .mask-container .header :is(h1, h2) {
  line-height: 0.9;
}

.spotlight-images {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 300vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: translateY(5%);
  will-change: transform;
}

.spotlight .row {
  width: 100%;
  padding: 2rem;
  display: flex;
  gap: 2rem;
}

.spotlight .img {
  flex: 1;
  aspect-ratio: 5 / 7;
  overflow: hidden;
}

section.spotlight .img img {
  opacity: 0.5;
  filter: saturate(0);
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.mask-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  -webkit-mask: url('/wp-content/uploads/2026/07/gerico-symbol-mask.svg') center/contain no-repeat;
  mask: url('/wp-content/uploads/2026/07/gerico-symbol-mask.svg') center/contain no-repeat;
  overflow: hidden;
  /* Rest: mask chiusa. Il JS (initSceneMarketingMask) anima mask-size in vmax
     (0vmax→450vmax) per un reveal aspect-safe anche su portrait. 0vmax==0%. */
  -webkit-mask-size: 0vmax;
  mask-size: 0vmax;
  z-index: 10;
}

.spotlight-foto {
  position: relative;
  width: 100%;
  display: block;
}

.spotlight-foto img {
  width: 100%;
  height: auto;
  display: block;
}


/* ==========================================================
   SCENE-MARKETING-MASK — sequenza unica pinnata
   fase 1: testo orizzontale  -> fase 2: mask reveal logo
   ========================================================== */
.scene-marketing-mask {
  position: relative;
  width: 100vw;
  background-color: #1A1A1A;
  color: #fff;
  overflow: hidden;
}

.scene-marketing-mask .scene-pin-wrap {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.scene-marketing-mask .scene-phase {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  will-change: opacity;
}

.scene-marketing-mask .scene-phase-1 .text-animation-02 {
  height: 100%;
}

.scene-marketing-mask .scene-phase-2 .spotlight,
.scene-marketing-mask .scene-phase-2 .mask-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
}

/* phase-2 trasparente: la mask-container è un overlay con CSS mask,
   sotto deve restare visibile la phase-1 (text orizzontale) */
.scene-marketing-mask .scene-phase-2 .spotlight {
  background: transparent;
  background-color: transparent;
  overflow: visible;
}

.mask-container .mask-img {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  transform-origin: center;
  position: absolute;
  top: 0;
  left: 0;
}

.spotlight .mask-word {
  opacity: 0;
  display: inline-block;
}

@media (max-width: 1000px) {
  section.spotlight {
    min-height: 100vh;
    height: auto;
    padding: 0;
  }

  .spotlight .header {
    width: 90vw;
    left: 50%;
    top: 32vh;
    transform: translate(-50%, 0);
  }

  .spotlight .header :is(h1, h2) {
    font-size: 2.5rem;
    padding: 0 0.5rem;
  }

  .spotlight-images {
    width: 100vw;
    left: 0;
    height: auto;
    flex-direction: column;
    gap: 1rem;
    transform: none;
  }

  .spotlight .row {
    flex-direction: column;
    gap: 1rem;
    padding: 0;
    width: 100vw;
  }

  .spotlight .img {
    aspect-ratio: 1 / 1.2;
    width: 100%;
    margin-bottom: 1rem;
  }

  section.spotlight .img img {
    border-radius: 10px;
  }

  .mask-container {
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    top: 0;
    left: 0;
    overflow: hidden;
  }

  .mask-container .mask-img {
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    object-fit: cover;
  }
}

@media (max-width: 600px) {
  .spotlight .header :is(h1, h2) {
    font-size: 1.4rem;
    padding: 0 0.2rem;
  }

  .spotlight .row,
  .spotlight-images {
    gap: 0.5rem;
  }
}


/* ==========================================================
   MASK-TRANSITION-03 // Scroll Animation // Text + Image + Text
   Prefixed with .mask-transition-03 to avoid global conflicts
   ========================================================== */

.mask-transition-03 section {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.mask-transition-03 .outro {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #d7dbd2;
  color: #0f0f0f;
  text-align: center;
  padding: 4rem;
  position: relative;
  z-index: 5;
}

.mask-transition-03 .spotlight {
  background-color: #0f0f0f;
  color: #d7dbd2;
  perspective: 2500px;
  perspective-origin: 50% 50%;
  overflow: hidden;
  position: relative;
  z-index: 10;
}

.mask-transition-03 .spotlight-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.mask-transition-03 .spotlight-images,
.mask-transition-03 .spotlight-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  will-change: transform;
}

.mask-transition-03 .img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, -1000px);
  width: 500px;
  height: 350px;
  will-change: transform;
  overflow: hidden;
  z-index: 1;
}

.mask-transition-03 .spotlight .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  display: block;
}

.mask-transition-03 .spotlight-cover-img {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
}

.mask-transition-03 .spotlight .spotlight-cover-img img {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  will-change: transform;
  border-radius: 0;
}

.mask-transition-03 .spotlight-intro-header,
.mask-transition-03 .spotlight-outro-header {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 80%;
  color: #d7dbd2;
  z-index: 20;
  line-height: 1;
  text-transform: uppercase;
  pointer-events: none;
}

.mask-transition-03 .spotlight-intro-header h1,
.mask-transition-03 .spotlight-outro-header h1 {
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 500;
  letter-spacing: 0em;
  font-family: "BaseNeueTrial-CondensedBlack", Sans-serif;
}

.mask-transition-03 .spotlight-outro-header h1 {
  opacity: 1;
  transition: opacity 0.6s ease-out;
}

@media (max-width: 1000px) {
  .mask-transition-03 .img {
    width: 280px;
    height: 180px;
  }

  .mask-transition-03 .spotlight .spotlight-cover-img img {
    width: 100vw;
    height: 100vh;
  }

  .mask-transition-03 .spotlight-intro-header,
  .mask-transition-03 .spotlight-outro-header {
    width: 85%;
    font-size: 2.2rem;
  }
}


/* ==========================================================
   VIDEOFRAME-SCROLLING-01 // Text + Background + Dashboard
   ========================================================== */

.videoframe-scrolling-01 {
  position: relative;
  width: 100vw;
  height: 100svh;
  overflow: hidden;
  background-color: black;
}

.videoframe-scrolling-01 canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw !important;
  height: 100svh !important;
  z-index: 0;
  pointer-events: none;
}

.videoframe-scrolling-01-header {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  text-align: center;
  color: white;
  font-family: 'Inter Tight', sans-serif;
}

.header1 {
  top: 45%;
}

.header2 {
  top: 45%;
}

.videoframe-scrolling-01-header h1 {
  font-size: 5vw;
  line-height: 1.1;
  font-weight: 600;
  margin: 0;
  opacity: 0;
  transform: scale(1) translateY(0);
  will-change: transform, opacity;
}


/* ==========================================================
   GERICO-CLIP-TEXT // Reusable scroll clip-path text reveal
   ========================================================== */

.gerico-clip-text {
  --clip-color-base: #D39700;
  --clip-color-reveal: #1a1a1a;
  --clip-start: top 100%;
  --clip-end: bottom 60%;
}

.gerico-clip-text [data-clip-text] {
  position: relative;
  color: var(--clip-color-base);
  --clip-value: 100%;
}

.gerico-clip-text [data-clip-text]::before {
  content: attr(data-clip-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: var(--clip-color-reveal);
  clip-path: inset(0 0 var(--clip-value) 0);
  will-change: clip-path;
  pointer-events: none;
}


/* ==========================================================
   GERICO-BG-CHANGE // Scroll background color transition
   ========================================================== */

.gerico-bg-change {
  --bg-from: #FDC52E;
  --bg-to: #1A1A1A;
  --bg-start: top bottom;
  --bg-end: top 40%;
}


/* ==========================================================
   GERICO-CHAR-REVEAL // SplitText character reveal from below
   ========================================================== */

.gerico-char-reveal {
  --char-duration: 0.8;
  --char-stagger: 0.03;
  --char-start: top 80%;
}

.gerico-char-reveal .line-wrapper {
  overflow: hidden;
}


/* ==========================================================
   HEADER MENU FIXES — Alignment
   ========================================================== */

/* --- Flex layout: convert buttons from absolute to flex items --- */

/* Container: keep center, add align-items */
.mdw-side-menu-area {
  align-items: center !important;
}

/* +50% spazio sopra logo/bottoni nell'header — SOLO mobile (richiesta Daniel 23/07).
   La barra cresce (min-height 60→67) e il padding-top spinge giù i contenuti in FLUSSO
   (logo + bottoni). I pannelli menu sono position:absolute top:0 → restano ancorati in
   alto: la loro apertura NON si sposta. --button-top si ricalcola su load da
   getBoundingClientRect → l'animazione segue i bottoni scesi. */
@media (max-width: 1000px) {
  .elementor-element-257e9947.mdw-side-menu-area {
    min-height: 67px !important;
    padding-top: 7px !important;
  }
}

/* =========================================================
   Language switcher (TranslatePress) — stile Gerico.
   v2 (Daniel 04/08): da "quadrotto incollato al bordo sinistro" a PILL D'ANGOLO,
   simmetrica a WORK — stesso inset, stessa altezza, stesso raggio dei pill
   dell'header. Gli inset arrivano da initCornerPills() (gerico-engine.js), che li
   MISURA sui bottoni veri e li pubblica su <html>; i fallback qui sotto tengono il
   pill al suo posto anche se il JS non gira.
   v1 (23/07): nero, solo bandiera, attaccato al bordo → sostituita.
   Le variabili sono inline sul <nav>: le sovrascrivo con !important.
   ========================================================= */
.trp-language-switcher.trp-floating-switcher {
  --bg: #000000 !important;
  --bg-hover: #1a1a1a !important;
  --text: #ffffff !important;
  --text-hover: #ffffff !important;
  --border: 1px solid #000000 !important;
  --border-radius: 100px !important;               /* pill piena, come WORK / LET'S TALK */
  --flag-size: 22px !important;
  --right: auto !important;
  left: var(--gerico-pill-x, 30px) !important;     /* stesso inset di WORK, dall'altro lato */
  right: auto !important;
  --bottom: var(--gerico-pill-y, 38px) !important; /* stesso inset che WORK ha dall'alto */
  bottom: var(--gerico-pill-y, 38px) !important;
  --switcher-width: auto !important;
  width: auto !important;
  /* TP mette padding:10px 0 sul <nav> (respiro per il dropdown): con quello il pill
     verrebbe 65px invece dei 45 dei fratelli. Lo azzeriamo: il respiro tra bandiera
     e lista lingue lo ridà il gap dell'inner qui sotto. */
  padding: 0 !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .28) !important;
}
.trp-language-switcher.trp-floating-switcher.is-open .trp-language-switcher-inner,
.trp-language-switcher.trp-floating-switcher:hover .trp-language-switcher-inner {
  gap: 4px !important;
  padding-bottom: 8px !important;
}
.trp-language-switcher.trp-floating-switcher .trp-language-switcher-inner {
  width: auto !important;
}
/* Solo bandiera: via il nome lingua (Italian/Spanish) */
.trp-language-switcher.trp-floating-switcher .trp-language-item-name {
  display: none !important;
}
/* Bandiera centrata in un pill alto come i fratelli dell'header (trigger + voci del dropdown) */
.trp-language-switcher.trp-floating-switcher .trp-language-item {
  /* -2px: il <nav> ha un bordo 1px per lato, e l'altezza totale deve fare
     esattamente quella dei fratelli (sennò il pill sinistro è 2px più alto) */
  height: calc(var(--gerico-pill-h, 45px) - 2px) !important;
  padding: 0 21px !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;
}
/* Visibile SOLO sulla hero: SCIVOLA via verso SINISTRA (fuori dal bordo sinistro) —
   stessa easing/durata dell'header. (Daniel 23/07)
   ⚠️ Dal 04/08 esce solo a CONSENSO DATO (html.gcc-decided, la mette il mu-plugin
   gerico-cookie-consent): finché il banner cookie è ancora lì in basso a destra, la
   bandierina resta al suo posto — le due pill in basso entrano ed escono in coppia,
   sennò la simmetria si rompe a metà scroll. */
.trp-language-switcher.trp-floating-switcher {
  transition: transform .45s cubic-bezier(.16, 1, .3, 1) !important;
  will-change: transform;
}
html.gerico-hero-out.gcc-decided .trp-language-switcher.trp-floating-switcher {
  transform: translateX(calc(-100% - var(--gerico-pill-x, 30px) - 4vmin)) !important;
  pointer-events: none !important;
}

/* Push header down when admin bar is present (logged in) */
body.admin-bar .mdw-side-menu-area {
  top: 32px !important;
}

/* WORK button — from absolute to static, push left with margin */
.mdw-side-menu-area .mdw-side-menu-button {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin-right: auto !important;
  order: 1;
}

/* Logo — stays centered */
.mdw-side-menu-area .site-logo,
.mdw-side-menu-area > .elementor-widget-theme-site-logo {
  order: 2;
}

/* LET'S TALK button — from absolute to static, push right with margin */
.mdw-side-menu-area .gerico-cta-button {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin-left: auto !important;
  order: 3;
}

/* Panels — anchor to button positions, hidden when closed */
.mdw-side-menu-area .mdw-side-menu {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  transform-origin: top left !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.mdw-side-menu-area .gerico-cta-menu {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  bottom: auto !important;
  transform-origin: top right !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Show panels when open */
.mdw-side-menu-area.menu-open .mdw-side-menu {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.mdw-side-menu-area.cta-open .gerico-cta-menu {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Swap panel ::before anchors: WORK from left, CTA from right */
.mdw-side-menu-area .mdw-side-menu:before {
  left: 0 !important;
  right: unset !important;
}
.mdw-side-menu-area:not(.menu-open) .mdw-side-menu:before {
  transform: translate(var(--button-left, 25px), var(--button-top, 25px)) !important;
}

.mdw-side-menu-area .gerico-cta-menu:before {
  right: 0 !important;
  left: unset !important;
}
.mdw-side-menu-area:not(.cta-open) .gerico-cta-menu:before {
  transform: translate(calc(-1 * var(--cta-button-right, 25px)), var(--cta-button-top, 25px)) !important;
}

/* --- End flex layout overrides --- */

/* FIX striscia gialla intermittente sotto WORK / LET'S TALK (header).
   Ogni toggle è un contenitore alto 32px con overflow:hidden che impila il bottone
   nero (visibile) e, subito SOTTO, un bottone CLOSE giallo (#FDC52E) duplicato. Il
   bordo SUPERIORE del giallo cade esattamente sul bordo di clip del contenitore
   (posizione a frazione di pixel, .5) → quando l'header slitta col margin-top al
   footer, overflow:hidden e il bordo del giallo arrotondano in modo diverso e ~1px
   di giallo trapela sotto il pill nero (intermittente, dipende dallo scroll/DPR).
   lo spingiamo 2px sotto il bordo di clip così la sua riga antialias resta sempre
   clippata. ⚠️ SOLO a menu CHIUSO: quando il menu si apre il CLOSE giallo sale a
   riempire la finestra e diventa il pulsante visibile → lì il margin lo taglierebbe
   di 2px in alto. Quindi WORK-close (5450354) ha il margin solo se :not(.menu-open),
   LET'S TALK-close (369aacf6) solo se :not(.cta-open). Se i container vengono
   ricostruiti in Elementor questi ID cambiano e la regola diventa inerte (innocua). */
.mdw-side-menu-area:not(.menu-open) .elementor-element-5a4dae46 > .elementor-element-5450354,
.mdw-side-menu-area:not(.cta-open) .elementor-element-1918606f > .elementor-element-369aacf6 {
  margin-top: 2px !important;
}

.mdw-side-menu-area:not(.menu-open) .mdw-side-menu .e-con,
.mdw-side-menu-area:not(.menu-open) .mdw-side-menu .e-container {
  overflow: hidden !important;
}

/* Hide work-menu & shortcode content when side menu is closed */
.mdw-side-menu-area:not(.menu-open-instant) .mdw-side-menu .gerico-work-menu {
  opacity: 0;
  pointer-events: none;
}

.mdw-side-menu-area.menu-open-instant .mdw-side-menu .gerico-work-menu {
  opacity: 1;
  pointer-events: auto;
  /* Il pannello si espande in 0.4s (::before). Prima il ritardo era 0.25s → gli item
     comparivano a pannello ancora mezzo aperto ("orribile"). Ritardo a 0.45s: il pannello
     si apre PRIMA, poi entrano i case study. (richiesta Daniel 23/07) */
  transition: opacity 0.3s ease 0.45s;
}

.mdw-side-menu-area .mdw-side-menu .e-con,
.mdw-side-menu-area .mdw-side-menu .e-container {
  align-items: flex-start !important;
}

/* Menu WORK su mobile: più spazio sotto "ALL OUR WORK" (prima era a filo del bordo) →
   allunga il pannello e dà respiro ai progetti. Unità proporzionale vh (richiesta Daniel 23/07). */
@media (max-width: 1000px) {
  .mdw-side-menu-area .mdw-side-menu .e-con,
  .mdw-side-menu-area .mdw-side-menu .e-container {
    padding-bottom: 6vh !important;
  }
}

.mdw-side-menu-area .mdw-side-menu .elementor-icon-list-items {
  text-align: left;
  width: 100%;
}

.mdw-side-menu-area .mdw-side-menu-social .elementor-icon-list-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0;
}

.mdw-side-menu-area .mdw-side-menu-social .elementor-icon-list-item {
  float: none;
}


/* ==========================================================
   GERICO-WORK-MENU // Project list inside header side menu
   ========================================================== */

.gerico-work-menu {
  display: flex;
  flex-direction: column;
  gap: clamp(0.4rem, 0.9vw, 0.75rem);
  width: 100%;
  /* Nudge verso il basso per centrare meglio la lista nel pannello (il CLOSE
     occupa la fascia in alto). Solo offset visivo — l'animazione di apertura usa
     opacity, non transform, quindi non collide. */
  transform: translateY(22px);
}

.gerico-work-menu__item {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1vw, 0.875rem);
  text-decoration: none;
  padding: clamp(0.35rem, 0.7vw, 0.6rem) 0;
  border-bottom: 1px solid rgba(253, 197, 46, 0.12);
  transition: opacity 0.25s ease;
}

.gerico-work-menu__item:hover {
  opacity: 0.75;
}

/* Niente doppia linea in fondo: l'ultimo case study (quello subito prima di
   "All our work") perde il border-bottom → resta solo il separatore di All our work. */
.gerico-work-menu__item:has(+ .gerico-work-menu__all) {
  border-bottom: 0;
}

.gerico-work-menu__thumb {
  width: clamp(2.5rem, 3.5vw, 3.2rem);
  height: clamp(2.5rem, 3.5vw, 3.2rem);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.gerico-work-menu__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gerico-work-menu__placeholder {
  width: 100%;
  height: 100%;
  background: #2a2a2a;
  border-radius: 8px;
}

.gerico-work-menu__info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.gerico-work-menu__brand {
  /* Stessa gerarchia del subtitle delle card progetto (.gerico-work-grid__subtitle):
     italic, piccolo, sopra al name. Niente badge colorato per coerenza
     stilistica con il resto del sito. */
  display: block;
  font-family: "TheSilverEditorial-Italic", sans-serif;
  font-size: clamp(0.6rem, 0.8vw, 0.78rem);
  color: #FDC52E; /* nome cliente GIALLO (swap 22/07: meno giallo complessivo) */
  opacity: 1;
  line-height: 1.2;
}

.gerico-work-menu__name {
  font-family: "BaseNeueTrial-CondensedBlack", Sans-serif;
  font-size: clamp(1rem, 1.55vw, 1.4rem);
  color: #fff; /* titolo/risultato BIANCO (swap 22/07) */
  text-transform: uppercase;
  line-height: 1.1;
  letter-spacing: -0.02em;
  /* Wrap su più righe: il "risultato" può essere multilinea (es. "3.000 lead
     qualificati. 1,5M€ di fatturato generato.") e non vogliamo che venga
     troncato con ellipsis come quando era solo il nome del progetto. */
}

.gerico-work-menu__all {
  display: block;
  margin-top: clamp(0.5rem, 1vw, 0.875rem);
  font-family: "BaseNeueTrial-CondensedBlack", Sans-serif;
  font-size: clamp(0.75rem, 1vw, 0.9rem);
  color: #FDC52E;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: clamp(0.4rem, 0.7vw, 0.6rem) 0;
  border-top: 1px solid rgba(253, 197, 46, 0.25);
  transition: opacity 0.25s ease;
}

.gerico-work-menu__all:hover {
  color: #FDC52E; /* batte a:hover di reset.css (#333366 blu) → la layer1 del flip non eredita il blu */
}
/* la copia a riposo (layer1) ha colore esplicito, così non eredita mai il blu di a:hover */
.gerico-text-only-flip .gerico-link-flip-text:nth-child(1) {
  color: #FDC52E;
}


/* ===========================================================
   PAGE TRANSITION — SVG stroke overlay
   =========================================================== */
:root {
  --gerico-pt-stroke-1: #FDC52E;
  --gerico-pt-stroke-2: #0a0a0a;
}

.gerico-page-transition {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.5);
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 99999;
  will-change: transform;
  /* Background coperto di default: previene il flash della nuova pagina
     su mobile dove il rendering del path SVG complesso può essere
     posticipato rispetto al pageload. Animato a transparent dal JS
     durante l'enter. */
  background-color: #0a0a0a;
}

.gerico-page-transition svg {
  width: 100%;
  height: 100%;
  display: block;
}


/* ===========================================================
   GERICO-STICKY-STACK — Stack di card con pin GSAP
   (sostituisce lo sticky nativo di Elementor)
   Parametri override via CSS vars sul wrapper .gerico-sticky-stack:
     --stack-scale-min   (default 0.75)  — scala finale della card sotto
     --stack-rotation    (default 5deg)  — rotazione max alternata ±
     --stack-darken      (default 0.5)   — opacità overlay nero finale
   =========================================================== */
.gerico-sticky-stack {
  position: relative;
}

.gerico-sticky-stack > .e-con,
.gerico-sticky-stack > .e-con-inner > .gerico-sticky-card,
.gerico-sticky-stack .gerico-sticky-card {
  will-change: transform;
}

.gerico-sticky-card {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
}

.gerico-sticky-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #000;
  opacity: calc(var(--after-opacity, 0) * var(--stack-darken, 0.5));
  pointer-events: none;
  z-index: 2;
  /* niente transition: la fluidità è gestita da GSAP scrub sul tween che
     scrive --after-opacity. Una transition CSS qui creerebbe un secondo
     smoothing che si vede come lag dell'overlay durante lo scrub. */
}


/* ==========================================================
   CUSTOM CURSOR (default ↔ pointer) — solo desktop con mouse
   ========================================================== */

@media (hover: hover) and (pointer: fine) {
  html.gerico-cursor-active,
  html.gerico-cursor-active body,
  html.gerico-cursor-active * {
    cursor: none !important;
  }
}

.gerico-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  background: transparent;
  pointer-events: none;
  z-index: 2147483647;
  transition: opacity 0.18s ease;
}

/* Il cursore custom si mostra SOLO dove nascondiamo quello nativo (stessa media
   query di cursor:none). Se il browser riporta un puntatore coarse/no-hover
   (device-mode DevTools, touch, emulazione), il custom sparisce → si vede solo
   la freccia nativa, MAI entrambi. */
@media not all and (hover: hover) and (pointer: fine) {
  .gerico-cursor { display: none !important; }
}

.gerico-cursor.is-out {
  opacity: 0;
}

.gerico-cursor__sprite {
  position: absolute;
  display: block;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.16s ease;
  transform-origin: center center;
}

/* container è 20×20 centrato sul puntatore (margin -10/-10).
   Per allineare l'hotspot dello sprite al puntatore reale,
   compensiamo +10/+10 ai top/left rispetto all'hotspot interno SVG. */

/* default: 30×43, hotspot ≈ (2, 1) → top:8, left:8 */
.gerico-cursor__default {
  width: 30px;
  height: 43px;
  top: 8px;
  left: 8px;
  opacity: 1;
  transform: scale(1);
}

/* pointer: 37×44, hotspot ≈ punta dito index a (10, 0) → top:10, left:0 */
.gerico-cursor__pointer {
  width: 37px;
  height: 44px;
  top: 10px;
  left: 0;
  opacity: 0;
  transform: scale(0.6);
}

.gerico-cursor.is-hover .gerico-cursor__default {
  opacity: 0;
  transform: scale(0.6);
}

.gerico-cursor.is-hover .gerico-cursor__pointer {
  opacity: 1;
  transform: scale(1);
}

/* Editor Elementor / preview: cursore di sistema sempre attivo */
.elementor-editor-active .gerico-cursor,
body.elementor-editor-active .gerico-cursor {
  display: none !important;
}


/* ==========================================================
   IMAGE TRIO — 3 immagini affiancate (desktop) / carosello orizzontale (mobile)
   Usata sui container Elementor con classe .gerico-image-trio.
   Su mobile diventa una row scrollabile horizontally con scroll-snap.
   ========================================================== */

.gerico-image-trio {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.gerico-image-trio > .elementor-widget {
  flex: 1 1 0;
  min-width: 0;
}

.gerico-image-trio > .elementor-widget .elementor-widget-container,
.gerico-image-trio > .elementor-widget .elementor-image,
.gerico-image-trio > .elementor-widget img {
  width: 100%;
  height: 100%;
  display: block;
}

.gerico-image-trio > .elementor-widget img {
  object-fit: cover;
  object-position: center;
}

/* Widget video Elementor dentro il trio — stesso comportamento delle immagini.
   Il widget Video di Elementor non espone un controllo "altezza" nel pannello
   (a differenza dell'Image widget), quindi la fissiamo qui via CSS:
   85vh desktop, 75vh mobile (allineate alle immagini del trio).
   I wrapper interni Elementor (.elementor-widget-container, .elementor-wrapper) di default
   impongono un padding-bottom percentuale per l'aspect-ratio del source video → li
   neutralizziamo così il <video> riempie il widget e fa object-fit:cover + center.
   Selettore generico → vale per originali e cloni del loop. */
.gerico-image-trio > .elementor-widget-video {
  height: 85vh;
}
.gerico-image-trio > .elementor-widget-video .elementor-widget-container,
.gerico-image-trio > .elementor-widget-video .elementor-wrapper {
  width: 100%;
  height: 100%;
  padding: 0 !important;
  position: relative;
}
.gerico-image-trio > .elementor-widget-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
@media (max-width: 1024px) {
  .gerico-image-trio > .elementor-widget-video {
    height: 75vh;
  }
}

/* Carosello mobile: video centrale più GRANDE (slide 88vw invece di 312px) → i
   laterali spuntano meno (~23px/lato) ma restano visibili. Aspect 9:16 invariato
   (scelta Daniel 22/07). Serve !important per battere la larghezza inline (312px)
   che il JS mette sullo slide; Embla misura la larghezza reale a init/reInit. */
@media (max-width: 1024px) {
  .gerico-image-trio.gerico-embla--active .gerico-embla__slide {
    flex: 0 0 88vw !important;
  }
}

@media (max-width: 1024px) {
  .gerico-image-trio {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    /* Il container Elementor è justify-content:center (ok desktop "3 affiancate").
       Su mobile-carosello il center manda i cloni-head + primo originale nell'overflow
       sinistro NON raggiungibile (scrollLeft non va sotto 0): niente scroll a sinistra
       e il loop-jump lavora su initialScroll negativo → si blocca. flex-start rimette
       tutto il contenuto nella zona scrollabile positiva. */
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Override del padding Elementor di default su mobile per dare spazio al peek */
    padding-left: 4vw !important;
    padding-right: 4vw !important;
    /* Spazio tra una card e la successiva (sia tra originali che tra cloni del loop) */
    gap: 3vw !important;
  }
  .gerico-image-trio::-webkit-scrollbar {
    display: none;
  }
  .gerico-image-trio > .elementor-widget {
    flex: 0 0 80vw !important;
    width: 80vw !important;
    max-width: 80vw !important;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  .gerico-image-trio > .elementor-widget img {
    width: 100%;
    height: 100%;
    display: block;
  }
}


/* ==========================================================
   WORK GRID — griglia progetti pagina /work/
   Pattern Mubien: 2 col desktop, 1 col mobile, aspect 4:3.
   L'animazione di entrata scroll è gestita da gerico-engine.js → initWorkGridAnimation()
   ========================================================== */

.gerico-work-grid {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  overflow: hidden;
  padding: 2vw;
}

/* Fix mobile: il container Elementor parent della work-grid e il suo widget
   shortcode wrapper devono espandersi VERTICALMENTE con il contenuto, non
   restare bloccati a min-height: 100vh.
   Causa: Elementor applica --flex-wrap-mobile: wrap al container; combinato con
   flex-direction: column + min-height: 100vh + 1 figlio unico, il browser non
   espande il container nel main axis (il singolo item non può wrappare in una
   nuova colonna laterale) → l'ultima riga della grid resta sotto il fold e
   viene cropata da overflow:hidden della .gerico-work-grid. */
@media (max-width: 1024px) {
  .e-con:has(.gerico-work-grid) {
    flex-wrap: nowrap !important;
  }
  .elementor-widget-shortcode:has(.gerico-work-grid) {
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
  }
}

.gerico-work-grid__row {
  flex: 1;
  width: 100%;
  display: flex;
  gap: 1.5rem;
}

.gerico-work-grid__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-decoration: none;
  color: inherit;
  will-change: transform;
}

.gerico-work-grid__item:hover {
  text-decoration: none;
  color: inherit;
}

.gerico-work-grid__media {
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 15px;
  background-color: #1a1a1a;
}

/* Specificity bump: Elementor ha `.elementor img { height: auto }` (0,1,1).
   Annidiamo dentro .gerico-work-grid__media per arrivare a (0,2,0) e vincere. */
.gerico-work-grid__media .gerico-work-grid__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.gerico-work-grid__placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
}

/* Card progetto: nome (subtitle, piccolo italic) sopra al risultato (title,
   grande condensed black). Stessa gerarchia del widget portfolio della
   homepage (.portfolio-animation-01-*). Subtitle e title sono entrambi flex
   children dell'item (gap: 1rem dal media), ma tra subtitle e title vogliamo
   meno spazio → applichiamo margin-top negativo al title quando segue il
   subtitle, così la coppia rimane compatta. */
.gerico-work-grid__subtitle + .gerico-work-grid__title {
  margin-top: -0.7rem;
}

.gerico-work-grid__subtitle {
  display: block;
  color: #fff;
  opacity: 0.85;
  font-family: "TheSilverEditorial-Italic", sans-serif;
  font-size: clamp(0.9rem, 1.2vw, 1.2rem);
  line-height: 1.2;
  margin: 0;
}

.gerico-work-grid__title {
  font-family: 'BaseNeueTrial-CondensedBlack', sans-serif;
  font-size: clamp(1.5rem, 2.5vw, 2.5rem);
  font-weight: 900;
  letter-spacing: -0.025rem;
  line-height: 1.1;
  margin: 0;
  color: #fff;
  text-transform: uppercase;
}

@media (max-width: 1000px) {
  .gerico-work-grid__subtitle {
    font-size: clamp(0.85rem, 3vw, 1rem);
  }
}

@media (max-width: 1000px) {
  .gerico-work-grid,
  .gerico-work-grid__row {
    gap: 2rem;
  }
  .gerico-work-grid__row {
    flex-direction: column;
  }
}


/* ==========================================================
   BUTTON MENU-STYLE FLIP (pillola ferma + riempimento giallo dal basso)
   Il widget originale resta fermo. Sovrapposto in grid cell, il widget alt
   giallo è clippato a 100% dall'alto (invisibile). Su .flipping il clip-path
   si apre da inset(100% 0 0 0) a inset(0 0 0 0) → la pillola gialla viene
   "scoperta" dal basso verso l'alto. Il testo fa flip 3D in entrambi i
   widget come da pattern MDW. Curve: clip (0.76,0,0.24,1), testo
   (.645,.045,.355,1).
   ========================================================== */

.gerico-button-flip-wrap {
  position: relative;
  overflow: hidden;
  display: inline-grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  vertical-align: top;
  line-height: 0;
  max-width: 100%;
}

/* Variante inline (per link nudi <a>): si comporta come inline, non come block */
.gerico-button-flip-wrap--inline {
  display: inline-grid;
}

/* Fix hover-area pulsante "GUARDA TUTTI I PROGETTI" (home, page 6083).
   Il suo contenitore flex-column aveva align-items:normal (=stretch) → il
   .gerico-button-flip-wrap (inline-grid, che porta i listener hover di
   initButtonMenuFlip) veniva stirato a tutta la colonna (780px) mentre il
   pulsante è ~240px centrato: l'animazione partiva anche a lato del pulsante.
   Il pulsante "PARLACI DEL TUO PROGETTO" (hero) NON ha il problema perché il
   suo contenitore è già align-items:center. Allineiamo GUARDA allo stesso
   comportamento: il wrap si stringe al pulsante e resta centrato (il pulsante
   non si sposta). Scoped al solo contenitore per non ri-centrare gli altri
   flip (es. "GUARDA IL PORTFOLIO" nelle card, intenzionalmente non centrati).
   Se il contenitore viene ricostruito in Elementor questo ID (17de652) cambia
   e la regola diventa inerte (innocua). */
.elementor-element.elementor-element-17de652 {
  align-items: center;
}

/* Entrambi i widget occupano la STESSA cella grid → sovrapposizione pixel-perfect.
   Il primo widget definisce le dimensioni della cella, il secondo si adatta. */
.gerico-button-flip-wrap > .elementor-widget-button,
.gerico-button-flip-wrap > a {
  grid-row: 1;
  grid-column: 1;
  margin: 0 !important;
  line-height: normal;
}

/* Stato di rest: l'alt è completamente clippato dall'alto.
   ⚠️ Sub-pixel: con inset(100%) la regione visibile collassa a una riga di
   altezza 0 sul bordo INFERIORE; quando il pulsante cade su una frazione di
   pixel (scroll, zoom, DPR, e soprattutto durante lo slide margin-top
   dell'header al footer) il browser arrotonda e dipinge ~1px di bordo giallo
   sotto il pill nero (striscetta intermittente). Clippiamo 2px OLTRE il 100%
   così non resta nulla da dipingere; sul wipe (~55px) è impercettibile. */
.gerico-button-flip-wrap > .gerico-flip-alt {
  -webkit-clip-path: inset(calc(100% + 2px) 0 0 0);
          clip-path: inset(calc(100% + 2px) 0 0 0);
  transition: -webkit-clip-path 0.3s cubic-bezier(0.76, 0, 0.24, 1),
                      clip-path 0.3s cubic-bezier(0.76, 0, 0.24, 1);
  pointer-events: none;
}

/* Su .flipping: il clip si apre dal basso verso l'alto */
.gerico-button-flip-wrap.flipping > .gerico-flip-alt {
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
  pointer-events: auto;
}

/* Versione "alt" giallo (replica del widget CLOSE del menu) */
.gerico-widget-button--alt .elementor-button {
  background-color: #FDC52E !important;
  color: #000 !important;
  --button-background-color: #FDC52E;
  --button-text-color: #000;
}
.gerico-widget-button--alt .elementor-button-text {
  color: #000 !important;
}

/* Flip 3D del testo dentro ogni widget (identico al pattern menu MDW) */
.gerico-button-flip-wrap .elementor-button-content-wrapper {
  perspective: 6em;
}
.gerico-button-flip-wrap .elementor-button-text:nth-child(1) {
  transform-origin: top;
  /* ⚠️ Safari: dentro il contesto perspective la faccia frontale (senza
     transform a riposo) NON viene dipinta al primo paint → il bottone resta
     "vuoto" finché un hover non forza il repaint (su mobile mai). Promuovendola
     a layer compositato (translateZ + backface-visibility) Safari la dipinge
     da subito. No-op visivo, invisibile su Chrome. */
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transition: transform .3s cubic-bezier(.645,.045,.355,1), opacity .2s linear .1s;
}
.gerico-button-flip-wrap .elementor-widget-button.open .elementor-button-text:nth-child(1) {
  opacity: 0;
  transform: rotateX(90deg) scaleX(.9) translate3d(0, -10px, 0);
}
.gerico-button-flip-wrap .elementor-button-text:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transform: rotateX(-90deg) scaleX(.9) translate3d(0, 10px, 0);
  transform-origin: bottom;
  transition: transform .3s cubic-bezier(.645,.045,.355,1), opacity .2s linear .1s;
}
.gerico-button-flip-wrap .elementor-widget-button.open .elementor-button-text:nth-child(2) {
  opacity: 1;
  transform: rotateX(0deg) scaleX(1) translateZ(0);
  transition: transform .35s cubic-bezier(.645,.045,.355,1), opacity .2s linear .15s;
}

/* ----------------------------------------------------------
   LINK FLIP — versione per <a> nudi (portfolio + "All our work")
   Stesso pattern di flip 3D del testo, ma il wrapper è uno <span>
   inserito dal JS dentro al link. L'alt giallo è un link clonato.
   ---------------------------------------------------------- */
.gerico-link-flip-wrap {
  position: relative;
  display: inline-block;
  perspective: 6em;
  line-height: inherit;
}
.gerico-link-flip-text {
  display: inline-block;
}
.gerico-link-flip-text:nth-child(1) {
  transform-origin: top;
  /* Safari: stessa gotcha del bottone flip — la faccia frontale senza transform
     nel contesto perspective non viene dipinta al primo paint. La promuoviamo a
     layer compositato. Copre link portfolio, "All our work" e text-only-flip. */
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transition: transform .3s cubic-bezier(.645,.045,.355,1), opacity .2s linear .1s;
}
.gerico-button-flip-wrap > a.open .gerico-link-flip-text:nth-child(1) {
  opacity: 0;
  transform: rotateX(90deg) scaleX(.9) translate3d(0, -10px, 0);
}
.gerico-link-flip-text:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transform: rotateX(-90deg) scaleX(.9) translate3d(0, 10px, 0);
  transform-origin: bottom;
  transition: transform .3s cubic-bezier(.645,.045,.355,1), opacity .2s linear .1s;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.gerico-button-flip-wrap > a.open .gerico-link-flip-text:nth-child(2) {
  opacity: 1;
  transform: rotateX(0deg) scaleX(1) translateZ(0);
  transition: transform .35s cubic-bezier(.645,.045,.355,1), opacity .2s linear .15s;
}

/* Stile dell'alt giallo per i link <a> nudi (portfolio) */
.gerico-link-alt.portfolio-animation-01-link {
  background: #FDC52E !important;
  border-color: #FDC52E !important;
  color: #000 !important;
}

/* ----------------------------------------------------------
   TEXT-ONLY FLIP — solo flip 3D del testo, niente pillola alt
   (es. "All our work →" del menu side). Il colore della seconda
   copia che entra è BIANCO (scelta Daniel 16/07, prima giallo/blu).
   ---------------------------------------------------------- */
.gerico-text-only-flip .gerico-link-flip-text:nth-child(2) {
  color: #ffffff;
}
.gerico-text-only-flip.open .gerico-link-flip-text:nth-child(1) {
  opacity: 0;
  transform: rotateX(90deg) scaleX(.9) translate3d(0, -10px, 0);
}
.gerico-text-only-flip.open .gerico-link-flip-text:nth-child(2) {
  opacity: 1;
  transform: rotateX(0deg) scaleX(1) translateZ(0);
  transition: transform .35s cubic-bezier(.645,.045,.355,1), opacity .2s linear .15s;
}

/* ===========================================================
   Fix MOBILE frase finale "SE LA PENSI COME NOI, PARLIAMONE"
   (16/07) — su mobile era 16px (illeggibile) su sfondo chiaro.
   (a) dimensione ~ Hero mobile (39px)  (b) overlay per contrasto
   =========================================================== */
@media (max-width: 1024px) {
  .spotlight .mask-container .header,
  .spotlight .mask-container .header :is(h1, h2, h3),
  .scene-marketing-mask .mask-container .header,
  .scene-marketing-mask .mask-container .header :is(h1, h2, h3) {
    font-size: 38px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.01em;
    text-shadow: none;
    margin: 0;
  }
  /* Centraggio verticale (22/07): il fix 16/07 aveva messo position:relative,
     perdendo il centraggio assoluto → la frase risultava più in alto del centro.
     Torniamo al centraggio assoluto (come desktop) con width adatta al mobile. */
  .spotlight .mask-container .header,
  .scene-marketing-mask .mask-container .header {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90vw;
    z-index: 2;
  }
  /* overlay a gradiente sull'immagine di sfondo della scena, per contrasto */
  .spotlight .mask-container::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.55) 100%);
    pointer-events: none;
    z-index: 1;
  }
}


/* ===========================================================
   Heading SEO (16/07) — ripristino tipografia dei titoloni dopo
   il cambio di tag (i valori vw stanno nella tipografia Elementor
   dei widget, che però targettava il <p>). Qui li riapplico ai
   nuovi tag per element-id, identici (vw preservati).
   =========================================================== */
.elementor-element-47c8964 h1 { font-family:"BaseNeueTrial-CondensedBlack",sans-serif; font-weight:400; font-size:6vw; line-height:.9em; margin:0; }
@media (max-width:1024px){ .elementor-element-47c8964 h1 { font-size:7.5vw; } }
@media (max-width:767px){ .elementor-element-47c8964 h1 { font-size:10vw; line-height:1em; } }

.elementor-element-d8b17d5 h2 { font-family:"BaseNeueTrial-CondensedBlack",sans-serif; font-weight:400; font-size:40vw; line-height:1em; margin:0; }

.elementor-element-d548b6e h2 { font-family:"BaseNeueTrial-CondensedBlack",sans-serif; font-weight:700; font-size:15vw; line-height:1em; margin:0; }
@media (max-width:1024px){ .elementor-element-d548b6e h2 { font-size:14vw; } }
@media (max-width:767px){ .elementor-element-d548b6e h2 { font-size:20vw; } }
/* ===========================================================
   Footer redesign (16/07) — form Gerico
   Desktop: Contact | Form (Nome|Email|Oggetto in linea, msg + INVIA giallo) | Acceleriamo
   Mobile:  Acceleriamo -> Form -> Contact -> logo, centrato
   =========================================================== */
.elementor-element-fd604fa { align-items: center; }
/* colonna form piu' larga per far stare i 3 campi in linea */
.elementor-element-756134c { width: 46% !important; max-width: 640px; }

.gerico-footer-form { width: 100%; }
.gerico-footer-form form.wpcf7-form {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; align-items: start;
}
.gerico-footer-form form.wpcf7-form > p { margin: 0; }
.gerico-footer-form form.wpcf7-form > p:has(textarea),
.gerico-footer-form form.wpcf7-form > p:has(input[type=submit]) { grid-column: 1 / -1; }

.gerico-footer-form .wpcf7-form input:not([type=submit]),
.gerico-footer-form .wpcf7-form textarea {
  width: 100%; background: #161616; border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px; color: #fff; padding: 0 16px; height: 46px;
  font-size: 14px; font-family: inherit; box-sizing: border-box;
}
.gerico-footer-form .wpcf7-form textarea { height: 84px; min-height: 84px; padding: 12px 16px; resize: vertical; }
.gerico-footer-form .wpcf7-form ::placeholder { color: #6a6a6a; }
.gerico-footer-form .wpcf7-form label { display: block; color: #9a9a9a; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }

/* BOTTONE GERICO: pillola gialla grande, BaseNeue uppercase */
.gerico-footer-form .wpcf7-form input[type=submit] {
  display: block; width: 100%; height: auto; min-height: 58px; margin-top: 4px;
  background: #fdc52e; color: #111; border: 1.5px solid transparent; border-radius: 100px;
  padding: 16px 40px; cursor: pointer;
  font-family: "BaseNeueTrial-CondensedBlack", sans-serif; text-transform: uppercase;
  font-size: 1.35rem; letter-spacing: .02em; line-height: 1;
  transition: transform .15s ease, opacity .2s ease;
}
.gerico-footer-form .wpcf7-form input[type=submit]:hover { transform: translateY(-2px); }
.gerico-footer-form .wpcf7-spinner { margin: 6px auto 0; display: block; }

@media (max-width: 1024px) {
  .elementor-element-fd604fa {
    flex-direction: column-reverse !important; align-items: center !important;
    text-align: center; gap: 20px;
  }
  .elementor-element-fd604fa > * {
    width: 100% !important; max-width: 460px !important; height: auto !important;
    min-height: 0 !important; flex: 0 0 auto !important; align-items: center !important;
  }
  .elementor-element-756134c { width: 100% !important; max-width: 460px !important; }
  .elementor-element-fd604fa p,
  .elementor-element-fd604fa .elementor-widget-text-editor { text-align: center !important; }
  .elementor-element-816732f .elementor-social-icons-wrapper,
  .elementor-element-816732f [class*="social-icons"] { justify-content: center !important; }
  /* form: 1 colonna su mobile + più compatto (footer più corto → logo grande più in alto) */
  .gerico-footer-form form.wpcf7-form { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; text-align: left; gap: 10px; }
  .gerico-footer-form .wpcf7-form input:not([type=submit]) { height: 42px; }
  .gerico-footer-form .wpcf7-form textarea { height: 60px; min-height: 60px; }
  .gerico-footer-form .wpcf7-form input[type=submit] { min-height: 50px; padding: 13px 32px; font-size: 1.2rem; }
}


/* ===========================================================
   Case study — titoloni colorati (frasi-blocco "Come lo abbiamo
   fatto") in MAIUSCOLO. Gli id sono condivisi da tutti i case
   study (template Basedodici duplicato). (16/07, daniel)
   =========================================================== */
.elementor-element-f653601 p,
.elementor-element-fdc423c p,
.elementor-element-5c3672a p,
.elementor-element-5430dae p { text-transform: uppercase; }


/* Footer: icone brand sotto "Acceleriamo" (40px come i social) */
.gerico-footer-icons { display: flex; gap: 12px; margin-top: 16px; align-items: center; justify-content: flex-end; }
.gerico-footer-icons img { width: 40px; height: 40px; object-fit: contain; display: block; }
@media (max-width: 1024px) { .gerico-footer-icons { justify-content: center; } }


/* ===========================================================
   Footer form v2 — Elementor Pro widget b8d47f0 (28/07):
   stesso look del CF7 pensionato (bg #161616, radius 12,
   INVIA pillola gialla BaseNeue). Le regole .gerico-footer-form
   sopra restano per storia ma non matchano più nulla.
   =========================================================== */
.elementor-element-b8d47f0 .elementor-form-fields-wrapper { margin: 0 -6px; }
.elementor-element-b8d47f0 .elementor-field-group { margin-bottom: 12px; padding: 0 6px; }
.elementor-element-b8d47f0 .elementor-field {
  background: #161616; border: 1px solid rgba(255,255,255,.14); border-radius: 12px;
  color: #fff; padding: 0 16px; height: 46px; font-size: 14px; font-family: inherit; box-sizing: border-box;
}
.elementor-element-b8d47f0 textarea.elementor-field { height: 84px; min-height: 84px; padding: 12px 16px; resize: vertical; }
.elementor-element-b8d47f0 .elementor-field::placeholder { color: #6a6a6a; }
.elementor-element-b8d47f0 .elementor-field-type-html .elementor-field { all: unset; }
.gerico-form-privacy { font-style: italic; color: #9a9a9a; font-size: 12px; }
.gerico-form-privacy a { color: #EBEBEB; text-decoration: underline; }
.gerico-form-privacy a:hover { color: #fdc52e; }
/* 28/07 sera: INVIA come i pulsanti fratelli del sito (misure reali di PARLACI:
   BaseNeue 21.6px, padding 14/29, radius 35, larghezza auto) — via la barra full-width.
   ⚠️ Il vero vincolo era il CSS del form Elementor: flex: 0 0 100% sul bottone —
   la flex-basis 100% governa la larghezza nell'asse flex e batte QUALSIASI width
   (anche inline !important). Serve flex-basis auto con !important. */
.elementor-element-b8d47f0 .elementor-field-type-submit { justify-content: center !important; }
.elementor-element-b8d47f0 .elementor-button[type=submit] {
  flex: 0 0 auto !important; width: auto; min-height: 0; margin-top: 4px;
  background: #fdc52e; color: #111; border: 1.5px solid transparent; border-radius: 35px;
  padding: 14.4px 44px; cursor: pointer;
  font-family: "BaseNeueTrial-CondensedBlack", sans-serif; text-transform: uppercase;
  font-size: 21.6px; letter-spacing: .02em; line-height: 1;
  transition: transform .15s ease, opacity .2s ease;
}
.elementor-element-b8d47f0 .elementor-button[type=submit]:hover { transform: translateY(-2px); background: #fdc52e; color: #111; }
/* niente spinner dentro il pulsante durante l'invio (richiesta Ludovico 28/07) */
.elementor-element-b8d47f0 .elementor-button .elementor-button-icon,
.elementor-element-b8d47f0 .eicon-loading,
.elementor-element-b8d47f0 .e-form-spinner,
.elementor-element-b8d47f0 .elementor-form-spinner { display: none !important; animation: none !important; }
.elementor-element-b8d47f0 .elementor-message { font-size: 13px; color: #EBEBEB; }
.elementor-element-b8d47f0 .elementor-message.elementor-message-danger { color: #ff6f61; }
@media (max-width: 1024px) {
  /* 1 colonna: via i gutter desktop, così nota privacy e campi sono a filo con INVIA */
  .elementor-element-b8d47f0 .elementor-form-fields-wrapper { max-width: 420px; margin: 0 auto; text-align: left; }
  .elementor-element-b8d47f0 .elementor-field-group { padding: 0; }
  .elementor-element-b8d47f0 .elementor-field { height: 42px; }
  .elementor-element-b8d47f0 textarea.elementor-field { height: 60px; min-height: 60px; }
  .elementor-element-b8d47f0 .elementor-button[type=submit] { padding: 12px 36px; font-size: 19px; }
  /* nota privacy centrata SOLO su mobile (desktop resta a sinistra) */
  .elementor-element-b8d47f0 .elementor-field-type-html { text-align: center; }
}

/* Riga policy + P.IVA in fondo al footer (28/07) — tutta centrata; su desktop respira in basso */
.gerico-policy-links { display: flex; justify-content: center; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 18px 0 0; border-top: 1px solid #2a2a2a; margin-top: 26px;
  font-family: 'SuisseIntl-Regular', sans-serif; font-size: 12px; color: #9a9a9a; text-align: center; }
.gerico-policy-links .gpl-right { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; justify-content: center; }
.gerico-policy-links a { color: #9a9a9a; text-decoration: none; transition: color .2s; }
.gerico-policy-links a:hover { color: #fdc52e; }
@media (min-width: 1025px) { .gerico-policy-links { padding-bottom: 28px; } }

/* --- Riga legale su UNA riga sola sui telefoni (15/08, richiesta Daniel) ---
   Di default (tablet e desktop) si vedono i nomi per esteso: lì lo spazio
   avanza — a 768px la riga completa ne chiede 470 su ~760 disponibili.
   Sui telefoni no: 470px non stanno in 386, e la riga andava a capo spezzandosi
   in due blocchi. Invece di rimpicciolire il testo fino a 9px (che li avrebbe
   fatti stare, ma al limite del leggibile), si accorciano le etichette —
   "Cookie Policy" → "Cookie" — e il corpo resta a 11px.
   Le due varianti sono entrambe nel markup: qui si sceglie quale mostrare, così
   non c'è testo tagliato a metà e la traduzione inglese resta agganciata alla
   forma per esteso. */
.gpl-breve { display: none; }

@media (max-width: 767px) {
  .gerico-policy-links .gpl-esteso { display: none; }
  .gerico-policy-links .gpl-breve  { display: inline; }

  /* Una riga vuol dire: nessuno dei due contenitori può andare a capo. */
  .gerico-policy-links,
  .gerico-policy-links .gpl-right { flex-wrap: nowrap; }
  .gerico-policy-links .gpl-left,
  .gerico-policy-links .gpl-right a { white-space: nowrap; }

  /* Corpo e spazi scalano con la larghezza dello schermo, con un tetto: su un
     iPhone da 390 restano 11px e 12px di spazio (i valori misurati che stanno
     comodi in 386), su un telefono da 320 scendono in proporzione invece di
     traboccare. Senza la parte in vw, sui telefoni stretti la riga uscirebbe
     comunque — è lo stesso errore dei clamp che sotto una certa soglia si
     schiacciano tutti sul minimo (audit iPad dell'11/08). */
  .gerico-policy-links {
    font-size: min(11px, 2.9vw);
    gap: min(12px, 3.1vw);
  }
  .gerico-policy-links .gpl-right { gap: min(12px, 3.1vw); }
}


/* Homepage NERA #000 — override del #1A1A1A del tema. Applicata alla HOME LIVE
   (page 6083) e alla dupe di test (page 7363). ⚠️ NON annerire section.spotlight:
   è l'OVERLAY della scena mask e deve restare TRASPARENTE, altrimenti copre la
   frase che scorre in fase-1. Lo sfondo dietro la frase lo dà .scene-marketing-mask
   (già #000). Diagnosi e fix: PROGRESS 22/07. */
body.page-id-6083 .gerico-bg-change,
body.page-id-7363 .gerico-bg-change { --bg-to: #000000; }
body.page-id-6083 .portfolio-animation-01-work-item,
body.page-id-6083 .scene-marketing-mask,
body.page-id-6083 .gerico-work-grid__media,
/* sezioni Elementor della home live con bg #1A1A1A proprio (non presenti sulla dupe) */
body.page-id-6083 .elementor-element-4715f45c,
body.page-id-6083 .elementor-element-17de652,
body.page-id-6083 .elementor-element-b5a7beb,
body.page-id-6083 .elementor-element-d6c510d,
body.page-id-6083 .elementor-element-70b6b6ab,
body.page-id-7363 .portfolio-animation-01-work-item,
body.page-id-7363 .scene-marketing-mask,
body.page-id-7363 .gerico-work-grid__media { background-color: #000000 !important; }

/* Bottone "GUARDA TUTTI I PROGETTI" (container 17de652): a riposo era #000 →
   invisibile sul fondo nero della home. Lo portiamo a #1A1A1A così stacca. Il
   SECONDO stato del flip (.gerico-flip-alt) resta GIALLO (regola sua, non toccata).
   :not(.gerico-flip-alt) esclude il clone giallo. (22/07) */
body.page-id-6083 .elementor-element-17de652 .elementor-widget-button:not(.gerico-flip-alt) .elementor-button,
body.page-id-7363 .elementor-element-17de652 .elementor-widget-button:not(.gerico-flip-alt) .elementor-button {
  background-color: #1A1A1A !important;
  --button-background-color: #1A1A1A;
}


/* Header: si nasconde arrivati al footer (scroll giù), riappare scrollando su.
   La transizione è inline via JS; qui solo lo stato nascosto. (initHeaderHideAtFooter) */
.gerico-header-hidden { margin-top: -160px !important; pointer-events: none !important; }


/* Overlay scuro sulla foto della mask scene (era troppo chiara) — tutti i breakpoint.
   Stratificazione: foto (z0) < overlay (z1) < frase .header (z2). (daniel 17/07) */
.spotlight .mask-container .mask-img,
.scene-marketing-mask .mask-container .mask-img { z-index: 0; }
.spotlight .mask-container::after,
.scene-marketing-mask .mask-container::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  pointer-events: none;
  z-index: 1;
}
.spotlight .mask-container .header,
.scene-marketing-mask .mask-container .header { z-index: 2; }

/* ── "NON SIAMO UNA TECH AGENCY." → tre frasi, tre righe (Daniel 11/08) ──────
   L'a capo lo inserisce gerico-engine.js (initTextAnimation01) come newline
   reale, spezzando dopo ogni punto: così vale in italiano e in inglese senza
   dipendere dal copy. Qui si rende visibile il newline — e serve ANCHE sul
   ::before, che è l'overlay nero del clip-text: senza, i due strati vanno a
   capo in punti diversi. Solo desktop: sotto i 1000px la frase è già stretta e
   ogni riga andrebbe a capo per conto suo. */
@media (min-width: 1001px) {
  .elementor-element-50c0724 .text-animation-01-animate-text,
  .elementor-element-50c0724 .text-animation-01-animate-text::before {
    white-space: pre-line;
  }
  /* Il ::before è absolute SENZA width: di norma va a capo da solo e occupa tutto
     il blocco, ma con pre-line la sua larghezza diventa quella della riga più
     lunga (shrink-to-fit) → col testo centrato i due strati si sfasavano in
     orizzontale. Con width:100% torna largo quanto il blocco e il centraggio
     delle due copie coincide di nuovo. */
  .elementor-element-50c0724 .text-animation-01-animate-text::before {
    width: 100%;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   FASCIA TABLET / iPad (768–1024px) — correzione delle grandezze
   ──────────────────────────────────────────────────────────────────────────
   Audit dell'11/08 (richiesta di Daniel): su iPad diversi testi erano fuori
   scala, in alcuni casi PIÙ PICCOLI che sul telefono. Causa comune: il
   breakpoint tablet di Elementor era rimasto con valori fissi (2em) o
   scambiati, mentre telefono e desktop usano unità fluide.
   Metodo seguito: ogni valore è stato scelto per RACCORDARSI a quello del
   telefono e a quello del desktop, non a occhio — così la grandezza cresce
   con continuità man mano che lo schermo si allarga.
   Si interviene solo fra 768 e 1024: sotto i 768 il telefono resta intatto.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1024px) {

  /* ① Titoli dei servizi in home — erano 2em FISSO = 32px, cioè più piccoli
        dei 47px del telefono. Ora scalano (≈57px su iPad, ≈70px su iPad Pro). */
  .elementor-element.elementor-element-52fe211b .elementor-heading-title,
  .elementor-element.elementor-element-1046998 .elementor-heading-title,
  .elementor-element.elementor-element-6509c96 .elementor-heading-title,
  .elementor-element.elementor-element-f6daa31 .elementor-heading-title {
    font-size: clamp(3.2rem, 7.4vw, 4.4rem) !important;
  }

  /* ② "SE LA PENSI COME NOI, PARLIAMONE" — la regola per mobile (38px) valeva
        fino a 1024, quindi su iPad restava della misura del telefono mentre su
        desktop è 96px. Ora ≈69px su iPad, ≈90px su iPad Pro. */
  .scene-marketing-mask .mask-container .header,
  .scene-marketing-mask .mask-container .header :is(h1, h2, h3) {
    font-size: clamp(4rem, 9vw, 5.6rem) !important;
  }

  /* ③ + ④ CASE STUDY — sul breakpoint tablet le due misure erano SCAMBIATE:
        il titolone del blocco risultati stava a 1.6vw (12px, illeggibile) e la
        didascalia sotto ogni numero a 4.6vw (35px), tanto da sfondare le card.
        Gli id dei widget sono identici su tutti i case study (nascono dalla
        duplicazione del template Basedodici), quindi la correzione vale per
        tutti e 13 in una volta sola. */
  .elementor-element.elementor-element-e66866e,
  .elementor-element.elementor-element-e66866e p {
    font-size: clamp(3rem, 6.8vw, 3.8rem) !important;   /* titolo: ≈52px → ≈61px */
  }
  .elementor-element.elementor-element-4bc50ff,
  .elementor-element.elementor-element-4bc50ff p,
  .elementor-element.elementor-element-bf97075,
  .elementor-element.elementor-element-bf97075 p,
  .elementor-element.elementor-element-f92e7b0,
  .elementor-element.elementor-element-f92e7b0 p,
  .elementor-element.elementor-element-8c480e6,
  .elementor-element.elementor-element-8c480e6 p {
    font-size: clamp(0.95rem, 1.9vw, 1rem) !important;    /* didascalia: ≈15px → ≈16px, così non supera i 14px del desktop */
    line-height: 1.35 !important;
  }

  /* ⑤ CASE STUDY — testo di lettura a 12px su iPad, cioè più piccolo che sul
        telefono (16px) e ben sotto il desktop (19px): sono i paragrafi che
        raccontano il progetto, quelli che una persona si ferma davvero a
        leggere, ed è il posto peggiore dove risparmiare spazio. Ora ≈16→19px. */
  .elementor-element.elementor-element-55ce45f, .elementor-element.elementor-element-55ce45f p,
  .elementor-element.elementor-element-a55e647, .elementor-element.elementor-element-a55e647 p,
  .elementor-element.elementor-element-ba1f994, .elementor-element.elementor-element-ba1f994 p,
  .elementor-element.elementor-element-5e9d5ab, .elementor-element.elementor-element-5e9d5ab p,
  .elementor-element.elementor-element-efb9335, .elementor-element.elementor-element-efb9335 p,
  .elementor-element.elementor-element-540bd22, .elementor-element.elementor-element-540bd22 p,
  .elementor-element.elementor-element-ce40dba, .elementor-element.elementor-element-ce40dba p,
  .elementor-element.elementor-element-078dfd6, .elementor-element.elementor-element-078dfd6 p,
  .elementor-element.elementor-element-b50c939, .elementor-element.elementor-element-b50c939 p,
  .elementor-element.elementor-element-707eef3, .elementor-element.elementor-element-707eef3 p,
  .elementor-element.elementor-element-5a39fce, .elementor-element.elementor-element-5a39fce p,
  .elementor-element.elementor-element-7127ca1, .elementor-element.elementor-element-7127ca1 p,
  .elementor-element.elementor-element-c03372b, .elementor-element.elementor-element-c03372b p,
  .elementor-element.elementor-element-0e43480, .elementor-element.elementor-element-0e43480 p {
    font-size: clamp(1rem, 1.9vw, 1.2rem) !important;     /* ≈16px su iPad → ≈19px su iPad Pro */
    line-height: 1.5 !important;
  }

  /* ⑥ CASE STUDY — il richiamo finale ("contact" / "PARLACI DEL TUO PROGETTO")
        scendeva a 23px su iPad contro i 35px del telefono: è la chiamata
        all'azione in fondo alla pagina, deve restare evidente. Ora ≈28→32px. */
  .elementor-element.elementor-element-0cd474a, .elementor-element.elementor-element-0cd474a p,
  .elementor-element.elementor-element-d923254, .elementor-element.elementor-element-d923254 p {
    font-size: clamp(1.7rem, 3.6vw, 2rem) !important;
  }
}


/* ==========================================================
   HEADER v2 (12/08) — logo a sinistra + pill MENU a destra
   Il pannello unico è quello di destra (.gerico-cta-menu), lo stesso che
   apriva LET'S TALK: stesse animazioni, contenuto nuovo (WORK + 5 progetti,
   CONTATTACI, lingua).
   ⚠️ TUTTE le regole di questo blocco sono ancorate a `.gerico-header-v2`, la
   classe che porta SOLO il template nuovo. Senza quell'ancora toccherebbero
   anche il pannello LET'S TALK dell'header in produzione, che usa gli stessi
   nomi di classe (.gerico-cta-menu): l'header vecchio deve restare intatto
   finché non si commuta.
   ========================================================== */

/* ⚠️ La sequenza d'ingresso del contenuto del pannello ESISTE GIÀ: sta nel <style>
   dentro il template (widget HTML) e porta i figli da opacity 0 a 1 con un ritardo
   crescente. Ma è ENUMERATA a mano — :nth-child(1) … :nth-child(4) — perché il
   pannello di LET'S TALK aveva esattamente 4 elementi. Il pannello v2 ne ha 5
   (WORK · lista progetti · CONTATTACI · riga contatti · lingua): il quinto non
   veniva mai portato a 1 e restava invisibile, pur essendo nel DOM, al posto
   giusto e col colore giusto.
   Qui si estende la serie senza toccare quella esistente. La specificità è più
   alta di quella che nasconde (0,4,0 contro 0,3,0), quindi vince a prescindere
   dall'ordine dei fogli di stile. */
.gerico-header-v2.cta-open-instant .gerico-cta-menu .elementor-widget {
  opacity: 1;
  transform: translateY(0);
}
.gerico-header-v2.cta-open-instant .gerico-cta-menu .elementor-widget:nth-child(5) { transition-delay: 0.45s; }
.gerico-header-v2.cta-open-instant .gerico-cta-menu .elementor-widget:nth-child(6) { transition-delay: 0.50s; }
.gerico-header-v2.cta-open-instant .gerico-cta-menu .elementor-widget:nth-child(7) { transition-delay: 0.55s; }

/* Nel pannello v2 la lista non ha più bisogno della spinta verso il basso che
   serviva quando era sola nel pannello di sinistra: qui ha i titoli sopra. */
.gerico-header-v2 .gerico-cta-menu .gerico-work-menu {
  transform: none;
}

/* I contenuti si allineano a sinistra come un menu, non centrati. */
.gerico-header-v2 .gerico-cta-menu .e-con,
.gerico-header-v2 .gerico-cta-menu .e-container {
  align-items: stretch !important;
  text-align: left;
}

/* --- Selettore lingua [gerico-lang-switch] --- */
.gerico-header-v2 .gerico-lang-switch {
  display: flex;
  align-items: center;
  gap: clamp(0.35rem, 0.7vw, 0.6rem);
  /* Il distacco dai bottoni contatto segue il gap del pannello (15/08): è un
     piede, non una terza sezione, quindi si stacca meno di quanto CONTATTACI si
     stacchi dai progetti. Unica dichiarazione di questo margine. */
  margin-top: clamp(0.75rem, 1.6vw, 1.375rem);
}
.gerico-header-v2 .gerico-lang-switch__item {
  font-family: "BaseNeueTrial-CondensedBlack", sans-serif;
  font-size: clamp(0.75rem, 1.11vw, 1rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  opacity: 0.55;
  text-decoration: none;
  transition: opacity 0.25s ease, color 0.25s ease;
}
.gerico-header-v2 .gerico-lang-switch__item:hover {
  opacity: 1;
  color: #FDC52E;
}
.gerico-header-v2 .gerico-lang-switch__item.is-active {
  opacity: 1;
  color: #FDC52E;
}
.gerico-header-v2 .gerico-lang-switch__sep {
  color: #FFFFFF;
  opacity: 0.35;
  font-size: clamp(0.75rem, 1.11vw, 1rem);
  line-height: 1;
}

/* --- Header v2: via i due elementi flottanti (richiesta Daniel 12/08) ---
   La bandierina di TranslatePress in basso a sinistra è ridondante: la lingua
   ora sta nel menu, ed è raggiungibile da ogni punto della pagina invece che
   solo in cima. La pill del biscotto in basso a destra sparisce insieme.
   ⚠️ Il consenso resta revocabile: nel footer c'è "Preferenze cookie", che
   riapre lo stesso pannello (verificato). Senza quel link questa regola NON si
   potrebbe fare — revocare il consenso deve restare facile quanto darlo.
   L'ancora è :has() sul body perché i due elementi NON stanno dentro l'header:
   così restano visibili finché il sito usa l'header vecchio. */
body:has(.gerico-header-v2) .trp-floating-switcher,
body:has(.gerico-header-v2) #gerico-cc-pill {
  display: none !important;
}

/* --- Header v2: il logo alto quanto la pill (richiesta Daniel 12/08) ---
   L'altezza della pill è una sola misura fluida (il min-height del suo container,
   `clamp(2rem, 3.125vw, 2.8rem)` → 32px sul telefono, 45px a 1440). Qui la si
   dichiara UNA VOLTA come variabile e il logo la eredita: così restano uguali per
   costruzione, e se un giorno si cambia l'altezza della pill il logo la segue da sé.
   Il logo prima era dimensionato per LARGHEZZA, quindi la sua altezza era una
   conseguenza casuale del rapporto del file (4,5:1) — ed è per questo che su mobile
   risultava alto 12px contro i 32 della pill.
   ⚠️ Specificità: Elementor dichiara `.elementor img { height: auto }` a (0,1,1);
   questo selettore vale (0,2,1) e quindi vince. La larghezza è stata tolta dal
   widget in Elementor per non lasciare due sorgenti in conflitto. */
.gerico-header-v2 {
  /* altezza della pill: la stessa misura fluida del suo container in Elementor */
  --gerico-pill-h: clamp(2rem, 3.125vw, 2.8rem);
  /* il logo è una FRAZIONE di quell'altezza: alto quanto la pill era fuori scala
     (il logo è un lungo wordmark 4,5:1, quindi ogni pixel di altezza vale 4,5 di
     larghezza e a parità di altezza pesa molto più della pill).
     Si cambia SOLO questo numero per ingrandirlo o rimpicciolirlo ovunque. */
  --gerico-logo-h: calc(var(--gerico-pill-h) * 0.55);
}
.gerico-header-v2 .elementor-widget-theme-site-logo img {
  height: var(--gerico-pill-h);
  width: auto;
  max-width: none;
}

/* Il logo è un SVG 300×67 (rapporto 4,48:1). Dargli solo `height` non basta:
   qualcosa gli blocca la larghezza a 48px e l'SVG, invece di riempire il box, ci
   sta dentro centrato → il box era alto quanto la pill ma il DISEGNO era alto un
   terzo. Si impone anche la larghezza, ricavata dal rapporto vero del file, così
   l'inchiostro — non il contenitore — è alto quanto la pill.
   Il wrapper del widget va liberato dai suoi vincoli, altrimenti ritaglia. */
.gerico-header-v2 .elementor-widget-theme-site-logo,
.gerico-header-v2 .elementor-widget-theme-site-logo .elementor-widget-container,
.gerico-header-v2 .elementor-widget-theme-site-logo .elementor-image,
.gerico-header-v2 .elementor-widget-theme-site-logo a {
  width: auto;
  max-width: none;
  flex: 0 0 auto;
  line-height: 0;
}
/* ⚠️ Il secondo selettore non è ridondante. Elementor dichiara
   `.elementor-widget-image a img[src$=".svg"] { width: 48px }` — una larghezza
   FISSA per gli SVG dentro un link — che pesa (0,2,2): batteva la nostra (0,2,1)
   per un soffio, ed è il motivo per cui il logo restava a 48px qualunque altezza
   gli dessimo. Ripetere la regola con l'attributo la porta a (0,3,2) e vince a
   prescindere dall'ordine dei fogli. La prima resta per il giorno in cui il logo
   non fosse più un SVG (lì quella di Elementor non si applica).
   Stessa famiglia del gotcha noto su `.elementor img { height: auto }`: dentro i
   widget di Elementor, per le immagini serve specificità ≥ (0,2,0). */
.gerico-header-v2 .elementor-widget-theme-site-logo img,
.gerico-header-v2 .elementor-widget-theme-site-logo a img[src$=".svg"] {
  height: var(--gerico-logo-h);
  width: calc(var(--gerico-logo-h) * 300 / 67);
  max-width: none;
  display: block;
}

/* ==========================================================
   HEADER v2 — DIMENSIONI (rifatte 12/08 su segnalazione di Daniel)
   Problema di partenza: ogni pezzo aveva la sua misura, con clamp che sotto
   i 1024px si schiacciavano tutte sul valore MINIMO. Risultato: da 320 a 1024
   la barra era sempre alta 67px, la pill sempre 62×32 e il logo sempre 79×18 —
   su un iPad da 1024 identici a un telefono da 360. È lo stesso difetto trovato
   nell'audit iPad dell'11/08, qui in piccolo.
   Ora c'è UNA unità (--u) per fascia, e tutto il resto è una frazione di quella:
   barra, altezza pill, corpo del testo, aria ai lati, logo. Cambiando --u si
   scala l'header intero restando in proporzione.
   La pill NON ha più una larghezza propria: la definisce il testo + un padding
   espresso in frazione di --u, così l'aria ai lati è sempre la stessa in
   rapporto alla parola, su qualunque schermo (prima cresceva col telefono
   mentre la parola restava ferma: 13px a 360, 19px a 430).
   ========================================================== */

/* Le tre fasce sono RACCORDATE: ogni formula, al suo estremo, dà lo stesso valore
   di quella successiva al proprio inizio, così non c'è nessuno scalino visibile
   ruotando un iPad o allargando la finestra. (La prima stesura ne aveva due: a
   767→768 si passava da 63 a 34px, e a 1024→1025 la barra RIMPICCIOLIVA.) */
.gerico-header-v2 { --u: clamp(1.9rem, 8.2vw, 2.1rem); }                 /* telefono: 30 → 34 */
@media (min-width: 768px)  { .gerico-header-v2 { --u: 4.45vw; } }        /* tablet:   34 → 46 */
@media (min-width: 1025px) { .gerico-header-v2 { --u: clamp(2.85rem, 2.1rem + 1.16vw, 3.5rem); } } /* desktop: 46 → 56 */

/* La PILL ha una scala propria, non una frazione di --u.
   Sul desktop risultava pesante (50px a 1440): una proporzione giusta sul
   telefono non lo è per forza su uno schermo grande, dove lo stesso rapporto
   diventa un blocco nero. Ma correggerlo con un fattore applicato solo da 1025
   in su creava uno SCALINO — 46 → 38 attraversando i 1024 — e due iPad in
   orizzontale l'avrebbero mostrata diversa. Quindi: scala propria, che cresce
   più piano di --u e resta continua fra le fasce.
      30 → 34 (telefoni) · 34 → 36 (tablet) · 36 → 44 (desktop)
   Aria e corpo del testo sono frazioni della PILL, non di --u, così la pill
   resta simile a se stessa a ogni misura. Il LOGO invece resta agganciato a --u,
   perché deve seguire la barra, non la pill. */
.gerico-header-v2 {
  --gerico-pill-h: var(--u);
  --gerico-pill-pad: calc(var(--gerico-pill-h) * 0.62);   /* aria ai lati della parola */
  --gerico-pill-fs:  calc(var(--gerico-pill-h) * 0.45);   /* corpo di MENU */
  --gerico-logo-h:   calc(var(--u) * 0.55);
}
@media (min-width: 768px)  { .gerico-header-v2 { --gerico-pill-h: calc(1.75rem + 0.78vw); } }
@media (min-width: 1025px) { .gerico-header-v2 { --gerico-pill-h: clamp(2.25rem, 1.68rem + 0.89vw, 2.75rem); } }
/* NB: l'altezza della BARRA resta quella impostata in Elementor
   (clamp(3.75rem, 8.33vw, 7.5rem) → 67 · 85 · 107 · 120): è già continua e
   corretta. Un tentativo di ricalcolarla da --u la faceva crescere a scatti,
   perché sotto i 1025px vinceva comunque quella di Elementor. Meno regole in
   lotta, meno sorprese. */

/* pill: altezza dall'unità, larghezza dal contenuto */
.gerico-header-v2 .gerico-cta-button {
  width: auto !important;
  min-width: 0 !important;
  --min-height: var(--gerico-pill-h);
}
.gerico-header-v2 .gerico-cta-button .elementor-widget-button,
.gerico-header-v2 .gerico-cta-button .elementor-button {
  height: var(--gerico-pill-h) !important;
  width: auto !important;
}
/* ⚠️ Il padding va messo SOLO sul bottone, non anche sul widget che lo contiene:
   sono annidati, quindi le due dichiarazioni si sommano e l'aria raddoppia
   (era il motivo dei 34px per lato al primo tentativo). */
.gerico-header-v2 .gerico-cta-button .elementor-button {
  padding-inline: var(--gerico-pill-pad) !important;
}
.gerico-header-v2 .gerico-cta-button .elementor-button-text {
  font-size: var(--gerico-pill-fs) !important;
  line-height: 1;
}

/* Il logo era 20px più dentro della pill, e non per un padding: il widget HTML
   che porta il CSS e lo script del pannello è un figlio della barra senza `order`,
   quindi si piazza PRIMO nella fila flex. Non si vede (contiene solo <style> e
   <script>) ma occupa un posto, e il `gap: 20px` della barra lo separa dal logo:
   quei 20px erano tutta la differenza fra i due lati.
   Lo si toglie dal flusso. Il <style> continua ad applicarsi e lo <script> è già
   stato eseguito: `display:none` non tocca né l'uno né l'altro. */
.gerico-header-v2 > .elementor-widget-html {
  display: none !important;
}

/* ==========================================================
   HEADER v2 — RITMO DEL PANNELLO (15/08, su segnalazione di Daniel)
   Tre difetti dello stesso tipo: il pannello era una colonna con UN gap solo
   (14px) fra tutti e cinque i blocchi, quindi WORK, i cinque progetti,
   CONTATTACI, i due bottoni e la lingua stavano alla stessa distanza fra loro.
   Senza un ritmo, "CONTATTACI" sembrava la sesta voce della lista dei progetti
   e non l'inizio di una sezione nuova.
   Ora ci sono DUE distanze: quella dentro una sezione (il gap del container,
   portato a 22px in Elementor) e quella FRA due sezioni, qui sotto. La seconda
   è circa il doppio della prima: è quel rapporto — non il valore assoluto — a
   far leggere i due blocchi come separati.
   ========================================================== */

/* Rete di sicurezza: il pannello non esce mai dallo schermo.
   Aggiungendo aria (e il link in fondo alla lista) il contenuto è cresciuto di
   ~130px: su un portatile 1366×768 il pannello arriva a 20px dal fondo, e su
   qualunque finestra più bassa uscirebbe. Invece di calibrare le spaziature sul
   caso peggiore — che avrebbe tolto respiro a tutti gli altri — il pannello si
   ferma all'altezza disponibile e, solo se davvero non ci sta, scorre al suo
   interno. Sopra i 900px di finestra questa regola non si attiva mai.
   `100dvh` e non `100vh`: sui browser mobile la barra degli indirizzi entra e
   esce, e `vh` resta fermo all'altezza massima (il pannello sporgerebbe sotto). */
.gerico-header-v2 .gerico-cta-menu {
  max-height: calc(100dvh - clamp(1rem, 1.39vw, 1.25rem) * 2);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(253, 197, 46, 0.35) transparent;
}

/* Stacco fra la lista dei progetti e il blocco contatti.
   L'ancora è l'id del widget Elementor, non la posizione: se un giorno si
   aggiunge una voce al pannello, questa regola resta attaccata a CONTATTACI
   invece di scivolare sul vicino (stesso criterio adottato l'11/08 per gli
   agganci JS, che selezionavano per testo italiano e si rompevano in /en/). */
.gerico-header-v2 .gerico-cta-menu .elementor-element-e2a0002 {
  margin-top: clamp(1.25rem, 2.6vw, 2.25rem);
}

/* (il distacco del selettore lingua sta nella sua regola, più sopra: una sola
   dichiarazione per proprietà, così non ci sono due sorgenti in conflitto) */

/* --- Link "TUTTI I PROGETTI →" (torna, com'era nell'header vecchio) ---
   Il titolo WORK era un link alla pagina /work/, ma graficamente è identico a
   CONTATTACI, che link non è: nessuno poteva indovinare che fosse cliccabile.
   Il link è tornato dov'era prima — piccolo, in fondo alla lista — e WORK è di
   nuovo solo un'etichetta di sezione. L'affordance sta nella freccia e nella
   riga che lo separa dai progetti, non nel colore (in questo pannello il giallo
   è il colore dei titoli, quindi non segnala "cliccabile").
   Lo stile di base arriva da .gerico-work-menu__all (riga ~1281), condiviso con
   l'header in produzione: qui si aggiusta solo la spaziatura, perché nel v2
   sotto la lista c'è un'altra sezione e non il fondo del pannello. */
.gerico-header-v2 .gerico-cta-menu .gerico-work-menu__all {
  margin-top: clamp(0.6rem, 1.2vw, 1rem);
  padding-bottom: 0;
  opacity: 0.85;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.gerico-header-v2 .gerico-cta-menu .gerico-work-menu__all:hover {
  opacity: 1;
}

/* ============================================================
   SEO 08/09 — H1 semantico nei titoli hero, resa IDENTICA al <p> che c'era.
   Widget 48427d9 = titolo-risultato dei case study (stesso id in tutti,
   clonati dal template Basedodici) · 2847231 = "WORK" gigante di /work/.
   Il tag h1 porta con sé taglia/peso/margini del tema: qui si azzerano
   ereditando tutto dal contenitore Elementor, come faceva il <p>.
   Verificato 08/09 con stili calcolati + confronto pixel (gemello, poi prod).
   ============================================================ */
.elementor-element-48427d9 .elementor-widget-container > h1,
.elementor-element-2847231 .elementor-widget-container > h1 {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}
.elementor-element-48427d9 .elementor-widget-container > h1 { margin-bottom: 0.9rem; }