/* =========================
   FONT (WOFF2/WOFF)
========================= */
@font-face{
  font-family:"MontserratCustom";
  src:url("../assets/fonts/Montserrat-SemiBold.woff2") format("woff2"),
      url("../assets/fonts/Montserrat-SemiBold.woff") format("woff");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"MontserratCustom";
  src:url("../assets/fonts/Montserrat-ExtraLight.woff2") format("woff2"),
      url("../assets/fonts/Montserrat-ExtraLight.woff") format("woff");
  font-weight:200;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"MontserratCustom";
  src:url("../assets/fonts/Montserrat-Medium.woff2") format("woff2"),
      url("../assets/fonts/Montserrat-Medium.woff") format("woff");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* =========================
   ROOT + RESET
========================= */
:root{
  --nav-h: 80px;
  --px: clamp(18px, 4vw, 60px);

  --h1: clamp(34px, 6vw, 40px);
  --home-label: clamp(23px, 3.9vw,35px);
  --home-label: clamp(28px, 4.5vw, 45px);
  --intro-text: clamp(20px, 2.5vw, 28px);
  --contact-btn: clamp(16px, 2vw, 22px);

  --active-bg: 0, 0, 0; /* default nero */
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scrollbar-gutter: stable; }
body{
  font-family:"MontserratCustom", Helvetica, Arial, sans-serif;
  color:#111;
  overflow-x:hidden;
}

/* blur scope */
.mb{ will-change: filter; transform: translateZ(0); }

/* =========================
   NAVBAR
========================= */
.navbar{
  position:fixed;
  top:0;
  width:100%;
  height:var(--nav-h);

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

  padding:0 var(--px);
  background:rgba(0,0,0,0);
  transition:background 320ms cubic-bezier(.16, 1, .3, 1);
  z-index:100;
}

.logo{
  height:64px;
  width:auto;
  max-width:260px;
  display:block;
}

.nav-right{
  display:flex;
  align-items:center;
  gap:18px;
}

.nav-servizi{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height:40px;
  line-height:40px;
  padding:0 20px;

  background:#fff;
  color:#000;
  text-decoration:none;

  font-weight:600;
  font-size:20px;
  letter-spacing:1px;
  text-transform:uppercase;

  clip-path:polygon(0 0, 100% 0, 92% 100%, 0 100%);
  box-shadow:0px 2px 10px rgba(0,0,0,0.25);

  transition:background 220ms ease, color 220ms ease;
}
.nav-servizi:hover{ background:#000; color:#fff; }

/* logo hover zoom */
.nav-left a{
  display:inline-flex;
  align-items:center;
}
.nav-left .logo{
  transition:transform 220ms cubic-bezier(.16,1,.3,1);
  transform:scale(1);
  transform-origin:left center;
}
.nav-left a:hover .logo{ transform:scale(1.08); }

/* hamburger -> X */
.menu-btn{
  width:44px;
  height:40px;

  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  gap:7px;

  background:transparent;
  border:none;
  cursor:pointer;
  padding:0;
  touch-action:manipulation;
}
.menu-btn span{
  display:block;
  height:3px;
  width:28px;
  background:#fff;
  border-radius:2px;
  box-shadow:0px 2px 8px rgba(0,0,0,0.55);

  transition:transform 260ms cubic-bezier(.16,1,.3,1), opacity 200ms ease;
  transform-origin:center;
}
.menu-btn.open span:nth-child(1){ transform:translateY(10px) rotate(45deg); }
.menu-btn.open span:nth-child(2){ opacity:0; }
.menu-btn.open span:nth-child(3){ transform:translateY(-10px) rotate(-45deg); }

/* =========================
   NAVBAR SOCIAL ICONS
========================= */
.nav-social{
  display:flex;
  align-items:center;
  gap:30px;
  margin-right: 40px;
}
.nav-social a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  opacity:0.85;
  transition:transform 180ms ease, opacity 180ms ease;
  min-height:44px;
  min-width:44px;
  padding:10px;
}
.nav-social img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.nav-social a:hover{
  opacity:1;
  transform:scale(1.12);
}

/* Mobile navbar adjustments */
@media (max-width:768px){
  .nav-social{
    gap:20px;
    margin-right:14px;
  }
  .nav-social a img{ height:18px; width:18px; }
}

@media (max-width:480px){
  .nav-social a img{ height:16px; width:16px; }
}

/* =========================
   SEZIONI
========================= */
.section{
  min-height:100svh;
  padding-top:var(--nav-h);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.section h1{
  margin-bottom:30px;
  font-size:var(--h1);
}

/* =========================
   HERO VIDEO
========================= */
.hero{
  position:relative;
  height:100svh;
  width:100%;
  overflow:hidden;
  padding-top:0;
  background:#000;
}
.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
  transform:scale(1.30);
}
.hero::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:220px;
  z-index:6;
  pointer-events:none;
  background-image:linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.406) 45%,
    rgb(0, 0, 0) 100%
  );
}
.home-overlay{
  position:absolute;
  inset:0;
  display:flex;
  z-index:10;
}
.home-half{
  width:50%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;

  text-decoration:none;
  position:relative;
  cursor:pointer;

  background:rgba(0,0,0,0.18);
  transition:background 260ms ease;
}
.home-half:hover{ background:rgba(0, 0, 0, 0.38); }

.home-label{
  font-size:var(--home-label);
  font-weight:600;
  letter-spacing:1px;
  text-align:center;
  color:rgba(255,255,255,0.92);
  line-height:1.1;
  text-transform:uppercase;

  transform:scale(1);
  transition:
    transform 520ms cubic-bezier(.16, 1, .3, 1),
    letter-spacing 520ms cubic-bezier(.16, 1, .3, 1),
    color 520ms cubic-bezier(.16, 1, .3, 1);

  text-shadow:0px 2px 10px rgba(0,0,0,0.55);
}
.home-half:hover .home-label{
  transform:scale(1.08);
  letter-spacing:1.8px;
  color:rgba(255,255,255,1);
}

/* =========================
   INTRO (75vh)
========================= */
.intro-text{
  height:75vh;
  width:100%;
  background-color:rgb(var(--active-bg));
  transition:background-color 420ms ease;
  color:#fff;

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

  padding:190px 60px 60px;
}
.intro-wrap{ max-width:1280px; }
.intro-p{
  font-size:var(--intro-text);
  font-weight:400;
  line-height:1.25;
  letter-spacing:0.2px;
  color:rgba(255,255,255,0.92);
}
.intro-bold{ font-weight:800; color:rgba(255,255,255,1); }
.intro-second{ margin-top:100px; }

/* =========================
   CARD BASE
========================= */
.card-inner{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
}
.card-media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
}

/* layer placeholder brand (una sola volta) */
.brand-media{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01)),
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.06), transparent 55%);
}

/* =========================
   PRODUZIONI
========================= */
.prod-section{
  min-height:100vh;
  width:100%;
  background-color:rgb(var(--active-bg));
  transition:background-color 420ms ease;
  padding:55px var(--px) 60px;
}
.prod-wrap{
  max-width:1600px;
  margin:0 auto;
  position:relative;
}
.prod-title{
  position:absolute;
  left:0;
  top:0px;
  color:rgba(255,255,255,0.95);
  font-size:clamp(60px, 4.5vw, 74px);
  letter-spacing:1px;
  text-transform:uppercase;
  line-height:1;
  margin:0;
  pointer-events:none;
}
.prod-grid{
  margin-top:10px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  grid-auto-rows:95px;
  gap:18px;
}
@media (min-width:1440px){
  .prod-grid{ gap:22px; grid-auto-rows:220px; }
}

.prod-card{
  position:relative;
  display:block;
  text-decoration:none;
  overflow:visible;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01)),
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.06), transparent 55%);
}

.prod-tag{
  position:absolute;
  top:10px;
  left:10px;
  padding:4px 10px;
  font-size:11px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:rgba(255,255,255,0.95);
  background:rgba(0,0,0,0.55);
  border:1px solid rgba(255,255,255,0.15);
  clip-path:polygon(0 0, 100% 0, 92% 100%, 0 100%);
  z-index:2;
  font-weight:600;
}

.prod-label{
  position:absolute;
  left:14px;
  bottom:12px;
  font-size:15px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:rgba(255,255,255,0.95);
  text-shadow:0px 2px 10px rgba(0,0,0,0.55);
  z-index:2;
  font-weight:600;
}

/* posizionamento */
.prod-card.tall{ grid-column:1; grid-row:1 / span 2; margin-top:80px; }
.prod-card.small{ grid-column:1; grid-row:3 / span 1; }
.prod-card.wide{ grid-column:2; grid-row:1 / span 2; margin-bottom:160px; }
.prod-card.mid{ grid-column:2; grid-row:2 / span 2; margin-top:80px; }
.prod-card.right-top{ grid-column:3; grid-row:1 / span 2; }
.prod-card.right-big{ grid-column:3; grid-row:3 / span 1; }

/* =========================
   BRAND (HOME)
========================= */
.brand-section{
  min-height:80vh;
  width:100%;
  background-color:rgb(var(--active-bg));
  transition:background-color 420ms ease;
  padding:110px var(--px) 60px;
}
.brand-wrap{
  max-width:1600px;
  margin:0 auto;
}
.brand-title{
  position:static !important;
  margin:0 0 24px 0 !important;
  color:rgba(255,255,255,0.95);
  font-size:clamp(42px, 5vw, 68px);
  letter-spacing:1px;
  text-transform:uppercase;
  line-height:1;
}
.brand-row{
  display:grid;
  grid-template-columns:1fr 1.25fr 1fr;
  gap:18px;
  align-items:stretch;
  margin-top:0 !important;
}
.brand-center{
  display:grid;
  grid-template-rows:1fr auto;
  gap:14px;
}
.brand-card{
  position:relative;
  display:block;
  text-decoration:none;
  overflow:visible;
}
.brand-card .card-inner{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
}
.brand-card.left,
.brand-card.right{ min-height:420px; }
.brand-card.center-top{ min-height:220px; }
.brand-card.center-text{ min-height:130px; }

.brand-tag{
  position:absolute;
  top:10px;
  left:10px;
  padding:4px 10px;

  font-size:11px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:rgba(255,255,255,0.95);

  background:rgba(0,0,0,0.55);
  border:1px solid rgba(255,255,255,0.15);
  clip-path:polygon(0 0, 100% 0, 92% 100%, 0 100%);
  z-index:2;
  font-weight:600;
}
.brand-bottom{
  position:absolute;
  left:14px;
  bottom:12px;

  font-size:15px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:rgba(255,255,255,0.95);
  text-shadow:0px 2px 10px rgba(0,0,0,0.55);
  z-index:2;
  font-weight:600;
}
@media (max-width:1024px){
  .brand-row{ grid-template-columns:1fr; }
  .brand-center{ grid-template-rows:auto auto; }
  .brand-card.left, .brand-card.right{ min-height:320px; }
}

/* =========================
   POP + REVEAL (prod + brand)
========================= */
@keyframes cardPopIn{
  0%{ transform:translate3d(0,0,0) scale(1); }
  60%{ transform:translate3d(0,-12px,0) scale(1.045); }
  100%{ transform:translate3d(0,-10px,0) scale(1.03); }
}
@keyframes cardPopOut{
  0%{ transform:translate3d(0,-10px,0) scale(1.03); }
  100%{ transform:translate3d(0,0,0) scale(1); }
}
.prod-card,
.brand-card{
  transform:translate3d(0,0,0) scale(1);
  will-change:transform, filter;
  backface-visibility:hidden;
}
.prod-card:hover,
.brand-card:hover{
  animation:cardPopIn 520ms cubic-bezier(.16,1,.3,1) both;
  filter:brightness(1.06);
  box-shadow:0 18px 60px rgba(0,0,0,0.35);
  z-index:5;
}
.prod-card:not(:hover),
.brand-card:not(:hover){
  animation:cardPopOut 420ms cubic-bezier(.16,1,.3,1) both;
}
/* box testo brand non pop */
.brand-card.center-text,
.brand-card.center-text:hover{
  animation:none !important;
  filter:none !important;
  box-shadow:none !important; 
  transform:none !important; 
  z-index:auto !important; 
}


/* reveal */
.reveal-x {
  opacity:0;
  transform:translateX(-42px);
}

.reveal-up {
  opacity: 0;
  transform: translateY(30px);
}

.reveal-fade {
  opacity: 0;
}

.reveal-x,
.reveal-up,
.reveal-fade {
  transition: opacity 600ms cubic-bezier(.16,1,.3,1), transform 600ms cubic-bezier(.16,1,.3,1);
  will-change:opacity, transform;
}

.reveal-x.is-visible,
.reveal-up.is-visible {
  opacity:1;
  transform:translateX(0);
  transform: translateY(0);
}

.reveal-fade.is-visible {
  opacity: 1;
}

.reveal-x[data-delay],
.reveal-up[data-delay],
.reveal-fade[data-delay] {
  transition-delay: var(--delay);
}

@media (max-width: 768px) {
  .reveal-x {
    transform: translateY(30px); /* Slide up on mobile instead of from the side */
  }
}

/* =========================
   PLACEHOLDER
========================= */
.placeholder{
  width:100%;
  min-height:200px;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  color:inherit;
  font-size:20px;
  opacity:0.6;
  text-transform:uppercase;
  letter-spacing:1px;
}

/* =========================
   CONTATTACI (fixed)
========================= */
.contact-btn{
  position:fixed;
  bottom:50px;
  right:80px;
  z-index:9999;

  background:#fff;
  color:#000;
  text-decoration:none;

  font-weight:600;
  font-size:var(--contact-btn);
  letter-spacing:1px;
  text-transform:uppercase;

  padding:16px 42px;
  clip-path:polygon(0 0, 100% 0, 92% 100%, 0 100%);

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

  overflow:hidden;
  transition:background 220ms ease, color 220ms ease, transform 180ms ease, opacity 180ms ease;
}
.contact-btn:hover{
  background:#000;
  color:#fff;
  transform:scale(1.03);
}
.contact-btn .cta-text{
  display:block;
  transition:opacity 260ms ease, transform 260ms ease;
}
.contact-btn .cta-contact{
  opacity:1;
  transform:scale(1);
}
.contact-link{
  color:inherit;
  text-decoration:none;
  position:relative;
  opacity:0.9;
  transition:opacity 180ms ease;
}
.contact-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-3px;
  width:100%;
  height:1px;
  background:rgba(255,255,255,0.6);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 220ms ease;
}
.contact-link:hover{ opacity:1; }
.contact-link:hover::after{ transform:scaleX(1); }

/* =========================
   DRAWER MENU
========================= */
.menu-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.35);
  opacity:0;
  pointer-events:none;
  transition:opacity 220ms ease;
  z-index:180;
}
.side-menu{
  position:fixed;
  top:0;
  right:0;
  height:100vh;
  width:min(460px, 92vw);

  background:rgba(0, 0, 0, 0.854);
  backdrop-filter:blur(6px);

  padding:150px 28px 28px;
  display:flex;
  flex-direction:column;
  gap:18px;

  transform:translateX(100%);
  transition:transform 260ms cubic-bezier(.16,1,.3,1);
  z-index:190;
}
.side-menu.open{ transform:translateX(0); }
.menu-backdrop.open{ opacity:1; pointer-events:auto; }

.menu-title{
  position:absolute;
  top:34px;
  left:28px;

  color:rgba(255,255,255,0.95);
  font-weight:600;
  font-size:30px;
  letter-spacing:2px;
  text-transform:uppercase;

  opacity:0.9;
  pointer-events:none;
}
.menu-close{
  position:absolute;
  top:22px;
  right:22px;

  width:44px;
  height:44px;

  border:none;
  background:transparent;
  color:#fff;
  font-size:34px;
  cursor:pointer;

  text-shadow:0px 2px 10px rgba(0,0,0,0.55);
}

.menu-link{
  position:relative;
  display:inline-block;
  max-width:max-content;

  color:#fff;
  text-decoration:none;
  text-transform:uppercase;
  font-weight:600;
  letter-spacing:1px;
  font-size:22px;
  line-height:1.15;
  margin-top:10px;

  opacity:0.92;
  transition:opacity 160ms ease, transform 160ms ease;
}
.menu-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  height:2px;
  width:100%;
  background:rgba(255,255,255,0.85);

  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 260ms cubic-bezier(.16,1,.3,1);
}
.menu-link:hover{
  opacity:1;
  transform:translateX(-2px);
}
.menu-link:hover::after{ transform:scaleX(1); }

/* MENU HOME */
.menu-home{
  position:absolute;
  top:34px;
  left:28px;

  color:rgba(255,255,255,0.95);
  font-weight:600;
  font-size:30px;
  letter-spacing:2px;
  text-transform:uppercase;

  text-decoration:none;
  opacity:0.9;
  display:inline-block;
}
.menu-home::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;

  width:100%;
  height:2px;
  background:rgba(255,255,255,0.85);

  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 260ms cubic-bezier(.16,1,.3,1);
}
.menu-home:hover::after,
.menu-home:focus-visible::after{
  transform:scaleX(1);
}

/* MENU group + submenu "ALTRO..." */
.menu-group{ display:block; }
.menu-sub{
  display:block;
  color:rgba(255,255,255,0.9);
  text-decoration:none;
  text-transform:uppercase;
  font-weight:600;
  letter-spacing:1px;
  font-size:14px;

  margin-left:0;
  padding-top:10px;

  max-height:0;
  opacity:0;
  transform:translateX(-10px);
  overflow:hidden;

  pointer-events:none;

  transition:
    max-height 320ms cubic-bezier(.16,1,.3,1),
    opacity 220ms ease,
    transform 320ms cubic-bezier(.16,1,.3,1);
}
.menu-group:hover .menu-sub,
.menu-group:focus-within .menu-sub{
  max-height:60px;
  opacity:1;
  transform:translateX(0);
  pointer-events:auto;
}
.menu-sub:hover{ opacity:1; }
.menu-sub::before{
  content:"";
  display:inline-block;
  width:18px;
  height:2px;
  background:rgb(255, 255, 255);
  margin-right:10px;
  transform:translateY(-3px);
}

/* BLUR BACKGROUND quando menu è aperto */
body.menu-open > *:not(.side-menu):not(.menu-backdrop):not(.contact-btn):not(.custom-cursor):not(script){
  filter: blur(10px);
  transition: filter 220ms ease;
}
.side-menu,
.menu-backdrop{ filter:none !important; }
body > *{ transition: filter 220ms ease; }

/* =========================
   CONTATTI (strip)
========================= */
.contatti-strip{
  height:40vh;
  min-height:320px;
  width:100%;

  background-color:rgb(var(--active-bg));
  transition:background-color 420ms ease;
  color:rgba(255,255,255,0.92);

  position:relative;
  display:flex;
  align-items:center;

  padding:36px var(--px);
}
.contatti-title{
  position:absolute;
  top:34px;
  left:var(--px);

  color:rgba(255,255,255,0.95);
  font-size:clamp(18px, 2.2vw, 28px);
  letter-spacing:1px;
  text-transform:uppercase;
  margin:0;
  pointer-events:none;
}
.contatti-grid{
  width:100%;
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr 1fr;
  column-gap:clamp(22px, 5vw, 80px);
  row-gap:18px;
  align-items:start;
  margin-bottom:-40px;
  font-weight:200;
}
.contatti-col h3{
  font-size:16px;
  letter-spacing:1px;
  text-transform:uppercase;
  margin-bottom:30px;
  color:rgba(255,255,255,0.95);
  font-weight:600;
}
.contatti-col p{
  font-size:18px;
  line-height:1.15;
  margin:2px 0;
  font-weight:200;
}
.contatti-col p:first-of-type{ margin-top:10px; }
.contatti-col .small{ font-size:16px; opacity:0.9; }
.spacer{ height:90px; }

/* =========================
   FIX: CHI SIAMO VERDE
========================= */
#chi-siamo{
  background-color:rgb(var(--active-bg)) !important;
  transition:background-color 420ms ease;
}

/* =========================
   CHI SIAMO (layout)
========================= */
.chi-siamo-section{
  min-height:100svh;
  padding-top:110px;
  display:flex;
  align-items:flex-start !important;
  justify-content:flex-start !important;
}
.chi-siamo-wrap{
  width:100%;
  max-width:1600px;
  margin:0 auto;
  padding:0;
  position:relative;
}
.chi-siamo-top{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:24px;
  margin-top:40px;
  padding:0;
}
.chi-siamo-title{
  margin:0;
  color:rgba(255,255,255,0.95);
  font-size:clamp(44px, 6vw, 65px);
  letter-spacing:1px;
  text-transform:uppercase;
  line-height:1;
}
.chi-siamo-dettagli{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height:50px;
  padding:0 30px;
  margin-top:0;

  background:transparent !important;
  color:#fff !important;

  border:2px solid rgba(255,255,255,0.95);
  box-shadow:none !important;

  clip-path:none !important;
  border-radius:0px;

  font-weight:600;
  font-size:24px;
  letter-spacing:1px;
  text-transform:uppercase;
  text-decoration:none !important;

  transition:transform 180ms ease, background 220ms ease, color 220ms ease;
}
.chi-siamo-dettagli:hover{
  background:#fff !important;
  color:#000 !important;
  transform:scale(1.03);
}

/* HOME – CHI SIAMO FULL WIDTH IMAGE */
#chi-siamo .container{
  max-width:none !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
#chi-siamo img{
  width:100%;
  height:auto;
  display:block;
}

/* =========================
   ABOUT US (layout)
========================= */
.about-page{ background:#fff; color:#111111; }
.about-page{ --active-bg: 26, 165, 91 }

.about-hero{
  position:relative;
  width:100%;
  padding-top:var(--nav-h);

  background-color:rgb(var(--active-bg));
  transition:background-color 420ms ease;

  height:160px;
  background:rgb(var(--active-bg));
}
.about-hero__titlewrap{
  height:100%;
  display:flex;
  align-items:flex-end;
  padding:0 var(--px) 0px;
}
.about-hero__title{
  color:rgba(255,255,255,0.95);
  font-size:clamp(40px, 6vw, 68px);
  letter-spacing:1px;
  text-transform:uppercase;
  line-height:1;
}
.about-team{
  width:100%;
  background-color:rgb(var(--active-bg));
  transition:background-color 420ms ease;
  padding:40px var(--px) 38px;
}
.about-team__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(18px, 2vw, 34px);
  align-items:start;
}
.team-card{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.team-photo{
  width:100%;
  aspect-ratio:8 / 9;
  background:rgba(255,255,255,0.92);
  overflow:hidden;

  border:1px solid rgba(255,255,255,0.85);
  padding:3px;
  box-sizing:border-box;
}
.team-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.team-info{ color:#fff; line-height:1; }
.team-name{
  font-size:clamp(22px, 2.6vw, 34px);
  font-weight:800;
  letter-spacing:0.4px;
}
.team-role{
  margin-top:2px;
  font-size:14px;
  letter-spacing:0.6px;
  opacity:0.95;
}

/* assicurati che le sezioni About usino active-bg */
.about-page .about-hero,
.about-page .about-team,
.about-page .about-principi,
.about-page #contatti.contatti-strip{
  background-color: rgb(var(--active-bg)) !important;
}

/* ABOUT US - PRINCIPI CHIAVE */
.about-principi{
  width:100%;
  min-height:100svh;
  background-color:rgb(var(--active-bg));
  transition:background-color 420ms ease;

  padding:40px var(--px) 80px;
  display:flex;
  align-items:center;
}
.about-principi__wrap{
  max-width:1600px;
  margin:0 auto;
  text-align:center;
}
.about-principi__title{
  margin:0 0 50px 0;
  color:rgba(255,255,255,0.95);
  font-size: clamp(44px, 5vw, 70px);
  letter-spacing:1px;
  text-transform:uppercase;
  line-height:1.1;
}
.about-principi__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:60px;
  max-width:900px;
  margin:0 auto;
  justify-items:start;
}
.principio-item {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  align-items: start;
  width: 100%;
}
.principio-titolo {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.2;
  text-align: right;
}
.principio-testo {
  margin: 0;
  color: rgba(255, 255, 255, 0.95);
  font-size: 20px;
  line-height: 1.65;
  letter-spacing: 0.2px;
  font-weight: 400;
  text-align: left;
  padding-top: 4px;
}
@media (max-width:1024px){
  .about-principi__grid{ grid-template-columns:1fr; }
}
@media (max-width: 768px) {
  .principio-item { grid-template-columns: 1fr; gap: 10px; }
  .principio-titolo { text-align: left; }
}

/* =========================
   NAVBAR BRAND TEXT
========================= */
.nav-brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}
.brand-text{
  color:rgba(255,255,255,0.95);
  font-weight:700;
  font-size:28px;
  letter-spacing:1px;
  text-transform:uppercase;
  line-height:1;

  transform:translateY(1px);
  transition:opacity 200ms ease, transform 200ms ease, font-size 180ms ease;
}
.nav-brand:hover .brand-text{
  opacity:1;
  transform:translateY(0);
}

/* =========================
   PRODUZIONI -> CARD ALTRO... (cornice + fill hover)
========================= */
.prod-card.prod-more{ position:relative; }
.prod-card.prod-more .card-inner{
  display:flex;
  align-items:center;
  justify-content:center;
}
.prod-more-text{
  position:relative;
  z-index:3;

  color:rgba(255,255,255,0.95);
  font-weight:600;
  font-size:20px;
  letter-spacing:1px;
  text-transform:uppercase;
  text-shadow:0px 2px 10px rgba(0,0,0,0.55);
}
.prod-card.prod-more::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  border:2px solid rgba(255,255,255,0.85);
  pointer-events:none;
}
.prod-card.prod-more::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;

  background:rgba(255,255,255,0.85);
  transform:scaleX(0);
  transform-origin:left center;

  transition:transform 420ms cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.prod-card.prod-more:hover::after{ transform:scaleX(1); }
.prod-card.prod-more:hover .prod-more-text{
  color:#000;
  text-shadow:none;
  transition:color 220ms ease;
}

/* =========================
   BRAND -> CARD ALTRO... (cornice + fill hover)
========================= */
.brand-card.brand-more{ position:relative; }
.brand-card.brand-more .card-inner{
  display:flex;
  align-items:center;
  justify-content:center;
}
.brand-more-text{
  position:relative;
  z-index:3;

  color:rgba(255,255,255,0.95);
  font-weight:600;
  font-size:20px;
  letter-spacing:1px;
  text-transform:uppercase;
  text-shadow:0px 2px 10px rgba(0,0,0,0.55);
}
.brand-card.brand-more::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;

  border:2px solid rgba(255,255,255,0.85);
  pointer-events:none;
}
.brand-card.brand-more::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;

  background:rgba(255,255,255,0.85);
  transform:scaleX(0);
  transform-origin:left center;

  transition:transform 420ms cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.brand-card.brand-more:hover::after{ transform:scaleX(1); }
.brand-card.brand-more:hover .brand-more-text{
  color:#000;
  text-shadow:none;
  transition:color 220ms ease;
}

/* =========================
   PRODUZIONI PAGE
========================= */
.produzioni-page{
  min-height:100vh;
  background: rgb(17, 144, 174);
  padding:120px var(--px) 120px;
}
.produzioni-title{
  text-align:left;
  margin-left: 140px;
  margin-top: 0px;
  margin-bottom: 30px;
  color:#fff;

  font-size:clamp(40px, 8vw, 120px);
  letter-spacing:4px;
  font-weight:600;
  text-transform:uppercase;
}
.produzioni-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
  margin-left: 150px;
  margin-right: 150px;
}
.produzione-card{
  position:relative;
  display:block;
  text-decoration:none;
  overflow:hidden;
  will-change: transform;
  transform: translateZ(0);
}
.produzione-media,
.produzione-media img{
  will-change: transform;
  transform: translateZ(0);
  position:relative;
  width:100%;
  aspect-ratio:7 / 10;
  overflow:hidden;
  background:#000;
}
.produzione-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;

  transition:transform 420ms cubic-bezier(.16,1,.3,1),
             filter 420ms cubic-bezier(.16,1,.3,1);
}
.produzione-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.45);
  opacity:0;
  transition:opacity 320ms ease;
  pointer-events:none;
}
.produzione-card:hover .produzione-media::after{ opacity:1; }
.produzione-card:hover img{ transform:scale(1.04); }

.produzione-tag{
  position:absolute;
  top:12px;
  left:12px;

  padding:4px 10px;
  font-size:11px;
  letter-spacing:1px;
  text-transform:uppercase;

  color:rgba(255, 255, 255, 0.95);
  background:rgba(0,0,0,0.6);
  border:1px solid rgba(255,255,255,0.2);
  clip-path:polygon(0 0, 100% 0, 92% 100%, 0 100%);
  z-index:2;
  font-weight:600;
}
@media (max-width:1200px){
  .produzioni-grid{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:900px){
  .produzioni-grid{ grid-template-columns:repeat(2, 1fr); gap:28px; }
}
@media (max-width:700px){
  .produzioni-page{ padding:100px 20px 100px; }
  .produzioni-title{ text-align: center; margin-left: 0; margin-right: 0; font-size:clamp(38px, 11vw, 66px); margin-bottom: 30px; font-weight: 800; }
  .produzioni-grid{ grid-template-columns:repeat(2, 1fr); gap:16px; margin-left: 0; margin-right: 0; }
}
@media (max-width:520px){
  .produzioni-grid{ grid-template-columns:1fr; }
  .produzioni-title{ margin-bottom:50px; }
}

/* navbar fissa – produzioni */
.page-produzioni .navbar{ background:rgb(17, 144, 174); }

/* =========================
   PAGINA PROGETTO (breathe.html)
========================= */
.page-progetto{ background:#fff; color:#111; }
.page-progetto .navbar{ background:rgba(0,0,0,1); }

.progetto-page{
  min-height:100vh;
  padding-top:var(--nav-h);
}
.progetto-hero{ padding:110px var(--px) 70px; }

.progetto-grid{
  max-width:1400px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:70px;
  align-items:start;
}
.progetto-title{
  margin:0;
  font-size:clamp(42px, 5vw, 64px);
  letter-spacing:1px;
  font-weight:600;
  text-transform:uppercase;
}
.progetto-by{
  margin-top:10px;
  font-size:18px;
  letter-spacing:0.4px;
  opacity:0.95;
  font-weight:400;
}
.progetto-accent{ color:#e1175f; }
.progetto-meta{
  margin-top:30px;
  font-size:16px;
  line-height:1.6;
  opacity:0.95;
  font-weight:400;
}
.progetto-sinossi{
  margin-top:70px;
  max-width:620px;
  font-size:18px;
  line-height:1.75;
  letter-spacing:0.2px;
  opacity:0.95;
  font-weight:400;
}
.progetto-poster{
  width:100%;
  max-width:420px;
  margin-left:auto;
  background:#000;
  border:2px solid rgba(0,0,0,0.12);
  overflow:hidden;
}
.progetto-poster img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
}
.progetto-extra{ padding:0 var(--px) 90px; }
@media (max-width:1024px){
  .progetto-grid{ grid-template-columns:1fr; gap:40px; }
  .progetto-poster{ margin-left:0; max-width:520px; }
  .progetto-sinossi{ margin-top:40px; }
}

/* POSTER -> TRAILER overlay */
.progetto-poster.trailer-link{
  position:relative;
  display:block;
  text-decoration:none;
  color:inherit;
  overflow:hidden;
  cursor:pointer;
  transform: translateZ(0);
  will-change: transform;
}
.trailer-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;

  background:rgba(0,0,0,0.38);
  opacity:0;
  pointer-events:none;

  transition:opacity 260ms ease;
}
.trailer-play{
  width:76px;
  height:76px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,0.92);
  display:flex;
  align-items:center;
  justify-content:center;

  transform:translateY(8px) scale(0.96);
  opacity:0;

  transition:
    transform 320ms cubic-bezier(.16,1,.3,1),
    opacity 260ms ease;
}
.trailer-triangle{
  width:0;
  height:0;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  border-left:16px solid rgba(255,255,255,0.95);
  transform:translateX(2px);
}
.trailer-text{
  max-width:340px;
  text-align:center;
  color:rgba(255,255,255,0.95);
  font-size:14px;
  letter-spacing:0.8px;
  text-transform:uppercase;

  transform:translateY(10px);
  opacity:0;

  transition:
    transform 320ms cubic-bezier(.16,1,.3,1),
    opacity 260ms ease;
}
.progetto-poster.trailer-link:hover .trailer-overlay,
.progetto-poster.trailer-link:focus-visible .trailer-overlay{ opacity:1; }
.progetto-poster.trailer-link:hover .trailer-play,
.progetto-poster.trailer-link:focus-visible .trailer-play{
  opacity:1;
  transform:translateY(0) scale(1);
}
.progetto-poster.trailer-link:hover .trailer-text,
.progetto-poster.trailer-link:focus-visible .trailer-text{
  opacity:1;
  transform:translateY(0);
}
.progetto-poster.trailer-link:hover img{
  transform:scale(1.02);
  transition:transform 420ms cubic-bezier(.16,1,.3,1);
}

/* CONTACT BTN – PAGE LIGHT/DARK */
.page-light .contact-btn{ background:#000; color:#fff; }
.page-light .contact-btn:hover{ background:#fff; color:#000; }
.page-light .contact-btn .cta-text{ color:inherit; }

.page-dark .contact-btn{ background:#fff; color:#000; }
.page-dark .contact-btn:hover{ background:#000; color:#fff; }
.page-dark .contact-btn .cta-text{ color:inherit; }

/* =========================
   CONTATTACI PAGE
========================= */
.page-contattaci{
  background: rgb(225, 23, 95);
  color:#fff;
}
.page-contattaci .navbar{ background: rgb(225, 23, 95); }
.page-contattaci.page-dark .contact-btn{ background:#fff; color:#000; }

.contattaci-page{
  min-height:100vh;
  padding-top:var(--nav-h);
}
.contattaci-hero{
  padding:50px var(--px) 30px;
  max-width:1100px;
}
.contattaci-title{
  margin:0;
  font-size:clamp(50px, 6vw, 64px);
  line-height:1.05;
  letter-spacing:1px;
  text-transform:none;
  font-weight:600;
}
.contattaci-desc{
  margin-top:18px;
  max-width:720px;
  font-size:18px;
  line-height:1.65;
  opacity:0.92;
  font-weight:200;
}
.contattaci-form-wrap{
  padding:40px var(--px) 120px;
  max-width:1100px;
}
.contattaci-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:34px 44px;
  margin-top:18px;
}
.field{ position:relative; display:block; }
.field-label{
  display:block;
  font-size:14px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  opacity:0.9;
  margin-bottom:14px;
}
.field-input{
  width:100%;
  background:transparent;
  border:none;
  outline:none;
  color:#fff;
  font-family:inherit;
  font-size:18px;
  padding:6px 0 10px;
}
.field-input::placeholder{ color:rgba(255,255,255,0.55); }
.field-line{
  display:block;
  height:1px;
  width:100%;
  background:rgba(255,255,255,0.55);
  transform-origin:left center;
  transition:background 220ms ease, transform 260ms cubic-bezier(.16,1,.3,1);
}
.field:focus-within .field-line{
  background:rgba(255,255,255,0.95);
  transform:scaleX(1.02);
}
.field-textarea{ margin-top:34px; }
.field-area{ resize:vertical; min-height:160px; }

.attach{ margin-top:28px; }
.attach-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  user-select:none;
}
.attach-input{ display:none; }
.attach-icon{ font-size:16px; transform:translateY(-1px); }
.attach-text{
  font-size:14px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  opacity:0.92;
}
.attach-note{ margin-top:8px; font-size:13px; opacity:0.75; }
.attach-line{ margin-top:14px; background:rgba(255,255,255,0.55); }

.privacy{
  margin-top:26px;
  display:flex;
  align-items:center;
  gap:12px;
  font-size:14px;
  letter-spacing:1px;
  text-transform:uppercase;
  opacity:0.9;
}
.privacy input{ width:16px; height:16px; }

.contattaci-submit{
  margin-top:34px;
  background:#fff;
  color:#000;
  border:none;
  font-family:inherit;
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  font-size:22px;
  padding:16px 36px;
  cursor:pointer;

  clip-path:polygon(0 0, 100% 0, 88% 100%, 0 100%);
  transition:transform 180ms ease, background 220ms ease, color 220ms ease;
}
.contattaci-submit:hover{
  transform:scale(1.02);
  background:#000;
  color:#fff;
}
@media (max-width:900px){
  .contattaci-grid{ grid-template-columns:1fr; gap:26px; }
  .contattaci-hero{ padding-top:110px; }
}

/* contattaci – input stile reference */
.page-contattaci .field-line,
.page-contattaci .attach-line{ background: rgba(255,255,255,0.65); }
.page-contattaci .field-input{
  padding: 18px 0 14px;
  font-size: 22px;
  line-height: 110%;
  letter-spacing: -0.2px;
  opacity: 0.95;
}
.page-contattaci .field-line{
  height: 1px;
  background: rgba(255,255,255,0.55);
  transition: background 220ms ease, transform 260ms cubic-bezier(.16,1,.3,1);
}
.page-contattaci .field:focus-within .field-line{
  background: rgba(255,255,255,0.95);
  transform: scaleX(1.02);
}

/* FLOATING LABEL */
.page-contattaci .field.floating{
  position: relative;
  padding-top: 18px;
}
.page-contattaci .field.floating .field-input{
  padding: 18px 0 12px;
}
.page-contattaci .field.floating .float-label{
  position: absolute;
  left: 0;
  top: 32px;
  transform: translateY(0);
  pointer-events: none;

  font-size: 18px;
  letter-spacing: 0.2px;
  opacity: 0.65;

  transition:
    transform 220ms cubic-bezier(.16,1,.3,1),
    opacity 220ms ease,
    font-size 220ms cubic-bezier(.16,1,.3,1);
}
.page-contattaci .field.floating:focus-within .float-label,
.page-contattaci .field.floating .field-input:not(:placeholder-shown) + .float-label,
.page-contattaci .field.floating .field-area:not(:placeholder-shown) + .float-label{
  transform: translateY(-26px);
  font-size: 13px;
  opacity: 0.95;
}
.page-contattaci .field.floating.field-textarea .float-label{ top: 30px; }

/* =========================
   BRAND & SOCIAL PAGE (PULITO)
========================= */
.page-brand{
  --active-bg: 217, 28, 48;
  background: rgb(var(--active-bg));
  --brand-left: 6vw;
}
.page-brand .navbar{ background: rgba(217, 28, 48, 1); }
.bi-page{
  min-height:100vh;
  padding-top:var(--nav-h);
}

/* HERO */
.bi-hero{
  padding: 160px 0 40px 0;
  max-width:1600px;
  margin: 0 auto;
  text-align: center;
}
.page-brand .bi-title{
  font-size: clamp(50px, 7vw, 90px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: 2px;
  margin-bottom: 40px;
  color:#ffffff;
}
.page-brand .bi-intro{
  margin-left: var(--brand-left);
  max-width: 700px;
}
.bi-p{
  color:rgba(255,255,255,0.92);
  font-size:18px;
  line-height:1.6;
  letter-spacing:0.2px;
  opacity: 0.9;
  font-weight:400;
}
.bi-p + .bi-p{ margin-top:12px; }

/* WRAP GRID */
.bi-grid-wrap{ padding-bottom: 120px; }

/* FILTRI CENTRATI */
.page-brand .bi-filters{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:24px;
  margin:0 0 40px 0;
}

/* stile filtri (come tuo ultimo blocco) */
.bi-filter{
  background:none;
  border:none;
  color:#393939;
  font-size:14px;
  letter-spacing:2px;
  cursor:pointer;
  position:relative;
  padding:8px 0;
  transition:0.25s;
}
.bi-filter:hover{ color:#7b7b7b; }
.bi-filter.is-active{ color:#ffffff; }
.bi-filter.is-active::after{
  content:"";
  position:absolute;
  bottom:-17px;
  left:0;
  width:100%;
  height:2px;
  background:#ffffff;
}

/* GRID */
.page-brand .bi-grid{
  margin-left: var(--brand-left);
  margin-right: var(--brand-left);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:80px;
  align-items:start;
}
.page-brand .bi-intro{
  margin-left: 3.8vw !important;
}

/* Stile per card social verticali (formato telefono) */
.page-brand .bi-card[data-category="social"] {
  max-width: 300px; /* Larghezza massima per simulare un telefono */
  width: 100%;
}
.page-brand .bi-card[data-category="social"]:nth-child(odd) {
  justify-self: end;
}
.page-brand .bi-card[data-category="social"]:nth-child(even) {
  justify-self: start;
}
.page-brand .bi-card[data-category="social"] .bi-thumb {
  aspect-ratio: 9 / 16;
}

/* =========================================
.page-brand .bi-card{
  display:block;
  text-decoration:none;
  color:inherit;
  position:relative;
  overflow:hidden;
  background:#000;

  transform:translate3d(0,0,0) scale(1);
  will-change:transform, filter;
  backface-visibility:hidden;
}

/* thumb “rettangolo orizzontale” */
.page-brand .bi-thumb{
  position:relative;
  overflow:hidden;
  background:#000;
  aspect-ratio: 16 / 9; /* come reference */
}

/* immagine full cover */
.page-brand .bi-thumb img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;

  transform:scale(1);
  transition:transform 420ms cubic-bezier(.16,1,.3,1),
             filter 420ms cubic-bezier(.16,1,.3,1);
}

/* hover grow */
.page-brand .bi-card:hover .bi-thumb img{
  transform:scale(1.05);
  filter:brightness(1.02);
}

/* chip in alto (stile tuo tag) */
.page-brand .bi-chip{
  position:absolute;
  top:10px;
  left:10px;
  z-index:2;

  padding:4px 10px;
  font-size:11px;
  letter-spacing:1px;
  text-transform:uppercase;

  color:rgba(255,255,255,0.95);
  background:rgba(0,0,0,0.55);
  border:1px solid rgba(255,255,255,0.15);
  clip-path:polygon(0 0, 100% 0, 92% 100%, 0 100%);
  font-weight:600;
}

/* overlay in basso (come reference) */
.page-brand .bi-overlay{
  position:absolute;
  left:14px;
  bottom:12px;
  z-index:2;

  color:rgba(255,255,255,0.95);
  text-shadow:0px 2px 10px rgba(0,0,0,0.55);

  display:flex;
  flex-direction:column;
  gap:4px;
}
.page-brand .bi-name{
  font-weight:600;
  letter-spacing:0.5px;
  text-transform:uppercase;
  font-size:14px;
}
.page-brand .bi-sub{
  font-weight:400;
  opacity:0.9;
  font-size:12px;
  letter-spacing:0.3px;
}

/* pop hover identico alle altre card */
.page-brand .bi-card:hover{
  animation:cardPopIn 520ms cubic-bezier(.16,1,.3,1) both;
  filter:brightness(1.06);
  box-shadow:0 18px 60px rgba(0,0,0,0.35);
  z-index:5;
}
.page-brand .bi-card:not(:hover){
  animation:cardPopOut 420ms cubic-bezier(.16,1,.3,1) both;
}

/* responsive BI */
@media (max-width:1100px){
  .page-brand .bi-grid{
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin-right: 6vw;
  }
}
@media (max-width:700px){
  .bi-hero{ padding:110px 18px 20px; }
  .bi-grid-wrap{ padding:30px 18px 70px; }
  .page-brand .bi-grid{
    margin-left:0;
    margin-right:0;
    grid-template-columns:1fr;
  }
  .page-brand .bi-title{ margin-left: 0 !important; padding-left: 0; }
  .page-brand .bi-intro{ margin-left: 0 !important; padding-left: 0; }
  .page-brand .bi-card[data-category="social"]:nth-child(odd),
  .page-brand .bi-card[data-category="social"]:nth-child(even) {
    justify-self: center; /* Allinea le card social al centro in mobile */
  }
  .page-brand .bi-card{ transform:none !important; }
}

/* =========================
   RESPONSIVE (global)
========================= */
@media (max-width:1100px){
  .prod-grid{
    grid-template-columns:1fr 1fr;
    grid-auto-rows:180px;
  }
  .prod-card.tall{ grid-column:1; grid-row:1 / span 2; }
  .prod-card.small{ grid-column:2; grid-row:2 / span 1; }
  .prod-card.wide{ grid-column:1 / span 2; grid-row:3 / span 1; }
  .prod-card.mid{ grid-column:1 / span 2; grid-row:4 / span 1; }
  .prod-card.right-top{ grid-column:1; grid-row:5 / span 1; }
  .prod-card.right-big{ grid-column:2; grid-row:5 / span 1; }
}
@media (max-width:1024px){
  .brand-row{ grid-template-columns:1fr; }
  .brand-center{ grid-template-rows:auto auto; }
  .about-team__grid{ grid-template-columns:1fr; }
}
@media (max-width:900px){
  .intro-text{
    padding:110px 24px 40px;
    height:auto;
    min-height:75vh;
  }
  .intro-second{ margin-top:34px; }

  .contatti-strip{
    height:auto;
    padding:60px 20px 40px;
    flex-direction:column;
    align-items:flex-start;
  }
  .contatti-title{
    position:static !important;
    margin-bottom:25px;
    font-size:clamp(18px, 3.5vw, 24px);
    width:100%;
  }
  .contatti-grid{
    grid-template-columns:1fr 1fr;
    column-gap:30px;
    width:100%;
  }
  .contatti-col a,
  .contatti-col .contact-link{
    padding:0;
    min-height:auto;
    min-width:auto;
  }
  .spacer{ height:30px; }
}
@media (max-width:700px){
  .navbar{ padding:0 20px; }
  .nav-servizi{
    height:38px;
    line-height:38px;
    padding:0 18px;
    font-size:13px;
  }
  .menu-btn span{ width:26px; }
  .home-label{ font-size:28px; }

  .prod-section{ padding:100px 18px 50px; }
  .prod-title{
    font-size:44px;
    position:relative;
    width:100%;
    text-align:center;
    margin-bottom:30px;
  }

  .prod-grid{
    grid-template-columns:1fr;
    grid-auto-rows:190px;
    margin-top: 0;
  }
  .prod-card.tall,
  .prod-card.small,
  .prod-card.wide,
  .prod-card.mid,
  .prod-card.right-top,
  .prod-card.right-big{
    grid-column:1;
    grid-row:auto;
    margin:0;
  }

  .contact-btn{
    font-size:16px;
    padding:12px 28px;
    bottom:18px;
    right:18px;
  }

  .chi-siamo-wrap{ padding:100px 18px 50px; }
  .chi-siamo-top{ margin-bottom:28px; }
  .chi-siamo-dettagli{ height:38px; padding:0 18px; font-size:13px; }

  .about-hero{ height:140px; }
}
@media (max-width:520px){
  .contatti-grid{ grid-template-columns:1fr; }
}

/* =========================
   CUSTOM CURSOR (pallino)
========================= */
@media (hover: hover) and (pointer: fine){
  html, body, a, button, .menu-btn, .prod-card, .brand-card, .home-half{
    cursor:none !important;
  }
  .custom-cursor{
    position:fixed;
    top:0;
    left:0;

    width:22px;
    height:22px;
    border-radius:50%;

    background:rgb(255, 255, 255);
    mix-blend-mode:difference;

    pointer-events:none;
    z-index:999999;

    transform:translate3d(-9999px, -9999px, 0) scale(1);
    will-change:transform;
  }
  .custom-cursor.is-hover{
    transform:translate3d(var(--cx, -9999px), var(--cy, -9999px), 0) scale(0.70);
  }
}

/* =========================
   CURSORE DI SELEZIONE TESTO
========================= */
body{ user-select: none; }
p,
.intro-p,
.about-principi__p{
  user-select: text;
}

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

/* Extra small devices (< 360px) */
@media (max-width:359px){
  :root{
    --px: 16px;
    --h1: 32px;
    --home-label: 28px;
    --intro-text: 18px;
    --contact-btn: 14px;
  }
  .navbar{ padding:0 16px; height:70px; }
  .logo{ height:44px; width:auto; max-width:180px; }
  .menu-btn span{ width:24px; }
  .side-menu{ width:min(100vw, 92vw); padding:120px 20px 20px; }
}

/* Small phones (360px - 480px) */
@media (max-width:480px){
  :root{
    --px: 18px;
    --h1: clamp(28px, 7vw, 36px);
    --home-label: 28px;
    --intro-text: 16px;
    --contact-btn: 14px;
  }

  /* Navigation */
  .navbar{
    padding:0 18px;
    height:70px;
  }
  .logo{ height:46px; width:auto; max-width:180px; }
  .brand-text{ display:none; }
  .nav-social{ display:none; }
  .menu-btn{ width:40px; height:36px; gap:5px; }
  .menu-btn span{ width:24px; height:2.5px; }

  /* Side menu */
  .side-menu{
    width:100vw;
    padding:110px 20px 20px;
  }
  .menu-title{ font-size:24px; left:20px; }
  .menu-link{ font-size:18px; }

  /* Contact button */
  .contact-btn{
    bottom:14px;
    right:14px;
    padding:10px 20px;
    font-size:17px;
    height:auto;
  }

  /* Hero section */
  .hero-text{ font-size:clamp(20px, 5vw, 28px); }
  .home-label{ font-size:clamp(24px, 6vw, 32px); }

  /* Sections padding */
  .prod-section{ padding:80px 18px 40px; }
  .brand-section{ padding:80px 18px 40px; }
  .about-team{ padding:30px 18px; }

  /* Grid layouts */
  .prod-grid{
    grid-template-columns:1fr;
    grid-auto-rows:150px;
    gap:12px;
  }
  .about-team__grid{
    grid-template-columns:1fr;
    gap:20px;
  }
  .team-card{ gap:12px; }
  .team-photo{ aspect-ratio:1; }
  .team-name{ font-size:clamp(18px, 5vw, 28px); }

  /* Contact strip */
  .contatti-strip{
    min-height:auto;
    padding:80px 18px 40px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
  }
  .contatti-title{
    font-size:clamp(16px, 5vw, 24px);
    position:static !important;
    top:auto !important;
    left:auto !important;
    margin-bottom:30px;
    width:100%;
    line-height:1.3;
    text-align:left;
  }
  .contatti-grid{
    grid-template-columns:1fr;
    gap:25px;
    margin-bottom:0;
    width:100%;
  }
  .contatti-col h3{
    font-size:14px;
    margin-bottom:12px;
  }
  .contatti-col p{
    font-size:14px;
    line-height:1.4;
    margin:4px 0;
  }
  .contatti-col .small{ font-size:12px; }
  .spacer{ height:0; display:none; }

  /* About page */
  .about-hero{ height:120px; }
  .about-hero__title{ font-size:clamp(28px, 6vw, 40px); }
  .about-principi{ min-height:auto; padding:40px 24px; }
  .about-principi__title{ font-size:clamp(30px, 7vw, 40px); margin-bottom:30px; }
  .about-principi__grid{ gap:25px; }
  .principio-testo { font-size:16px; line-height:1.5; }

  /* Brand section mobile */
  .brand-row{ grid-template-columns:1fr; gap:12px; }
  
  /* Reorder Brand cards: flatten container and swap last two */
  .brand-center { display: contents; }
  .brand-card.left { order: 1; }
  .brand-card.center-top { order: 2; }
  .brand-card.right { order: 3; }
  .brand-card.brand-more { order: 4; }

  .brand-card.left,
  .brand-card.right,
  .brand-card.center-top{ min-height:240px; }
  .brand-tag{ font-size:10px; padding:3px 8px; }
  .brand-bottom{ font-size:13px; left:10px; bottom:10px; }

  /* Chi siamo */
  .chi-siamo-wrap{
    padding:80px 18px 40px;
    display:flex;
    flex-direction:column;
  }
  .chi-siamo-title{
    font-size:clamp(28px, 6vw, 40px);
    order:1;
    margin-bottom:20px;
  }
  .chi-siamo-top{
    display:contents;
  }
  .chi-siamo-content{ order:2; }
  .chi-siamo-dettagli{
    width:100%;
    height:44px;
    font-size:12px;
    margin-top:20px;
    order:3;
  }

  /* Intro text */
  .intro-text{ padding:80px 18px 30px; }
  .intro-second{ margin-top:20px; }

  /* Video responsiveness */
  .hero-video{
    width:100%;
    height:auto;
    object-fit:cover;
  }

  /* Cards text overlay */
  .prod-tag{ font-size:10px; padding:3px 8px; top:8px; left:8px; }
  .prod-bottom{ font-size:13px; left:10px; bottom:10px; }

  /* Touch-friendly spacing */
  button, a, .menu-link, .contact-link{
    min-height:44px;
    min-width:44px;
  }
}

/* Medium phones (480px - 768px) */
@media (max-width:768px){
  :root{
    --px: clamp(18px, 4vw, 24px);
  }

  /* Navigation tweaks */
  .navbar{ padding:0 18px; }
  .brand-text{ display:inline; font-size:14px; }
  .nav-social{ gap:12px; }
  .nav-social a img{ height:16px; }

  /* Contact button repositioning */
  .contact-btn{
    bottom:24px;
    right:24px;
    padding:12px 24px;
    font-size:16px;
  }

  /* Full width images */
  #chi-siamo img,
  .page-brand img{ width:100%; height:auto; }

  /* About principi responsiveness */
  
  /* Contatti adjustments for tablet */
  .contatti-strip{
    min-height:auto;
    padding:60px 24px 40px;
    flex-direction:column;
    align-items:flex-start;
  }
  .contatti-title{
    position:static !important;
    margin-bottom:30px;
    font-size:clamp(18px, 4vw, 24px);
    width:100%;
  }
  .contatti-grid{ gap:30px; width:100%; }

  /* Side menu width */
  .side-menu{ width:min(85vw, 320px); }

  /* Video cover */
  .hero-video{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  /* Make submenu "ALTRO..." always visible on mobile */
  .menu-sub{
    max-height:60px;
    opacity:1;
    transform:translateX(0);
    pointer-events:auto;
  }
}

/* Landscape orientation optimizations */
@media (max-height:500px) and (orientation:landscape){
  :root{ --nav-h: 60px; }
  .navbar{ height:60px; padding:0 16px; }
  .logo{ height:48px; width:auto; max-width:190px; }
  .side-menu{ padding:90px 20px 20px; }
  .hero{ min-height:80vh; }
  .about-team, .brand-section, .chi-siamo-wrap{ padding:30px var(--px); }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse){
  /* Disable custom cursor on touch devices */
  .custom-cursor{ display:none; }

  /* Make buttons more touch-friendly */
  button, a, .menu-link, .contact-link{
    min-height:48px;
    min-width:48px;
    padding:12px 18px;
  }

  /* Remove hover animations that don't work well on touch */
  .prod-card:hover,
  .brand-card:hover{
    animation:none !important;
  }

  /* Reduce motion on touch devices */
  .prod-card, .brand-card{
    transition:none;
  }

  /* Disable animations for users who prefer reduced motion */
  @media (prefers-reduced-motion: reduce){
    *{
      animation-duration:0.01ms !important;
      animation-iteration-count:1 !important;
      transition-duration:0.01ms !important;
    }
  }
}

/* Reduce file size and improve performance for slow connections */
@media (max-width:768px){
  /* Simplify animations on mobile */
  .menu-btn span,
  .menu-link::after,
  .contact-link::after{
    transition:transform 180ms ease, opacity 180ms ease;
  }

  /* Reduce blur effects on lower-end devices */
  @supports (backdrop-filter: none){
    .side-menu{ backdrop-filter:blur(4px); }
  }
}

/* Accessibility: Text sizing */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
}

/* Safe area support for notched devices */
@supports (padding: max(0px)){
  body{ padding-left:max(0px, env(safe-area-inset-left)); padding-right:max(0px, env(safe-area-inset-right)); }
  .navbar{ padding-left:max(18px, env(safe-area-inset-left)); padding-right:max(18px, env(safe-area-inset-right)); }
  .side-menu{ padding-right:max(20px, env(safe-area-inset-right)); }
}

/* =========================
   PERFORMANCE OPTIMIZATIONS
========================= */

/* Optimize images loading */
img{
  display:block;
  max-width:100%;
  height:auto;
}

/* Prevent Cumulative Layout Shift (CLS) - Reserve space for images */
.hero-video,
.card-media,
.progetto-poster img,
.team-photo img{
  display:block;
}

/* Use will-change sparingly for critical animations */
.navbar{
  will-change: background;
}

.prod-card,
.brand-card{
  will-change: transform, filter;
}

/* Prefers reduced data */
@media (prefers-reduced-data: reduce){
  *{
    animation: none !important;
    transition: none !important;
  }
  .hero-video{ display:none; }
  img{ filter: none; }
}

/* Optimize for slow network connections */
@media (max-width: 2G) and (max-width: 3G){
  .brand-card,
  .prod-card,
  .progetto-poster{
    box-shadow: none;
  }
  .side-menu{
    backdrop-filter: none;
    background: rgba(0, 0, 0, 0.95);
  }
}

/* Page-brand: smooth, page-specific logo sizing to avoid breakpoint jumps */
/* Uses clamp to provide continuous scaling across viewport widths */
.page-brand .logo{
  width: auto;
  height: clamp(36px, 5vw, 64px);
  max-width: 260px;
  transition: height 180ms ease, max-width 180ms ease;
}

@media (max-width:480px){
  .page-brand .logo{
    height: 46px;
    max-width: 180px;
  }
}



/* Reduce motion for first contentful paint */
@media (prefers-reduced-motion: reduce){
  html{
    scroll-behavior: auto;
  }
}


/* Reduce motion for first contentful paint */
@media (prefers-reduced-motion: reduce){
  html{
    scroll-behavior: auto;
  }
}


/* =========================================
   HOME (MOBILE) — pulsanti uno sopra l’altro
   SOLO mobile: Film Productions in alto,
   Brand Identity in basso
========================================= */
@media (max-width: 700px){
  .home-overlay{
    flex-direction: column;
  }

  .home-half{
    width: 100%;
    height: 50%;
  }

  .home-half.left{
    width: 100%;
    padding-top: 10vh;
  }
  .home-half.right{
    width: 100%;
    padding-bottom: 10vh;
  }
}

/* Servizi */
.page-servizi {
  background-color: #0b0b0b;
  color: #f0f0f0;
  --active-bg: 11, 11, 11;
}
.page-servizi .navbar {
  background-color: #0b0b0b;
}

.servizi-main {
  padding-top: var(--nav-h);
  min-height: 100vh;
}

.servizi-hero {
  padding: 120px var(--px) 100px;
  max-width: 1600px;
  margin: 0 auto;
}

.servizi-title {
  font-size: clamp(48px, 9vw, 120px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -2px;
  margin-bottom: 40px;
  text-transform: uppercase;
  color: #fff;
}

.servizi-intro {
  font-size: clamp(20px, 3vw, 32px);
  line-height: 1.4;
  max-width: 900px;
  opacity: 0.8;
  font-weight: 200;
}

.servizi-list {
  padding: 0 var(--px) 120px;
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.servizi-item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 40px;
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 40px;
}

.servizi-item-head {
  font-size: 20px;
  font-weight: 600;
  color: #e1175f; /* Brand Pink */
  font-family: "Courier New", Courier, monospace; /* Engineering touch */
}

.servizi-item-body h2 {
  font-size: clamp(32px, 5vw, 60px);
  margin-bottom: 24px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: -1px;
}

.servizi-item-body p {
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.6;
  opacity: 0.7;
  max-width: 800px;
  margin-bottom: 1em;
}

.servizi-item-body p:last-of-type {
  margin-bottom: 0;
}

.servizi-list-item {
  list-style: none;
  padding-left: 0;
  margin: 24px 0;
  opacity: 0.7;
  max-width: 800px;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.6;
}

.servizi-list-item li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 0.5em;
}

.servizi-list-item li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #e1175f; /* Brand Pink */
}

@media (max-width: 768px) {
  .servizi-item {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .servizi-item-head {
    font-size: 16px;
    margin-bottom: 10px;
  }
}

/* =========================
   RESPONSIVE (global)
========================= */