/* =====================================================
   RESET & BASE
===================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root { --accent:#00ABAB; }
html, body { height: 100%; }
body {
  font-family: 'Source Sans 3', sans-serif;
  color: #000;
  background: #000;
  scroll-behavior: smooth;
}
a { text-decoration: none; color: inherit; }

/* =====================================================
   HEADER & NAV
===================================================== */
header{
  position: fixed;
  top: 0; left: 0; width: 100%;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;   /* come in origine */
  gap: 325px;                /* spazio fra blocco sinistro e destro (origine) */
  padding: 15px 40px;
  z-index: 1000;
  overflow: visible;         /* consente l’overlay della tendina */
}

/* blocchi */
.left-container{ display: flex; align-items: center; gap: 60px; }
.logo img{ height: 46px; display:block; }

.right-elements{ display:flex; align-items:center; gap:20px; }
.extra img{ height:30px; display:block; }
.divider{ width:2px; height:26px; background:#fff; }
.social{ display:flex; gap:20px; }
.social a img{ height:16px; filter: brightness(1000%); }

/* nav (voci principali) */
.nav-links{
  display:flex;
  align-items:center;
  gap:40px;
}
.nav-links a{
  color:#fff;
  font-weight:600;
  font-size:.95rem;
}
.nav-links a:hover{ color:#aaa; }

/* =====================================================
   DROPDOWN “GRAFICA” (versione <details>)
   - desktop: overlay (non allarga l’header)
   - mobile: dentro il pannello burger
===================================================== */
.nav-links details.dd{ position:relative; display:inline-block; }
.nav-links details.dd > summary{
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  cursor: pointer;
  color: #fff;                 /* Grafica in bianco */
  font-weight: 600;
  font-size: .95rem;
}
.nav-links details.dd > summary::-webkit-details-marker{ display:none; }
.nav-links details.dd > summary:hover{ color:#aaa; }

.nav-links details.dd .chevron{ transition: transform .2s; }
.nav-links details.dd[open] .chevron{ transform: rotate(180deg); }

/* menu tendina (overlay desktop) */
@media (min-width:901px){
  .nav-links details.dd .dd-menu{
    position: absolute;
    top: calc(100% + 8px); left: 0;
    min-width: 240px;
    background: #fff;
    list-style: none;
    margin: 0; padding: 8px 0;
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0,0,0,.22);
    z-index: 2000;
  }
  .nav-links details.dd .dd-menu li a{
    display:block; padding:12px 16px; color:#222;
  }
  .nav-links details.dd .dd-menu li a:hover{ background:#f4f4f6; }
}

/* =====================================================
   BURGER (mobile)
===================================================== */
.burger{
  display:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  background:transparent;
  border:0; padding:0;
  z-index:1100;
}
.burger span{
  width:25px; height:3px;
  background:#fff; border-radius:2px;
  transition:all .3s ease;
}
.burger.active span:nth-child(1){ transform:rotate(45deg) translateY(8px); }
.burger.active span:nth-child(2){ opacity:0; }
.burger.active span:nth-child(3){ transform:rotate(-45deg) translateY(-8px); }

/* =====================================================
   HERO VIDEO & TESTO
===================================================== */
.hero-video{
  width:100%;
  height:560px;
  position:relative;
  overflow:hidden;
  background:#000;
  margin-top:80px;            /* spazio per l’header fisso */
}
.hero-video video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  background:#000;
}
.hero-video .container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

/* Contenitore di ancoraggio */
.hero-video { position: relative; }

/* POSIZIONAMENTO LIBERO con variabili (desktop di base) */
.hero-text{
  position: absolute;
  /* cambia SOLO questi valori per spostarla */
  top: var(--hero-top, 62%);     /* ↑ aumenta per scendere; puoi usare px o % */
  left: var(--hero-left, 80px);  /* sposta orizzontalmente; px o % */

  transform: none;               /* nessun translate che scombina le misure */
  color:#fff;
  font-size:2.5rem;
  font-weight:600;
  line-height:1.3;
  text-shadow:0 4px 10px rgba(0,0,0,.6);
  max-width:1500px;
  z-index:2;
}

/* Variante ancorata dal basso/destra (se aggiungi .use-bottom a .hero-video) */
.hero-video.use-bottom .hero-text{
  top:auto; left:auto;
  bottom: var(--hero-bottom, 12%); /* ↓ più piccolo = più in basso */
  right:  var(--hero-right, 40px);
}

@keyframes fadeIn{
  from{ opacity:0; transform: translateY(-60%) translateX(-20px); }
  to  { opacity:1; transform: translateY(-50%) translateX(0); }
}

/* === HERO TEXT — OVERRIDE FINALE (desktop) === */
.hero-video { position: relative !important; }
.hero-video .container { position: relative !important; }
.hero-video .container > .hero-text{
  position: absolute !important;
  top: 64% !important;        /* ↑ aumenta per scendere ancora (es. 68%) */
  left: 80px !important;
  transform: translateY(-50%) !important;
  max-width: 1500px !important;
}

.hero-caption{
  font-weight: 10;          /* testo normale */
  line-height: 1.15;
}

.hero-caption strong{
  font-weight: 900;          /* solo queste parole in grassetto */
}

@media (min-width: 901px){
  .hero-caption{
    transform: translateY(50px); /* abbassa di ~18px */
  }
}

/* === per lettere in grassetto e non === */

@media (min-width: 901px){
  .hero-caption{
    font-variation-settings: "wght" 270;  /* corpo */
  }
  .hero-caption strong{
    font-variation-settings: "wght" 700;  /* parole in evidenza */
  }
}

/* Mobile: parole NON in <strong> più sottili con Source Sans 3 */
@media (max-width: 900px){
  .hero-caption{
    /* se stai usando la versione variabile del font */
    font-variation-settings: "wght" 300;   /* ~thin/regular morbido */
    font-weight: 360;                      /* fallback coerente */

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    letter-spacing: .01em;
  }
  .hero-caption strong{
    font-variation-settings: "wght" 700;   /* strong ben visibile */
    font-weight: 700;                      /* fallback */
  }
}


/* =====================================================
   SEZIONI COMUNI
===================================================== */
.section{
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:100px 20px 50px;
}
.section.dark{ background:#000; color:#fff; }
.hero{ background:#f5f5f5; }

/* Parallax/banner */
.parliamo{
  position:relative;
  height:350px;
  background:url('img-background/background.png') center/cover no-repeat fixed;
  display:flex; justify-content:center; align-items:center; text-align:center;
  color:#fff;
}
.parliamo .content h2{ font-size:2.5rem; margin-bottom:10px; }
.parliamo .content p{ font-size:1.1rem; max-width:800px; margin:0 auto; line-height:1.4; }

/* =====================================================
   INTRO / ILLUSTRAZIONE / SERVIZI
===================================================== */
.intro-section{ background:#fff; padding:50px 20px 20px; text-align:left; }
.intro-section .container{ max-width:1200px; margin:0 auto; padding-left:20px; }

.intro-flex{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:100px; margin-bottom:0;
}
.intro-flex h2{ font-size:2.5rem; margin-bottom:20px; color:#000; }
.intro-flex p{ font-size:1.2rem; color:#333; max-width:800px; margin-bottom:0; line-height:1.6; }

/* FIX selettore + alza l’immagine riducendo il margine */
.image-block img{
  width: auto;
  height: 400px;
  display: block;
  margin-left: 40px;
  margin-top: 40px;   /* prima 80px */
  object-fit: contain;
}

/* Oppure: spostamento ottico senza cambiare il flusso */
@media (min-width: 901px){
  .image-block img{
    transform: translateY(-40px);  /* alza di ~40px */
  }
}


/* servizi */
.services{
  display:flex; flex-wrap:wrap; justify-content:flex-start;
  gap:80px; margin-top:-150px; margin-bottom:25px;
}
.service{ text-align:center; flex:1 1 250px; max-width:200px; }
.service img{
  max-width:100%; height:auto; margin-bottom:15px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.service img:hover{ transform:scale(1.08); box-shadow:0 8px 15px rgba(0,0,0,.2); }
.service h3{ font-size:1.1rem; color:#000; margin-top:10px; }

/* =====================================================
   PARALLAX BOX MESSAGE
===================================================== */
.parallax-box{
  position:relative;
  background-image:url('img-background/background 2-02.png');
  background-attachment:fixed;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  padding:120px 25px;
  text-align:center;
}
.parallax-box .overlay{ background:none; padding:0; display:block; }
.parallax-box h2{ color:#008080; margin-bottom:20px; font-size:1.8rem; }
.parallax-box p{ color:#008080; max-width:800px; margin:0 auto 30px; line-height:1.6; font-size:1.1rem; }

.cta{ display:inline-block; background:var(--accent); color:#fff; padding:12px 30px; font-size:1.1rem; font-weight:600; border-radius:6px; transition:.3s; }
.cta:hover{ background:#008080; }
.cta-red{ display:inline-block; background:#008080; color:#fff; padding:12px 30px; font-size:1rem; font-weight:600; border-radius:4px; transition:.3s; }
.cta-red:hover{ background:transparent; color:#fff; border:2px solid #fff; }

/* =====================================================
   GALLERY / SLIDER
===================================================== */
.gallery-section{ background:#fff; padding:80px 20px; text-align:center; overflow:hidden; }
.gallery-section .container{ max-width:1200px; margin:0 auto; }
.gallery-section h2{ margin-bottom:40px; }
.gallery-section p{ margin-bottom:50px; }

.slider{ width:100%; overflow:hidden; position:relative; }
.slides{
  display:flex;
  width:200%;
  transition: transform 1.3s cubic-bezier(0.77,0,0.175,1);
}
.gallery-item{
  flex:0 0 16.8%;
  padding:35px; background:#fff; text-align:center;
}
.gallery-item img{ max-width:100%; height:auto; margin-bottom:15px; }
.gallery-item h3{ font-size:1rem; color:#222; text-transform:uppercase; }

.dots{ margin-top:20px; }
.dot{ height:8px; width:8px; background:#bbb; border-radius:50%; display:inline-block; margin:0 6px; cursor:pointer; }
.dot.active{ background:#333; }

/* =====================================================
   CONTATTI / FOOTER
===================================================== */
.contact-section{
  background:#000; color:#fff; text-align:center; padding:40px 20px 20px;
}
.contact-container{ max-width:800px; margin:0 auto; }
.contact-container h3{ font-size:1.1rem; margin-bottom:15px; color:#fff; text-transform:uppercase; }
.contact-container p{ font-size:.9rem; margin:5px 0; }
.contact-container a{ color:#008080; }
.contact-container a:hover{ text-decoration: underline; }

.linea-separatore{ width:2cm; height:3px; background:#008080; margin:35px auto 0; }

.footer-banner{ background:#000; text-align:center; padding:30px 15px; }
.footer-links{ display:flex; justify-content:center; gap:30px; margin-bottom:15px; }
.footer-links a{ color:#fff; font-weight:600; }
.footer-links a:hover{ color:#aaa; }
.footer-social{ display:flex; justify-content:center; gap:25px; margin-bottom:15px; }
.footer-social a img{ height:18px; filter:brightness(1000%); transition: transform .2s; }
.footer-social a img:hover{ transform: scale(1.2); }
.copy{ color:#aaa; font-size:.9rem; }

/* =====================================================
   RESPONSIVE
===================================================== */

/* ≤ 1024px: alza i servizi */
@media (max-width:1024px){
  .services{ margin-top:40px; }
}

/* ====== DA QUI IN GIÙ: SEZIONE DEVICE COPIATA 1:1 (NON MODIFICATA) ====== */

/* ≤ 900px: mobile principale */
@media (max-width:900px){
  /* header compatto */
  header{
    justify-content: space-between;
    padding: 10px 16px;
    gap: 0;
  }
  .extra, .divider, .social{ display:none; }

  /* burger visibile */
  .burger{ display:flex; }

  /* menu off-canvas */
  .nav-links{
    position: fixed;
    top: 60px;
    right: -100%;
    width: 100%;
    background:#000;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    padding: 20px;
    transition: right .3s ease;
  }
  .nav-links.active{ right:0; }

  /* dropdown dentro al pannello */
  .nav-links details.dd{ width:100%; }
  .nav-links details.dd > summary{ width:100%; padding:12px 10px; }
  .nav-links details.dd .dd-menu{
    position: static;
    background:#2a2a2a;
    border-radius:8px;
    box-shadow:none;
    width:100%;
  }
  .nav-links details.dd .dd-menu li a{ color:#fff; padding:12px 16px; }
  .nav-links details.dd .dd-menu li a:hover{ background:#3a3a3a; }

  /* hero */
  .hero-video{ height:90vh; margin-top:60px; }
  .hero-text{
    position: relative;
    left: 0; top: 50%;
    transform: translateY(-50%);
    text-align: center;
    padding: 0 20px;
    font-size: 1.6rem;
    max-width: 90vw;
    margin: 0 auto;
  }

  /* intro & contenitori */
  .intro-flex{ flex-direction: column; align-items:center; gap:20px; }
  .image-block img{ width:100%; height:auto; margin:20px 0 0; }

  /* servizi */
  .services{
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-top: 30px;
    text-align: center;
  }
  .service{ width:100%; max-width:320px; }

  /* slider mobile */
  .slider{ padding: 10px 0; }
  .slides{ gap: 8px; padding-left: 10px; width: max-content; }
  .gallery-item{
    flex: 0 0 350px !important;
    height: 400px;
    background: #fff;
    padding: 8px;
    border-radius: 8px;
    box-sizing: border-box;
    display: flex; flex-direction: column;
    justify-content:center; align-items:center;
  }
  .gallery-item img{ max-width:100%; max-height:300px; object-fit:contain; margin-bottom:12px; }
  .gallery-item h3{ font-size:.9rem; color:#008080; text-align:center; padding:0 6px; line-height:1.2; }

  /* testi vari */
  .parallax-box h2, .parliamo .content h2{ font-size:1.5rem; text-align:center; }
  .parallax-box p, .parliamo .content p{ font-size:1rem; text-align:center; padding:0 10px; }

  .footer-links, .footer-social{ flex-wrap: wrap; gap: 10px; }
  .cta, .cta-red{ padding:12px 24px; font-size:1rem; margin-top:16px; }
}

/* ≤ 600px: micro rifiniture */
@media (max-width:600px){
  .gallery-section .container{ padding-left:16px; padding-right:16px; }
  .gallery-section h2{ font-size:1.45rem; }
  .gallery-subtitle{ font-size:1.2rem; letter-spacing:.6px; }
  .gallery-description{ font-size:1.2rem; }
}

/* ≤ 500px: (mantieni proporzioni slider) */
@media (max-width:500px){
  .gallery-item{ flex: 0 0 300px !important; height: 380px; }
}

/* ≤ 900px landscape: header compatto */
@media (max-width:900px) and (orientation:landscape){
  header{ height:70px; padding:10px 20px; }
}

/* ===== MOBILE RESET (≤900px) — COPIATO 1:1 ===== */
@media (max-width: 900px){
  /* HEADER compatto e proporzioni come prima */
  header{
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 12px !important;
    height: 60px !important;
    gap: 0 !important;
  }
  .left-container{ gap: 8px !important; }
  .logo img{ height: 30px !important; width: auto !important; }

  /* Mostra il nome “Stefano Della Cerra” su mobile */
  .right-elements{
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .extra{ display: block !important; }
  .extra img{ height: 22px !important; width: auto !important; }
  .divider, .social{ display: none !important; }

  /* Burger ON, menu off-canvas */
  .burger{ display: flex !important; }
  .nav-links{
    position: fixed !important;
    top: 60px !important;
    right: -100% !important;
    width: 100% !important;
    background: #000 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 15px !important;
    padding: 20px !important;
    transition: right .3s ease !important;
  }
  .nav-links.active{ right: 0 !important; }

  /* --- Dropdown dentro al pannello (funziona sia con <details> che con .dropdown) --- */
  /* Variante <details> */
  .nav-links details.dd{ width: 100% !important; }
  .nav-links details.dd > summary{
    width: 100% !important;
    padding: 12px 10px !important;
    color: #fff !important;
  }
  .nav-links details.dd .dd-menu{
    position: static !important;
    background: #2a2a2a !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    width: 100% !important;
  }
  .nav-links details.dd .dd-menu li a{
    color: #fff !important;
    padding: 12px 16px !important;
  }
  .nav-links details.dd .dd-menu li a:hover{ background: #3a3a3a !important; }

  /* Variante .dropdown */
  .nav-links .dropdown > .dropdown-menu{
    position: static !important;
    background: #2a2a2a !important;
    box-shadow: none !important;
    border-radius: 8px !important;
    width: 100% !important;
    display: none; /* chiusa di base */
  }
  .nav-links .dropdown.open > .dropdown-menu{ display: block !important; }
  .nav-links .dropdown-menu li a{
    color: #fff !important;
    padding: 12px 16px !important;
  }
  .nav-links .dropdown-menu li a:hover{ background: #3a3a3a !important; }

  /* HERO/BANNER: dimensioni come prima */
  .hero-video{
    margin-top: 60px !important;  /* spazio sotto l’header */
    height: 90vh !important;      /* come avevi in origine */
  }

  /* Testo sull’hero (centrato e leggibile) */
  .hero-text{
    position: relative !important;
    top: 50% !important;
    left: 0 !important;
    transform: translateY(-50%) !important;
    text-align: center !important;
    padding: 0 20px !important;
    font-size: 1.6rem !important;
    max-width: 90vw !important;
    margin: 0 auto !important;
  }
}

/* (sempre mobile) sposta il nome più a sinistra */
@media (max-width: 900px){
  header{ position: fixed; }                 /* ribadito */
  .right-elements{ position: static; }

  .extra{
    position: absolute;
    left: 68%;            /* aumenta per spostare ancora più a sinistra (es. 55%) */
    transform: translateX(-50%);
    z-index: 1001;
  }
  .extra img{ height: 22px; width: auto; }

  .burger{
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
  }
}

/* === HERO TEXT: forza posizione più bassa su DESKTOP === */
@media (min-width: 901px){
  .hero-video { position: relative !important; }
  .hero-video .container { position: relative !important; }

  .hero-video .container > .hero-text{
    position: absolute !important;
    top: auto !important;          /* ignora il top precedente */
    bottom: 12% !important;        /* ↓ più piccolo = più in basso */
    left: 80px !important;
    transform: none !important;    /* niente translate che la risolleva */
    animation: none !important;    /* evita che l’animazione la sposti di nuovo */
    max-width: 700px !important;
  }
}

/* Mobile: più in basso se serve */
@media (max-width: 900px){
  .hero-text{
    top: auto !important;
    bottom: 14% !important;        /* regola questo valore se serve */
    left: 20px !important;
    transform: none !important;
  }
}

/* === HERO TEXT — POSIZIONAMENTO FINALE === */
.hero-video { position: relative !important; }
.hero-video .hero-text{
  position: absolute !important;
  inset: auto auto 12% 80px !important; /* top right bottom left */
  /* 12% = distanza dal bordo BASSO. Più piccolo => più in basso.
     80px = distanza da SINISTRA. Modifica questi due numeri come vuoi. */
  transform: none !important;
  z-index: 2 !important;
}

/* Mobile (valori diversi) */
@media (max-width: 900px){
  .hero-video .hero-text{
    inset: auto auto 14% 20px !important; /* bottom / left per telefono */
    font-size: 1.6rem !important;
    max-width: 90vw !important;
  }
}

/* (opzionale) nascondi il vecchio blocco, se ancora presente */
.hero-text { display: none !important; }

/* Nuovo overlay testo, semplice e stabile */
.hero-video { position: relative; }

/* larghezza massima del contenuto come nell’header/container */
:root{
  --site-max: 1200px;     /* metti qui la tua max-width reale */
  --caption-offset: 15px; /* distanza dal bordo sinistro del contenuto */
}

/* DESKTOP: la left si ancora al bordo del contenuto centrato */
@media (min-width: 901px){
  .hero-caption{
    position: absolute;
    left: calc( (100vw - min(100vw, var(--site-max))) / 2 + var(--caption-offset) );
    bottom: 52%;           /* altezze come le avevi, regola se vuoi */
    margin: 0;
    color: #fff;
    font-size: 3.5rem;
    font-weight: 600;
    line-height: 1.3;
    text-shadow: 0 4px 10px rgba(0,0,0,.6);
    max-width: 1500px;
    z-index: 2;
    pointer-events: none;
  }
}

/* (il tuo CSS mobile resta com’è; se vuoi anche lì bandiera sx, l’hai già impostato) */


/* Mobile: NON tocco le tue regole esistenti; do solo la resa del nuovo titolo */
@media (max-width: 900px){
  .hero-caption{
    left: 20px;
    right: 20px;      /* per centrare col testo a capo */
    bottom: 14%;
    font-size: 1.6rem;
    text-align: center;
  }
}

/* ===== HERO CAPTION — SOLO MOBILE (≤900px) ===== */
@media (max-width: 900px){
  /* valori predefiniti comodi: puoi ritoccarli */
  .hero-video{
    --caption-left: 40px;   /* sposta orizzontalmente */
    --caption-bottom: 56%;  /* ↑ aumenta per scendere */
  }

  .hero-caption{
    position: absolute;
    left: var(--caption-left);
    right: 20px;             /* mantiene respiro a destra */
    bottom: var(--caption-bottom);
    transform: none;
    text-align: center;
    font-size: 2.6rem;
    line-height: 1.5;
    max-width: 90vw;
    margin: 0 auto;
    color: #fff;
    z-index: 2;
  }
}

/* ===== HERO CAPTION — MOBILE (≤900px) a bandiera sinistra ===== */
@media (max-width: 900px){
  .hero-caption{
    text-align: left;
    left: var(--caption-left, 20px);
    right: auto;                     /* niente ancoraggio a destra */
    bottom: var(--caption-bottom, 16%);
    max-width: calc(100% - 40px);    /* margine di 20px per lato */
    margin: 0;
    transform: none;
  }
}

/* ===== Dropdown più comodo su MOBILE (≤900px) ===== */
@media (max-width: 900px){

  /* Pannello off-canvas scrollabile se la lista è lunga */
  .nav-links{
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Summary "Grafica" più grande e facile da toccare */
  .nav-links details.dd > summary{
    padding: 16px 12px !important;
    min-height: 44px;                 /* target consigliato */
    display: flex;
    align-items: center;
    font-size: 1.05rem;
    line-height: 1.2;
  }

  /* Spazio tra summary e lista */
  .nav-links details.dd .dd-menu{
    margin-top: 6px;
    padding: 6px 0;
  }

  /* Voci della tendina: tap area ampia + separatori */
  .nav-links details.dd .dd-menu li + li{
    border-top: 1px solid rgba(255,255,255,0.12);
  }
  .nav-links details.dd .dd-menu li a{
    display: flex;
    align-items: center;
    padding: 14px 14px !important;    /* ↑ spazio verticale */
    min-height: 44px;                 /* target comodo */
    font-size: 1.02rem;
    line-height: 1.35;
    letter-spacing: 0.2px;
    -webkit-tap-highlight-color: rgba(255,255,255,0.08);
  }
  .nav-links details.dd .dd-menu li a:hover,
  .nav-links details.dd .dd-menu li a:active{
    background: #3a3a3a !important;
  }

  /* (opzionale) Anche le voci principali con più respiro nel pannello */
  .nav-links > a{
    padding: 14px 12px !important;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* Blocca lo scroll della pagina quando il menu è aperto (mobile) */
@media (max-width: 900px){
  body.menu-open{ overflow: hidden; }
}

/* ===== Dropdown desktop — Style #2 (dark glass) ===== */
@media (min-width: 901px){
  body.dd-style-2 .nav-links details.dd{ position: relative; }

  /* Trigger */
  body.dd-style-2 .nav-links details.dd > summary{
    padding: 10px 14px;
    border-radius: 12px;
    transition: background .2s ease, color .2s ease;
  }
  body.dd-style-2 .nav-links details.dd:hover > summary{
    background: rgba(255,255,255,.08);
  }
  body.dd-style-2 .nav-links details.dd .chevron{
    transition: transform .25s ease;
    font-size: .9em;
  }
  body.dd-style-2 .nav-links details.dd[open] > summary .chevron{
    transform: rotate(180deg);
  }

  /* Menu */
  body.dd-style-2 .nav-links details.dd .dd-menu{
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    min-width: 320px;
    padding: 10px;
    border-radius: 14px;
    background: rgba(20,20,20,.96);
    color: #f2f2f2;
    -webkit-backdrop-filter: saturate(160%) blur(10px);
            backdrop-filter: saturate(160%) blur(10px);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow:
      0 20px 60px rgba(0,0,0,.45),
      0 2px 12px rgba(0,0,0,.18);

    opacity: 0;
    transform: translateY(8px) scale(.98);
    transform-origin: 12% 0;
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
    visibility: hidden;
    pointer-events: none;
    z-index: 2000;
  }
  body.dd-style-2 .nav-links details.dd[open] .dd-menu{
    opacity: 1;
    transform: none;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s, 0s, 0s;
  }

  /* Becco */
  body.dd-style-2 .nav-links details.dd .dd-menu::before{
    content: "";
    position: absolute;
    top: -7px; left: 18px;
    width: 14px; height: 14px;
    background: rgba(20,20,20,.96);
    border-left: 1px solid rgba(255,255,255,.08);
    border-top: 1px solid rgba(255,255,255,.08);
    transform: rotate(45deg);
    box-shadow: -2px -2px 2px rgba(0,0,0,.06);
  }

  /* Voci */
  body.dd-style-2 .nav-links details.dd .dd-menu li{ list-style: none; }
  body.dd-style-2 .nav-links details.dd .dd-menu li + li{
    border-top: 1px solid rgba(255,255,255,.06);
  }
  body.dd-style-2 .nav-links details.dd .dd-menu a{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    color: #eaeaea;
    text-decoration: none;
    transition: background .16s ease, color .16s ease;
  }
  body.dd-style-2 .nav-links details.dd .dd-menu a:hover{
    background: rgba(255,255,255,.08);
  }
  body.dd-style-2 .nav-links details.dd .dd-menu a:focus-visible{
    outline: 2px solid var(--accent, #00ABAB);
    outline-offset: 2px;
  }
  body.dd-style-2 .nav-links details.dd .dd-menu a[aria-current="page"]{
    background: rgba(0,171,171,.18);
    color: #bff;
    font-weight: 700;
  }

  /* (opzionale) 2 colonne: aggiungi class="two-cols" alla <ul class="dd-menu"> */
  body.dd-style-2 .nav-links details.dd .dd-menu.two-cols{
    display: grid;
    grid-template-columns: repeat(2, minmax(160px, 1fr));
    gap: 4px;
    padding: 10px;
  }
  body.dd-style-2 .nav-links details.dd .dd-menu.two-cols li + li{
    border-top: none;
  }

  /* Drawer mobile: crea spazio "fuori" per chiudere col tap */
@media (max-width: 900px){
  .nav-links{
    width: min(84vw, 360px) !important;     /* prima era 100% */
    height: calc(100vh - 60px) !important;  /* 60px = altezza header mobile */
    right: -100% !important;
    box-shadow: -20px 0 50px rgba(0,0,0,.35);
  }
  .nav-links.active{ right: 0 !important; }

  /* Backdrop per il tap fuori (se già presente, lascia così) */
  .nav-backdrop{
    position: fixed;
    top: 60px; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.4);
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
    z-index: 1000;
  }
  .nav-backdrop.visible{ opacity: 1; pointer-events: auto; }

  header{ z-index:1002; }
  .nav-links{ z-index:1001; }
  body.menu-open{ overflow:hidden; }
}


/* === Desktop: tendina a sfioramento stabile === */
@media (min-width: 901px){
  .nav-links details.dd{ position: relative; }

  /* Ponte invisibile tra summary e menu: niente più chiusure mentre scendi col mouse */
  .nav-links details.dd::after{
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    height: 10px;           /* spazio ponte: regola se vuoi */
  }

  /* Menu overlay (con piccolo offset sotto il summary) */
  .nav-links details.dd .dd-menu{
    position: absolute;
    top: calc(100% + 10px); /* deve combaciare con l'altezza del ponte ↑ */
    left: 0;
    min-width: 240px;
    margin: 0; padding: 8px 0;
    list-style: none;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0,0,0,.22);
    display: none;          /* chiuso di base */
    z-index: 2000;
  }

  /* Apri la tendina se il mouse è su tutto il <details> (summary + ponte + menu) */
  .nav-links details.dd:hover .dd-menu{
    display: block;
  }

  /* (opzionale) freccetta che ruota quando è aperto via hover */
  .nav-links details.dd:hover .chevron{
    transform: rotate(180deg);
    transition: transform .2s ease;
  }
}

@media (min-width: 901px){


  /* animazione morbida di apertura */
  .nav-links details.dd .dd-menu{
    display: block;             /* rimane gestito da :hover/[open], ma… */
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    visibility: hidden;
  }
  .nav-links details.dd:hover .dd-menu,
  .nav-links details.dd[open] .dd-menu{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
  }

  /* item più comodi da cliccare */
  .nav-links details.dd .dd-menu li a{
    padding: 12px 18px;
    line-height: 1.2;
  }
  .nav-links details.dd .dd-menu li + li a{
    border-top: 1px solid rgba(0,0,0,.06);
  }
  .nav-links details.dd .dd-menu li a:hover{
    background: #f7f7f9;
  }
 }
}

/* MOBILE portrait: centra il bottone senza usare transform */
@media (max-width: 600px) and (orientation: portrait){
  :root { --cta-lift: 25px; } /* altezza sopra il bordo */

  .cta-progetto {
    position: relative;
    margin-top: 0 !important;
    padding-top: calc(var(--cta-lift) + 12px);
    text-align: center;
  }

  .cta-progetto .btn-accent {
    position: absolute !important;
    top: calc(-1 * var(--cta-lift)) !important;

    /* centratura robusta, senza translate */
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: max-content;
    max-width: 90vw;
    white-space: nowrap;

    /* neutralizza qualunque transform precedente */
    transform: none !important;
  }
}

/* BLOCCA hover-lift su dispositivi touch */
@media (hover: hover) {
  .cta-progetto .btn-accent:hover {
    transform: none !important;
  }
}

/* DESKTOP: piccolo alzo (se vuoi mantenerlo) */
@media (min-width: 901px){
  .cta-progetto {
    margin-top: -28px;
  }
}

/* SOLO la CTA della sezione */
.cta-progetto .btn-accent {
  background: #008080 !important; /* blu / petrolio */
  color: #fff !important;
}


/* Centra "INTRODUZIONE" + le 3 card servizi SOLO su mobile */
@media (max-width: 900px){
  /* 1) blocco intro: testo + immagine davvero al centro */
  .intro-section .container.intro-flex{
    display: flex;
    flex-direction: column;
    align-items: center;      /* centro orizzontale */
    text-align: center;       /* titoli e paragrafi centrati */
    padding-left: 16px;       /* padding simmetrico */
    padding-right: 16px;
    margin-left: auto;
    margin-right: auto;
  }
  .intro-section .image-block img{
    display: block;
    margin: 0 auto;           /* immagine centrata */
    height: auto;
  }

  /* 2) blocco servizi: elimina offset e centra le card */
  .intro-section .servizi-container{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
  .intro-section .services{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;  /* centra la riga di card */
    align-items: stretch;
    gap: 16px;
  }
  .intro-section .services .service{
    display: block;
    width: 92%;
    max-width: 320px;         /* card stretta e centrata */
    margin: 0 auto;           /* centratura finale */
    text-align: center;
  }
  .intro-section .services .service img{
    display: block;
    margin: 0 auto;           /* icone centrate */
    height: auto;
  }
}

/* Nascondi l'immagine "mano-08.png" su mobile (intro-section) */
@media (max-width: 900px){
  .intro-section .image-block{
    display: none !important;   /* niente spazio vuoto */
  }
}