/* RESET / BASE */
*{ box-sizing: border-box; }
html, body{ height: 100%; }

:root{
  --nav-h: 76px;

  /* intro */
  --intro-bg: #ff3b2f;
  --intro-stagger: 80ms;
  --curtain-ms: 1100ms;
}

body{
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #000;
  color: #fff;

  /* il body NON scrolla */
  overflow: hidden;
}

img, video{ max-width: 100%; display: block; }

/* SCROLL CONTAINER */
.scroll-container{
  height: 100vh;
  height: 100dvh;               /* ✅ mobile dynamic viewport */
  overflow-y: auto;

  scroll-snap-type: y proximity; /* desktop */
  scroll-behavior: auto;
  overscroll-behavior-y: contain;

  padding-top: var(--nav-h);
}

/* mentre sei in work: disattiva snap */
.scroll-container.is-in-work{
  scroll-snap-type: none !important;
}

/* sezioni standard (desktop) */
.section{
  height: 100vh;
  scroll-snap-align: start;
  position: relative;
}

/* NAVBAR (fixed) */
:root{
  --nav-h: 64px;
  --nav-pad-x: clamp(18px, 3vw, 48px);
  --nav-bg: transparent;
  --nav-fg: rgba(255,255,255,0.85);
  --nav-hover: #fff;
  --nav-underline: #fff;
  --nav-border: transparent;
}

.nav{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  background: var(--nav-bg) !important;
  border-bottom: 1px solid var(--nav-border) !important;
}

.nav__inner{
  height: var(--nav-h) !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--nav-pad-x) !important;
}

/* Landing: sempre trasparente (anche mobile) */
body:not(.page-privacy):not(.page-projects) .nav,
body:not(.page-privacy):not(.page-projects) .nav__inner{
  background: transparent !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
}

.nav__link{
  color: var(--nav-fg) !important;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 10px 12px;
  border-radius: 999px;
  transition: opacity .25s ease, color .25s ease;
  position: relative;
}
.nav__link:hover{
  color: var(--nav-hover) !important;
  background: transparent;
}
.nav__link:not(.nav__logo){
  position: relative !important;
}
.nav__link:not(.nav__logo)::after{
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 6px;
  height: 1px;
  background: var(--nav-underline) !important;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms ease;
  pointer-events: none;
}
.nav__link:not(.nav__logo):hover::after{
  transform: scaleX(1);
}

.nav__logo{
  font-weight: 800;
  opacity: 0.95;
  font-size: 20px;
  letter-spacing: 0.06em;
  padding: 0;
  text-decoration: none;
  color: var(--nav-fg) !important;
}

/* Desktop: quando scrolli spariscono e non cliccabili */
.nav.is-scrolled .nav__logo,
.nav.is-scrolled .nav__link{
  opacity: 0;
  color: transparent;
}
.nav.is-scrolled .nav__inner{ pointer-events: none; }
.nav.is-scrolled{ user-select: none; }

body.page-privacy,
body.page-blog,
body.page-article,
body.page-project{
  --nav-bg: #fff;
  --nav-fg: #111;
  --nav-hover: #111;
  --nav-underline: #111;
  --nav-border: rgba(0,0,0,0.08);
}

body.page-about,
body.page-contact{
  --nav-bg: #000;
  --nav-fg: #fff;
  --nav-hover: #fff;
  --nav-underline: #fff;
  --nav-border: rgba(255,255,255,0.08);
}

body.page-projects{
  --nav-bg: #000;
  --nav-fg: #fff;
  --nav-hover: #fff;
  --nav-underline: #fff;
  --nav-border: rgba(255,255,255,0.08);
}

body.page-about .nav.is-scrolled .nav__logo,
body.page-about .nav.is-scrolled .nav__link,
body.page-contact .nav.is-scrolled .nav__logo,
body.page-contact .nav.is-scrolled .nav__link,
body.page-privacy .nav.is-scrolled .nav__logo,
body.page-privacy .nav.is-scrolled .nav__link,
body.page-blog .nav.is-scrolled .nav__logo,
body.page-blog .nav.is-scrolled .nav__link,
body.page-article .nav.is-scrolled .nav__logo,
body.page-article .nav.is-scrolled .nav__link,
body.page-project .nav.is-scrolled .nav__logo,
body.page-project .nav.is-scrolled .nav__link,
body.page-projects .nav.is-scrolled .nav__logo,
body.page-projects .nav.is-scrolled .nav__link{
  opacity: 1 !important;
  color: var(--nav-fg) !important;
}

body.page-about .nav.is-scrolled .nav__inner,
body.page-contact .nav.is-scrolled .nav__inner,
body.page-privacy .nav.is-scrolled .nav__inner,
body.page-blog .nav.is-scrolled .nav__inner,
body.page-article .nav.is-scrolled .nav__inner,
body.page-project .nav.is-scrolled .nav__inner,
body.page-projects .nav.is-scrolled .nav__inner{
  pointer-events: auto !important;
}

body.page-about .nav.is-scrolled,
body.page-contact .nav.is-scrolled,
body.page-privacy .nav.is-scrolled,
body.page-blog .nav.is-scrolled,
body.page-article .nav.is-scrolled,
body.page-project .nav.is-scrolled,
body.page-projects .nav.is-scrolled{
  user-select: auto !important;
}

/* HERO */
.hero{
  position: relative;
  overflow: hidden;
  background: #000;
}

.hero__video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.hero__overlay{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 700px at 18% 62%, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.22) 100%),
    linear-gradient(0deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,0.3) 100%);
  z-index: 1;
  pointer-events: none;
}

.hero__content{
  position: relative;
  z-index: 2;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  padding-left: clamp(32px, 5vw, 120px);
  padding-right: clamp(32px, 5vw, 120px);
  padding-top: clamp(32px, 6vh, 96px);
  padding-bottom: clamp(80px, 12vh, 160px);
  gap: clamp(18px, 3vh, 40px);
}

.hero__title{
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 0.95;
  font-size: clamp(44px, 6.2vw, 128px);
  max-width: 18ch;
}

.hero__cta{
  display: inline-flex;
  align-items: center;
  gap: 16px;
  width: fit-content;

  padding: 18px 32px;
  background: #ff3b2f;
  color: #fff;
  text-decoration: none;

  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-size: clamp(12px, 1.0vw, 16px);
  border-radius: 2px;

  transition: background-color .25s ease, color .25s ease, gap .25s ease, transform .12s ease;
}

.hero__cta-arrow{
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .25s ease, transform .25s ease;
}

.hero__cta:hover{
  background: #fff;
  color: #ff3b2f;
  gap: 24px;
}
.hero__cta:hover .hero__cta-arrow{
  opacity: 1;
  transform: translateX(0);
}
.hero__cta:active{ transform: translateY(1px); }

.hero__line{
  white-space: nowrap;
  display: inline-block;
}

/* Hero word swap */
.hero__swap{
  display: inline-block;
  will-change: transform, opacity, filter;
  color: #ff3b2f;

  white-space: nowrap;  /* ✅ non spezzare la parola */
  min-width: 8.5ch;     /* ✅ riserva spazio (≈ "platform") */
  text-align: left;

  transition:
    color 520ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 520ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 520ms cubic-bezier(0.16, 1, 0.3, 1);
}
.hero__swap.is-red{ color: #ff3b2f; }
.hero__swap.is-yellow{ color: #FFA43A; }
.hero__swap.is-blue{ color: #302CC6; }

.hero__swap.is-out{
  opacity: 0;
  transform: translateY(10px);
  filter: blur(6px);
  transition: opacity 260ms ease, transform 260ms ease, filter 260ms ease;
}
.hero__swap.is-in{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);

  
}

/* ABOUT */
.about{
  background: #000;
  overflow: visible;
  display: flex;
  align-items: center;
}

.about__inner{
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 80px);
}

.about__top{
  position: absolute;
  top: clamp(18px, 3vh, 42px);
  left: clamp(18px, 3vw, 48px);
}

.about__label{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.75;
}
.about__dot{
  width: 7px;
  height: 7px;
  background: #ff3b2f;
  display: inline-block;
}

.about__title{
  margin: 0;
  text-align: center;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  font-size: clamp(42px, 5vw, 84px);
  padding-top: clamp(60px, 10vh, 140px);
  padding-bottom: clamp(10px, 1.5vh, 22px);
}

.about__grid{
  margin: clamp(26px, 3vw, 55px) auto 0;
  width: min(1120px, 100%);
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}

.about__quoteText{
  margin: 0;
  max-width: 42ch;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.6;
  opacity: 0.6;
}

.about__author{ margin-top: 18px; }
.about__authorLink{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}
.about__authorLink:hover .about__authorName{ text-decoration: underline; }

.about__avatar{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  object-fit: cover;
}

.about__authorName{ font-weight: 700; font-size: 14px; }
.about__authorRole{ font-size: 12px; opacity: 0.65; margin-top: 2px; }

.about__lead{
  margin: 0 0 28px;
  font-size: clamp(40px, 3.2vw, 58px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.045em;
  white-space: nowrap;
}

.about__text p{
  margin: 0 0 12px;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.7;
  opacity: 0.78;
  max-width: 60ch;
}

/* About ticker (desktop) */
.about__ticker{
  position: absolute;
  left: 50%;
  bottom: clamp(28px, 7vh, 110px);
  width: 100vw;
  transform: translateX(-50%);
  height: clamp(110px, 14vw, 240px);
  overflow: visible;
  pointer-events: none;
  padding-inline: clamp(24px, 4vw, 96px);
  z-index: 0;
}
.about__tickerTrack{
  position: relative;
  width: 100%;
  height: 100%;
}

.about__bigText{
  position: absolute;
  left: 50%;
  bottom: 0;

  white-space: nowrap;
  line-height: 0.95;
  font-weight: 800;
  letter-spacing: -0.06em;
  font-size: clamp(64px, 10vw, 220px);

  opacity: 0;
  filter: blur(6px);
  transform: translate3d(-50%, 35%, 0);

  transition:
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 700ms ease,
    filter 900ms cubic-bezier(0.16, 1, 0.3, 1);

  will-change: transform, opacity, filter;
}
.about__bigText.is-active{
  opacity: 1;
  filter: blur(0);
  transform: translate3d(-50%, 0, 0);
}
.about__bigText.is-exiting{
  opacity: 0;
  filter: blur(8px);
  transform: translate3d(-50%, -35%, 0);
}

/* About reveal */
.about .about__label,
.about .about__title,
.about .about__quote,
.about .about__text{
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  filter: blur(6px);
  transition:
    opacity 700ms ease,
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 900ms ease;
  will-change: transform, opacity, filter;
}
.about .about__avatar{
  transform: scale(0.92);
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.about.is-revealed .about__label,
.about.is-revealed .about__title,
.about.is-revealed .about__quote,
.about.is-revealed .about__text{
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}
.about.is-revealed .about__avatar{ transform: scale(1); }

.about.is-revealed .about__label{ transition-delay: 0ms; }
.about.is-revealed .about__title{ transition-delay: 80ms; }
.about.is-revealed .about__quote{ transition-delay: 180ms; }
.about.is-revealed .about__text { transition-delay: 260ms; }

.about .about__ticker{
  opacity: 0;
  transform: translate3d(-50%, 12px, 0);
  transition: opacity 700ms ease, transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.about.is-revealed .about__ticker{
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
  transition-delay: 380ms;
}

/* ticker colors */
.about__tickerTrack > .about__bigText:nth-of-type(1){ color: #302CC6 !important; }
.about__tickerTrack > .about__bigText:nth-of-type(2){ color: #ff3b2f !important; }
.about__tickerTrack > .about__bigText:nth-of-type(3){ color: #FFA43A !important; }

/* WORK — cinema section */
.section.work{
  scroll-snap-align: none !important;
  scroll-snap-stop: normal !important;

  height: auto !important;
  min-height: 50vh !important;     /* ✅ ultimo tuning */
  overflow: visible !important;

  background: #fff;
  color: #000;
}

.work__inner{
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: clamp(22px, 3.2vw, 70px);
  position: relative;
}

/* header cover */
.work__headerCover{
  position: sticky;
  top: calc(var(--nav-h) + 12vh) !important;
  z-index: 1;
  pointer-events: none;
  will-change: transform, opacity, filter;

  opacity: 1;
  filter: none;
  transform: none;
}

.work__top{ display: flex; justify-content: center; }

.work__pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  opacity: 0.9;
}

.work__pillDot{
  width: 7px;
  height: 7px;
  background: #ff3b2f;
  display: inline-block;
}

.work__title{
  margin: clamp(16px, 2vh, 22px) 0 0;
  text-align: center;
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 0.95;
  font-size: clamp(52px, 6.4vw, 118px);
}

.work__all{
  margin-top: 16px;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #ff3b2f;
  font-size: 14px;

  pointer-events: auto; /* unica cosa cliccabile */
}

.work__allArrow{
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .25s ease, transform .25s ease;
}
.work__all:hover{ color: #FFA43A; }
.work__all:hover .work__allArrow{ opacity: 1; transform: translateX(0); }

/* grid cards (sopra headerCover) */
.work__grid{
  position: relative;
  z-index: 3;
  width: min(1320px, 100%);

  margin: 30vh auto 0 !important;       /* ✅ ultimo tuning */
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(18px, 2.2vw, 44px);

  padding-bottom: 22vh !important;
}

/* placements */
.work-card--a{ grid-column: 1 / span 7; }
.work-card--b{ grid-column: 9 / span 4; margin-top: clamp(18px, 3vh, 34px); }
.work-card--c{ grid-column: 3 / span 8; margin-top: clamp(20px, 5vh, 60px); }
.work-card--d{ grid-column: 1 / span 7; margin-top: clamp(16px, 4vh, 44px); }
.work-card--e{ grid-column: 9 / span 4; margin-top: clamp(34px, 6vh, 80px); }

/* card base */
.work-card{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.work-card__media{
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 26px 90px rgba(0,0,0,0.10);
}

.work-card__media::before{
  background: radial-gradient(
    120% 80% at 50% 55%,
      rgba(0,0,0,0.35) 0%,
      rgba(0,0,0,0.68) 55%,
      rgba(0,0,0,0.90) 100%
  ) !important;
  opacity: 1 !important;
}

/* image */
.work-card__img{
  width: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1);
  transition: transform .7s cubic-bezier(0.16, 1, 0.3, 1);
}
.work-card:hover .work-card__img{ transform: scale(1.035); }

/* aspect ratios */
.work-card--a .work-card__img{ aspect-ratio: 16/9; }
.work-card--b .work-card__img{ aspect-ratio: 16/10; }
.work-card--c .work-card__img{ aspect-ratio: 16/9; }
.work-card--d .work-card__img{ aspect-ratio: 16/9; }
.work-card--e .work-card__img{ aspect-ratio: 16/10; }

/* corner */
.work-card__corner{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 6px;
  height: 6px;
  background: #ff3b2f;
  border-radius: 2px;
  opacity: 0.85;
  z-index: 3;
}

/* --- WORK overlay (FINAL, unica versione) --- */

/* overlay base + hover (leggibilità) */
.work-card__media::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(120% 80% at 50% 55%, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0.65) 100%);
  opacity: 0.65;
  transition: opacity .35s ease;
}
.work-card__media::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(120% 80% at 50% 55%, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.70) 60%, rgba(0,0,0,0.85) 100%);
  opacity: 0;
  transition: opacity .35s ease;
}

.work-card__overlay{
  position: absolute;
  inset: 0;
  z-index: 2;
  color: #fff;
  pointer-events: none;
}

/* title center */
.work-card__titleCenter{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;

  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  text-align: center;
  font-size: clamp(28px, 3.6vw, 64px);

  opacity: 1;
  transform: translateY(0);
  transition: opacity .28s ease, transform .45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* details center (solo descrizione) */
.work-card__details{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 0 26px;

  opacity: 0;
  transform: translateY(10px);
  transition: opacity .28s ease, transform .45s cubic-bezier(0.16, 1, 0.3, 1);
}

.work-card__details .work-card__name{ display: none; }
.work-card__details .work-card__desc{
  margin-top: 0;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.6;
  color: rgba(255,255,255,0.95);
  max-width: 48ch;

  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;

}

/* hover switch */
.work-card:hover .work-card__titleCenter{
  opacity: 0;
  transform: translateY(-12px);
}
.work-card:hover .work-card__details{
  opacity: 1;
  transform: translateY(0);
}
.work-card:hover .work-card__media::before{ opacity: 0; }
.work-card:hover .work-card__media::after{ opacity: 1; }

/* rimuove testo sotto immagine */
.work-card > .work-card__meta{ display: none !important; }
.work-card__tags, .work-tag{ display: none !important; }

/* CASES */
.cases{
  background: #fff;
  color: #000;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.cases__inner{
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: clamp(20px, 2.5vw, 45px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2vh, 26px);
}

.cases__header{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cases__top{ display: flex; justify-content: center; }

.cases__pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  opacity: 0.9;
}
.cases__pillDot{
  width: 7px;
  height: 7px;
  background: #ff3b2f;
  display: inline-block;
}

.cases__title{
  margin-bottom: 15px;
  text-align: center;
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 0.95;
  font-size: clamp(52px, 6.2vw, 118px);
  margin-top: -2px;
}

/* Work with us link */
.cases__sub{
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: fit-content;
  margin-inline: auto;

  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #ff3b2f;
  font-size: clamp(16px, 1.8vw, 22px);

  text-decoration: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;

  transition: gap .25s ease, color .25s ease;
}
.cases__arrow{
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .25s ease, transform .25s ease;
  color: inherit;
}
.cases__sub:hover{ color: #FFA43A; gap: 15px; }
.cases__sub:hover .cases__arrow{ opacity: 1; transform: translateX(0); }

.cases__grid{
  width: 100%;
  margin-top: clamp(10px, 2vh, 20px);
  display: grid;
  grid-template-columns: 1.05fr 1fr 1fr 1.05fr;
  gap: clamp(18px, 2.2vw, 40px);
  align-items: start;
}

/* case cards */
.case-card{ text-decoration: none; color: inherit; display: block; }
.case-card__frame{
  background: #f3f3f3;
  padding: 0px;
  border-radius: 10px;
  box-shadow: 0 15px 60px rgba(0,0,0,0.10);
  position: relative;
  overflow: hidden;

  opacity: 0;
  transform: translate3d(0, 36px, 0);
  filter: blur(6px);
  transition: opacity 650ms ease, transform 900ms cubic-bezier(0.16, 1, 0.3, 1), filter 700ms ease, box-shadow .35s ease;
  will-change: opacity, transform, filter;
}
.cases.is-revealed .case-card__frame{
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}
.cases.is-revealed .cases__grid .case-card:nth-child(1) .case-card__frame{ transition-delay: 0ms; }
.cases.is-revealed .cases__grid .case-card:nth-child(2) .case-card__frame{ transition-delay: 110ms; }
.cases.is-revealed .cases__grid .case-card:nth-child(3) .case-card__frame{ transition-delay: 220ms; }
.cases.is-revealed .cases__grid .case-card:nth-child(4) .case-card__frame{ transition-delay: 330ms; }

.case-card__img{
  width: 100%;
  height: clamp(260px, 24vw, 460px);
  object-fit: cover;
  border-radius: 4px;
  transform: scale(1);
  transition: transform .7s cubic-bezier(0.16, 1, 0.3, 1);
}

.case-card__overlay{
  position: absolute;
  inset: 18px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px;
  color: #fff;
  background: linear-gradient(180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.18) 55%, rgba(0,0,0,0.62) 100%);
}

.case-card__extra{
  margin-bottom: 40px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .35s cubic-bezier(0.16, 1, 0.3, 1);
}
.case-card__big{
  font-size: 16px;
  line-height: 1.35;
  max-width: 28ch;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

.case-card__metaBottom{
  display: flex;
  flex-direction: column;
  gap: 2px;
  transform: translateY(0);
  transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1);
}
.case-card__name{ font-weight: 700; font-size: 14px; }
.case-card__role{ font-size: 12px; opacity: 0.9; }

.case-card:hover .case-card__img{ transform: scale(1.05); }
.case-card:hover .case-card__extra{ opacity: 1; transform: translateY(0); }
.case-card:hover .case-card__metaBottom{ transform: translateY(-4px); }
.case-card:hover .case-card__frame{
  transform: translate3d(0, -8px, 0);
  box-shadow: 0 28px 90px rgba(0,0,0,0.18);
}
.case-card:hover .case-card__overlay{
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.72) 100%);
}

/* dislivello desktop */
.cases__grid .case-card:nth-child(2){ margin-top: clamp(28px, 2.8vw, 70px); }
.cases__grid .case-card:nth-child(3){ margin-top: clamp(56px, 5.2vw, 120px); }
.cases__grid .case-card:nth-child(4){ margin-top: clamp(10px, 1.2vw, 24px); }

/* CONTACT */
.contact{
  background: #000;
  color: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.contact__body{
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
}

.contact__left{
  background:
    radial-gradient(1200px 700px at 25% 30%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.00) 60%),
    #05085e;
  padding: clamp(36px, 5vw, 88px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(18px, 2.8vh, 28px);
}

.contact__label{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.9;
}
.contact__corner{
  width: 7px;
  height: 7px;
  background: #ff3b2f;
  display: inline-block;
}

.contact__title{
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 0.95;
  font-size: clamp(52px, 6.2vw, 112px);
  max-width: 14ch;
}

.contact__text{
  margin: 0;
  max-width: 66ch;
  font-size: clamp(14px, 1.2vw, 18px);
  line-height: 1.7;
  opacity: 0.78;
}

.contact__meta{
  margin-top: clamp(10px, 2vh, 22px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact__phone{
  font-size: 14px;
  color: #fff;
  text-decoration: none;
  opacity: 0.85;
}
.contact__email{
  font-size: clamp(28px, 3.1vw, 44px);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #fff;
  text-decoration: none;
}
.contact__phone:hover,
.contact__email:hover{ text-decoration: underline; }

.contact__right{
  position: relative;
  padding: clamp(26px, 3vw, 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(900px 500px at 30% 20%, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.00) 55%),
    radial-gradient(900px 600px at 80% 70%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.00) 60%),
    #0a0a0a;
}

.contact__formCard{
  width: min(640px, 100%);
  background: #e34a45;
  padding: clamp(22px, 3vw, 40px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);
  border-radius: 2px;
  transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .35s ease;
}
.contact__formCard:hover{
  transform: translate3d(0, -6px, 0);
  box-shadow: 0 38px 110px rgba(0,0,0,0.42);
}

.contact__formTitle{
  font-weight: 700;
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.35;
  margin-bottom: 22px;
}

.contact__form{
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.contact__input,
.contact__textarea{
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.45);
}

.contact__textarea{ resize: none; }

.contact__input::placeholder,
.contact__textarea::placeholder{ color: rgba(255,255,255,0.72); }

/* Contact button premium */
.contact__btn{
  margin-top: 8px;
  width: fit-content;
  padding: 14px 26px;
  border: none;

  display: inline-flex;
  align-items: center;
  gap: 12px;

  background: #111;
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;

  transition:
    background-color .25s ease,
    color .25s ease,
    gap .25s ease,
    transform .12s ease;
}

.contact__btnArrow{
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .25s ease, transform .25s ease;
}

.contact__btn:hover{
  background: #fff;
  color: #000;
  gap: 18px;
}
.contact__btn:hover .contact__btnArrow{
  opacity: 1;
  transform: translateX(0);
}
.contact__btn:active{ transform: translateY(1px); }

/* footer */
.contact__footer{
  background: #000;
  border-top: 1px solid rgba(255,255,255,0.08);
  position: relative;
}

.contact__footerInner{
  height: 64px;
  padding: 0 clamp(18px, 4vw, 60px);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: 14px;
  color: rgba(255,255,255,0.72);
  font-size: 12px;
}

.contact__footerLeft{ justify-self: start; }
.contact__footerCenter{ justify-self: center; text-align: center; opacity: 0.8; }
.contact__footerRight{ justify-self: end; display: inline-flex; gap: 10px; align-items: center; }

.contact__footerLink{ color: rgba(255,255,255,0.78); text-decoration: none; }
.contact__footerLink:hover{ text-decoration: underline; }
.contact__footerSep{ opacity: 0.5; }

/* INTRO — LETTERS + CURTAIN */
.intro-loader{
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: var(--intro-bg);
  display: grid;
  place-items: center;
  transform: translate3d(0,0,0);
  will-change: transform;
}

.site{ will-change: transform; }

body.is-loading .site{
  transform: translate3d(0, 100vh, 0);
}

body.is-loading .nav,
body.intro-out .nav{
  position: absolute !important;
  top: 0; left: 0; right: 0;
}

.intro-loader__logo{
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: clamp(22px, 3.2vw, 44px);
  line-height: 1;
  color: #fff;
  display: inline-flex;
  gap: 0.06em;
  user-select: none;
}

.intro-loader__logo .char{
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  filter: blur(10px);

  animation: introChar 1600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--i) * var(--intro-stagger));
  will-change: transform, opacity, filter;
}

@keyframes introChar{
  0%{ opacity: 0; transform: translate3d(0, 28px, 0); filter: blur(10px); }
  35%{ opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
  65%{ opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
  100%{ opacity: 0; transform: translate3d(0, -26px, 0); filter: blur(8px); }
}

body.intro-out .intro-loader{
  transform: translate3d(0, -100vh, 0);
  transition: transform var(--curtain-ms) cubic-bezier(0.16, 1, 0.3, 1);
}
body.intro-out .site{
  transform: translate3d(0, 0, 0);
  transition: transform var(--curtain-ms) cubic-bezier(0.16, 1, 0.3, 1);
}

body.is-loaded .intro-loader{
  pointer-events: none;
  visibility: hidden;
}
body.is-loaded .nav{ position: fixed !important; }

/* PRIVACY PAGE — NAV fixed black */
@media (max-width: 900px){
  :root{
    --nav-h: 60px;
  }

  /* snap OFF su mobile (evita crop/jump) */
  .scroll-container{ scroll-snap-type: none !important; }

  .section{
    height: auto !important;
    min-height: 100dvh;
    scroll-snap-align: none !important;
  }

  /* HERO must stay full height */
  .section.hero{
    height: 100dvh !important;
    min-height: 100dvh !important;
  }
  .hero__content{
    min-height: 100dvh;
    justify-content: flex-end;
  }

  .nav__inner{
    padding: 14px 16px;
    gap: 8px;
    justify-content: flex-start !important;
  }

  /* show only logo */
  .nav__inner .nav__link{ display: none !important; }

  .nav__inner .nav__logo{
    display: inline-block !important;
    opacity: 1 !important;
    color: #fff !important;
    pointer-events: auto !important;
    font-size: 16px;
  }

  /* ✅ richiesta: quando scrolli => logo trasparente e non cliccabile */
  .nav.is-scrolled .nav__logo{
    opacity: 0 !important;
    color: transparent !important;
    pointer-events: none !important;
  }
  /* su mobile non bloccare tutta la navbar */
  .nav.is-scrolled .nav__inner{ pointer-events: auto !important; }

  /* HERO */
  .hero__video{ display: none; }
  .hero{ background: url("/assets/hero-bg.jpg") center / cover no-repeat; }

  .hero__title{
    font-size: clamp(38px, 9vw, 64px);
    max-width: 16ch;
  }

  /* ABOUT mobile (no crop) */
  .about{ align-items: flex-start; }
  .about__title{ text-align: left; padding-top: 90px; }
  .about__grid{ grid-template-columns: 1fr; }
  .about__lead{
    white-space: normal;
    font-size: clamp(28px, 7vw, 40px);
  }

  /* ticker: dentro flow, con spazio sotto */
  .about__inner{ padding-bottom: 120px !important; }

  .about__ticker{
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;

    width: 100% !important;
    margin-top: 28px !important;

    height: clamp(120px, 28vw, 190px) !important;
    overflow: visible !important;
    padding-inline: 0 !important;
  }

  .about__bigText{
    font-size: clamp(56px, 18vw, 120px) !important;
    line-height: 0.9 !important;
    transform: translate3d(-50%, 0, 0) !important;
  }

  /* WORK mobile */
  .work__headerCover{
    position: relative !important; /* come tua patch finale */
    top: auto !important;
  }

  .work__top{ justify-content:flex-start; }
  .work__title{ text-align:left; }

  .work__grid{
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 28px !important;
    padding-bottom: 40px !important;
  }

  .work-card--a,
  .work-card--b,
  .work-card--c,
  .work-card--d,
  .work-card--e{
    grid-column:auto;
    margin-top:0;
  }

  /* WORK overlay: su mobile sempre descrizione (no hover) */
  .work-card__titleCenter{ display: none; }
  .work-card__details{
    opacity: 1;
    transform: none;
  }
  .work-card__media::before{ opacity: 0.85; }
  .work-card__media::after{ opacity: 0; }

  /* CASES mobile stack */
  .cases{
    align-items: flex-start;
    overflow: visible;
  }
  .cases__inner{
    padding-top: 90px;
    padding-bottom: 70px;
    gap: 18px;
  }
  .cases__grid{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    margin-top: 18px !important;
    width: min(520px, 100%);
  }
  .cases__grid .case-card:nth-child(2),
  .cases__grid .case-card:nth-child(3),
  .cases__grid .case-card:nth-child(4){
    margin-top: 0 !important;
  }
  .case-card__img{ height: 240px !important; border-radius: 10px; }
  .case-card__overlay{ inset: 14px !important; padding: 18px !important;   background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.72) 100%); }
  .case-card__extra{
    opacity: 1 !important;
    transform: none !important;
    margin-bottom: 22px !important;
  }
  .case-card__big{
    font-size: 14px;
    max-width: 40ch;
    text-align: left;
    hyphens: auto;
  }

  /* CONTACT mobile not cut */
  .section.contact{
    height: auto !important;
    min-height: 100dvh;
    scroll-snap-align: none !important;
  }
  .contact{ overflow: visible !important; }
  .contact__body{ grid-template-columns: 1fr !important; min-height: auto !important; }
  .contact__left{ justify-content: flex-start; padding-top: 90px; }
  .contact__right{ padding-bottom: 40px; }
  .contact__footer{ position: relative !important; }

  .contact__footerInner{
    grid-template-columns: 1fr;
    height: auto;
    padding: 18px;
    row-gap: 10px;
  }
  .contact__footerLeft,
  .contact__footerCenter,
  .contact__footerRight{
    justify-self: start;
    text-align: left;
  }

}

/* tablet: cases 2col optional */
@media (min-width: 901px) and (max-width: 1100px){
  .cases__grid{ grid-template-columns: 1fr 1fr !important; }
  .cases__grid .case-card:nth-child(2),
  .cases__grid .case-card:nth-child(3),
  .cases__grid .case-card:nth-child(4){
    margin-top: 0 !important;
  }
  .case-card__img{ height: 300px !important; }
}

/* ABOUT — MOBILE: top centered + big text bottom */
@media (max-width: 900px){

  /* About torna full-height (solo questa sezione) */
  .section.about{
    height: 100dvh !important;
    min-height: 100dvh !important;
    scroll-snap-align: none !important;
  }

  /* centra verticalmente il contenuto */
  .about{
    align-items: center !important;
  }

  .about__inner{
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;

    /* spazio reale per il ticker in basso (anti-crop) */
    padding-top: 84px !important; /* un filo sotto la nav */
    padding-bottom: clamp(150px, 30vw, 240px) !important;
  }

  /* titolo non più "spinto" in alto */
  .about__title{
    padding-top: 0 !important;
    text-align: center !important;
  }

  /* blocco testo centrato orizzontalmente (testo resta leggibile) */
  .about__grid{
    grid-template-columns: 1fr !important;
    width: min(560px, 100%) !important;
    margin: 22px auto 0 !important;
    gap: 26px !important;
  }

  /* ticker inchiodato in basso */
  .about__ticker{
    position: absolute !important;
    left: 50% !important;
    bottom: 24px !important;
    transform: translateX(-50%) !important;

    width: 100% !important;
    padding-inline: 16px !important;
    height: clamp(92px, 22vw, 150px) !important;
    overflow: visible !important;
  }

  .about__bigText{
    bottom: 0 !important;
    font-size: clamp(56px, 18vw, 120px) !important;
    line-height: 0.9 !important;
    transform: translate3d(-50%, 0, 0) !important;
  }
}

/* WORK — MOBILE HORIZONTAL RAIL (vertical scroll -> horizontal) */

.work-rail{
  display: none; /* desktop off */
}

/* --- mobile only --- */
@media (max-width: 900px){

  /* mostra rail e nascondi grid */
  .work__grid{ display: none !important; }
  .work-rail{ display: block !important; }

  /* la sezione work torna “normale” su mobile */
  .section.work{
    height: auto !important;
    min-height: 100dvh !important;
    padding-bottom: 0 !important;
  }

  /* header: resta sopra, centrato */
  .work__headerCover{
    position: relative !important;
    top: auto !important;
    text-align: left;
    margin-bottom: 18px;
  }

  /* questa sarà la "zona" che blocca e muove orizzontale (poi JS) */
  .work-rail{
    position: relative;
    width: 100%;
    /* altezza della zona: 1 card per volta + respiro */
    --rail-card-h: 240px;
    --rail-gap: 18px;
    --rail-pad: 16px;
  }

  .work-rail__sticky{
    position: sticky;
    top: calc(76px + 14px);
    height: calc(var(--rail-card-h) + 2 * var(--rail-pad));
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: var(--rail-pad);
    box-sizing: border-box;
  }

  /* track orizzontale */
  .work-rail__track{
    display: flex;
    gap: var(--rail-gap);
    will-change: transform;
    transform: translate3d(0,0,0);
  }

  /* card: grande come cases su mobile */
  .work-railCard{
    flex: 0 0 auto;
    width: min(520px, calc(100vw - 2 * var(--rail-pad)));
    text-decoration: none;
    color: inherit;
  }

  .work-railCard__media{
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: #f3f3f3;
    box-shadow: 0 15px 60px rgba(0,0,0,0.10);
  }

  .work-railCard__media img{
    width: 100%;
    height: var(--rail-card-h);
    object-fit: cover;
    transform: scale(1);
    transition: transform .7s cubic-bezier(0.16, 1, 0.3, 1);
    display: block;
  }

  .work-railCard__corner{
    position: absolute;
    top: 12px;
    right: 12px;
    width: 6px;
    height: 6px;
    background: #ff3b2f;
    border-radius: 2px;
    opacity: 0.9;
    z-index: 3;
  }

  /* overlay tipo cases (leggibile) */
  .work-railCard__overlay{
    position: absolute;
    inset: 14px;
    border-radius: 6px;
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    color: #fff;
    z-index: 2;

    background: radial-gradient(
        120% 90% at 50% 55%,
        rgba(0,0,0,0.28) 0%,
        rgba(0,0,0,0.62) 60%,
        rgba(0,0,0,0.82) 100%
      );

    opacity: 1;
  }

  .work-railCard__overlay p{
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    max-width: 42ch;
    color: rgba(255,255,255,0.92);
  }

  /* micro-hover (touch non cambia, ma ok per tablet) */
  .work-railCard:hover .work-railCard__media img{
    transform: scale(1.03);
  }
}

/* desktop: rail off */
@media (min-width: 901px){
  .work-rail{ display: none !important; }
}

/* FIX WORK MOBILE — card più grande, testo NO blur/NO motion */
@media (max-width: 900px){
  /* card leggermente più alta (non too much) */
  .work-rail{
    --rail-card-h: 300px;  /* prima 240: ora più "hero", ma non enorme */
    --rail-gap: 16px;
    --rail-pad: 16px;
  }

  /* card width: quasi tutta, ma lascia respiro */
  .work-railCard{
    width: calc(100vw - (2 * var(--rail-pad)) - 8px);
    max-width: 560px;  /* evita che diventi gigante su tablet */
  }

  /* overlay: testo nitido (NO blur) */
  .work-railCard__overlay,
  .work-railCard__overlay *{
    filter: none !important;
    transform: none !important;
  }

  /* evita qualsiasi animazione “di movimento” sul testo */
  .work-railCard__overlay{
    transition: none !important;
  }
  .work-railCard__overlay p{
    transition: none !important;
  }

  /* (opzionale) un filo più leggibile */
  .work-railCard__overlay{
    inset: 14px;
    padding: 18px;
  }
  .work-railCard__overlay p{
    font-size: 14px;
    line-height: 1.55;
    max-width: 40ch;
  }
}

/* GLOBAL FIX — no horizontal scroll */
html, body{
  width: 100%;
  overflow-x: hidden;
}

.site,
.scroll-container{
  overflow-x: hidden;
}

/* evita che 100vw crei overflow (iOS/Chrome con scrollbar) */
.section{
  width: 100%;
}

/* se qualche overlay/track sfora, taglialo */
.work-rail__sticky,
.work-rail__track{
  overflow: hidden;
}

/* CASES — MOBILE FALLBACK (no white screen) */
@media (max-width: 900px){
  .cases .case-card__frame{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* WORK — MOBILE FIX (see all cards, centered, taller) */
@media (max-width: 900px){

  /* elimina qualsiasi “scroll orizzontale fantasma” */
  html, body{
    overflow-x: hidden !important;
  }
  .scroll-container{
    overflow-x: hidden !important;
  }
  .section{
    overflow-x: clip !important;
  }

  /* WORK: layout semplice e stabile su mobile */
  .section.work{
    height: auto !important;
    min-height: auto !important;
    padding-bottom: 48px !important;
    overflow: visible !important;
  }

  /* Header centrato */
  .work__headerCover{
    position: relative !important;
    top: auto !important;
    z-index: 1 !important;
    text-align: center !important;
  }
  .work__top{
    justify-content: center !important;
  }
  .work__title{
    text-align: center !important;
  }
  .work__all{
    justify-content: center !important;
  }

  /* Le card: una sotto l’altra, tutte visibili, centrate */
  .work__grid{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    width: 100% !important;
    max-width: none !important;

    margin: 26px auto 0 !important;   /* vicino al titolo */
    padding: 0 16px 40px !important;  /* padding laterale */
    gap: 18px !important;

    /* IMPORTANTISSIMO: niente clip/tagli */
    overflow: visible !important;
  }

  .work-card{
    width: min(560px, 92vw) !important;  /* centrata e bella “grossa” */
    margin: 0 auto !important;
  }

  /* Card più alta: aumenta altezza percepita immagine */
  .work-card__img{
    width: 100% !important;
    height: 280px !important;          /* ✅ più alta (puoi portare a 300/320) */
    object-fit: cover !important;
    aspect-ratio: auto !important;     /* evita conflitti con aspect-ratio desktop */
  }

  /* Overlay: non “blurrarlo” e non muoverlo su mobile */
  .work-card__titleCenter{
    display: none !important;          /* se vuoi solo descrizione su mobile */
  }
  .work-card__details{
    opacity: 1 !important;
    transform: none !important;
  }

  /* overlay leggibile e centrato */
  .work-card__details .work-card__desc{
    max-width: 34ch !important;
    text-align: justify !important;
    margin: 0 auto !important;
    
  }
}

/* WORK — MOBILE (STACK) FINAL */
@media (max-width: 900px){

  /* NO horizontal page scroll */
  html, body{ overflow-x: hidden !important; }
  .scroll-container{ overflow-x: hidden !important; }
  .site{ overflow-x: hidden !important; }

  /* WORK section normal flow */
  .section.work{
    height: auto !important;
    min-height: auto !important;
    padding-bottom: 56px !important;
    overflow: visible !important;
  }

  /* header centrato */
  .work__headerCover{
    position: relative !important;
    top: auto !important;
    text-align: center !important;
    margin-bottom: 18px !important;
  }
  .work__top{ justify-content: center !important; }
  .work__title{ text-align: center !important; }
  .work__all{ justify-content: center !important; }

  /* grid -> stack verticale */
  .work__grid{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 auto !important;
    padding: 0 16px 0 !important;
    gap: 18px !important;

    overflow: visible !important;
  }

  .work-card{
    width: min(560px, 92vw) !important;
    margin: 0 auto !important;
  }

  /* ✅ più alta */
  .work-card__img{
    height: 320px !important;        /* <- più alta; se vuoi meno: 300 */
    width: 100% !important;
    object-fit: cover !important;
    aspect-ratio: auto !important;
  }

  /* ✅ testo SEMPRE visibile e NITIDO (no hover mobile) */
  .work-card__titleCenter{ display: none !important; }
  .work-card__details{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .work-card__details,
  .work-card__details *{
    filter: none !important;
    transform: none !important;
  }

  /* overlay centrato e leggibile */
  .work-card__details .work-card__desc{
    max-width: 36ch !important;
    text-align: justify !important;
    margin: 0 auto !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  /* evita che pseudo-overlay creino glitch */
  .work-card__media::before,
  .work-card__media::after{
    transition: none !important;
  }
}

@media (max-width: 900px){
  .cases{ overflow: visible !important; }
  .cases .case-card__frame{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* MOBILE (<= 900px) — WORK = CASES (stack verticale, no rail) */
@media (max-width: 900px){

  /* 0) sicurezza: niente overflow orizzontale */
  html, body, .site, .scroll-container{
    overflow-x: hidden !important;
  }

  /* 1) spegni il rail (se esiste in pagina) */
  .work-rail,
  .work-rail__sticky,
  .work-rail__track{
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* 2) WORK section: flow normale come CASES */
  .section.work{
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    padding-bottom: 70px !important; /* come cases__inner */
  }

  /* 3) header: comportamento stabile (niente sticky) */
  .work__headerCover{
    position: relative !important;
    top: auto !important;
    margin-bottom: 18px !important;
    pointer-events: none !important; /* lascia cliccabile solo .work__all */
  }
  .work__all{ pointer-events: auto !important; }

  /* 4) GRID -> STACK come CASES (width min(520px, 100%)) */
  .work__grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;                 /* come cases mobile */
    width: min(520px, 100%) !important;   /* identico feeling cases */
    margin: 18px auto 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .work-card{
    width: 100% !important;
    margin: 0 !important;
  }

  /* 5) immagine: stessa altezza delle case cards */
  .work-card__img{
    width: 100% !important;
    height: 240px !important;        /* CASES: .case-card__img { height: 240px } */
    object-fit: cover !important;
    aspect-ratio: auto !important;   /* disinnesca aspect-ratio desktop */
  }

  /* 6) overlay: “come cases” -> sempre visibile, zero hover/motion */
  .work-card__titleCenter{ display: none !important; }

  .work-card__details{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .work-card__details,
  .work-card__details *{
    filter: none !important;
    transform: none !important;
  }

  /* overlay gradient stabile (niente hover switch) */
  .work-card__media::before{
    opacity: 0.85 !important;
    transition: none !important;
  }
  .work-card__media::after{
    opacity: 0 !important;
    transition: none !important;
  }

  /* testo: stile simile a cases (leggibile, left) */
  .work-card__details .work-card__desc{
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    max-width: 40ch !important;
    text-align: left !important;
    hyphens: auto !important;

    text-align: justify;
  text-justify: inter-word;
  hyphens: auto;

  }

  /* 7) opzionale: disinnesca hover desktop su mobile */
  .work-card:hover .work-card__img{ transform: none !important; }
  .work-card:hover .work-card__media::before{ opacity: 0.85 !important; }
  .work-card:hover .work-card__media::after{ opacity: 0 !important; }
  .work-card:hover .work-card__details{
    opacity: 1 !important;
    transform: none !important;
  }
}

/* MOBILE — show only 2 WORK cards */
@media (max-width: 900px) {
  .work__grid .work-card {
    display: none;
  }

  .work__grid .work-card:nth-child(-n + 2) {
    display: block;
  }
}

/* ABOUT ticker — MOBILE FIX (no crop) */
@media (max-width: 900px){

  /* evita tagli se qualche parent clippera */
  .section.about { overflow: visible !important; }

  /* ticker più alto + safe area */
  .about__ticker{
    height: clamp(110px, 26vw, 160px) !important;
    overflow: visible !important;
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }

  /* cap font-size più piccolo (il tuo testo è lungo) */
  .about__bigText{
    font-size: clamp(34px, 10.5vw, 74px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 900px){
  /* 1) la hero non deve partire “sotto” la navbar */
  .scroll-container{
    padding-top: 0 !important;
    scroll-padding-top: var(--nav-h); /* mantiene corretti gli scroll agli anchor */
  }

  /* 2) spazio interno per non sovrapporre il testo alla navbar */
  .hero__content{
    padding-top: calc(var(--nav-h) + 24px) !important;
  }
}

@media (max-width: 900px){
  .hero__title{
    max-width: 15ch;
  }
}

@media (max-width: 900px){

  /* 1) togli la frase centrale */
  .contact__footerCenter{
    display: none !important;
  }

  /* 2) tutto su UNA riga: sinistra + destra */
  .contact__footerInner{
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    height: 64px !important;
    padding: 0 16px !important;
    gap: 10px !important;
  }

  .contact__footerLeft{
    justify-self: start !important;
    white-space: nowrap;
  }

  .contact__footerRight{
    justify-self: end !important;
    white-space: nowrap;
    gap: 8px !important;
  }

  /* (opzionale) se su schermi molto piccoli non ci sta ancora */
  .contact__footerInner{
    font-size: 11px !important;
  }
}

@media (max-width: 900px){

  /* mostra il titolo del progetto */
  .work-card__details .work-card__name{
    display: block !important;
    font-weight: 800;
    font-size: 18px;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
  }

  /* la descrizione resta sotto */
  .work-card__details .work-card__desc{
    font-size: 15px;
    line-height: 1.6;
  }
}

/* MOBILE BURGER MENU (works with your HTML) */

/* --- Burger button (hidden on desktop) --- */
.nav__burger{
  display: none;
  align-items: center;
  gap: 14px;

  background: transparent;
  border: 0;
  padding: 10px 12px;

  cursor: pointer;
  color: rgba(255,255,255,0.92);
}

/* "MENU" text */
.nav__burgerText{
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 900;
}

/* Icon (2 lines -> X) */
.nav__burgerIcon{
  width: 34px;
  height: 12px;
  position: relative;
  display: inline-block;
}
.nav__burgerIcon::before,
.nav__burgerIcon::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: #fff;
  transform-origin: center;
  transition: transform .22s ease, top .22s ease, opacity .18s ease;
}
.nav__burgerIcon::before{ top: 0; }
.nav__burgerIcon::after{ top: 10px; }

/* --- Mobile menu overlay (closed by default) --- */
.mobile-menu{
  position: fixed;
  inset: 0;
  z-index: 999999; /* above everything */
  background: rgba(0,0,0,0.28);

  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}

/* The full red panel */
.mobile-menu__panel{
  position: absolute;
  inset: 0;
  background: #ff3b2f; /* your accent red */
  color: #fff;

  /* subtle enter */
  opacity: 0;
  transform: translateY(-10px);
  transition: transform .28s ease, opacity .28s ease;

  /* padding below fixed nav */
  padding: calc(var(--nav-h) + 26px) 18px 22px;

  display: flex;
  flex-direction: column;
  justify-content: center; /* links centered vertically */
}

/* Right-aligned big links like screenshot */
.mobile-menu__nav{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 18px;
  padding-right: 6px;
}

.mobile-menu__link{
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: clamp(34px, 8vw, 56px);
  line-height: 1.05;
}
.mobile-menu__link:active{ opacity: 0.92; }

/* --- OPEN STATE (body.menu-open) --- */
body.menu-open .mobile-menu{
  opacity: 1;
  pointer-events: auto;
}
body.menu-open .mobile-menu__panel{
  opacity: 1;
  transform: translateY(0);
}

/* Burger -> X when open */
body.menu-open .nav__burgerIcon::before{
  top: 5px;
  transform: rotate(45deg);
}
body.menu-open .nav__burgerIcon::after{
  top: 5px;
  transform: rotate(-45deg);
}

/* Prevent background scroll while menu is open */
body.menu-open{
  overflow: hidden;
}

/* --- Mobile only behavior --- */
@media (max-width: 900px){

  /* show burger */
  .nav__burger{ display: inline-flex; margin-left: auto; }

  /* hide desktop nav links (keep logo) */
  .nav__link--desktop{ display: none !important; }

  /* IMPORTANT: your global .nav.is-scrolled hides items
     -> keep burger clickable/visible on mobile */
  .nav.is-scrolled .nav__burger{
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}
/* When menu is open, keep nav (and burger X) above the overlay */
body.menu-open .nav{
  z-index: 1000001; /* higher than .mobile-menu (999999) */
}
/* MOBILE MENU — close animation support */

/* quando stai chiudendo, lasciamo l'overlay cliccabile ma in fade-out */
body.is-menu-closing .mobile-menu{
  opacity: 0;
  pointer-events: none;
}

/* pannello: esce leggermente verso l'alto */
body.is-menu-closing .mobile-menu__panel{
  opacity: 0;
  transform: translateY(-10px);
}
/* CLOSE animation: must override menu-open */
body.menu-open.is-menu-closing .mobile-menu{
  opacity: 0;
  pointer-events: none;
}

body.menu-open.is-menu-closing .mobile-menu__panel{
  opacity: 0;
  transform: translateY(-10px);
}
/* MOBILE MENU — GLOBAL HARD FIX (ALL PAGES) */
@media (max-width: 900px){

  /* Nav always above any overlay */
  header.nav,
  .nav{
    position: fixed !important;
    top: 0; left: 0; right: 0;
    z-index: 2147483647 !important;
  }

  /* Ensure inner doesn't get "killed" by other rules */
  .nav__inner{
    pointer-events: auto !important;
  }

  /* Burger always visible and clickable */
  .nav__burger{
    position: relative !important;
    z-index: 2147483647 !important;
    pointer-events: auto !important;
    opacity: 1 !important;
  }

  /* Overlay under the navbar */
  .mobile-menu{
    z-index: 2147483646 !important;
  }

  /* Panel must not sit under the nav area */
  .mobile-menu__panel{
    padding-top: calc(var(--nav-h) + 26px + env(safe-area-inset-top)) !important;
  }

  /* While closing, keep it on-screen but allow the burger above */
  body.is-menu-closing .mobile-menu{
    pointer-events: auto;
  }
}
/* MOBILE MENU — make panel FIXED too */
.mobile-menu__panel{
  position: fixed !important;   /* era absolute */
  inset: 0 !important;          /* top/right/bottom/left */
  height: 100dvh !important;    /* mobile dynamic viewport */
  width: 100%;
  overflow: auto;               /* se i link non ci stanno */
  -webkit-overflow-scrolling: touch;
}
/* MOBILE — burger hides on scroll (like desktop) */
@media (max-width: 900px){

  /* quando nav è scrolled: burger trasparente e NON cliccabile */
  .nav.is-scrolled .nav__burger{
    opacity: 0 !important;
    pointer-events: none !important;
    color: transparent !important;
  }

  /* nascondi anche le linee dell’icona */
  .nav.is-scrolled .nav__burgerIcon::before,
  .nav.is-scrolled .nav__burgerIcon::after{
    opacity: 0 !important;
  }
}