/* 2Pdrone mobile-only layer: loaded with media attr AND gated by media query */
@media (max-width: 900px){
  /* Containers */
  .shell, .container, .wrap{ width:min(92vw, 680px); margin-inline:auto; }

  /* Grids collapse */
  .grid-3, .grid.three, .three-col{ grid-template-columns:1fr !important; gap:28px !important; }
  .grid-2, .grid.two, .two-col{ grid-template-columns:1fr !important; gap:28px !important; }

  /* Typo scale for small screens */
  h1{ font-size: clamp(26px, 6vw, 34px) !important; line-height:1.15; }
  h2{ font-size: clamp(20px, 5vw, 28px) !important; line-height:1.18; }
  h3{ font-size: clamp(18px, 4.5vw, 24px) !important; line-height:1.2; }
  p, li{ font-size: 16px !important; }

  /* Form tap targets & iOS zoom fix */
  input, select, textarea{ font-size:16px !important; }
  button, .btn, input[type=submit], a.btn{ min-height:48px !important; }

  /* Mobile nav: hide desktop links; toggle appears via JS */
  header nav .nav-links{ display:none !important; }
  .nav-toggle{
    display:flex !important; align-items:center; justify-content:center;
    width:48px; height:48px; margin-right:12px;
    border-radius:12px; border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.04); color:#fff; cursor:pointer;
  }
  header nav{ min-height:72px !important; }
  header nav .brand img{ height:72px !important; transform:none !important; margin-left:12px !important; }

  /* Overlay menu */
  .mobile-menu{
    position:fixed; inset:0;
    padding: calc(16px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));
    background: rgba(13,17,23,.98);
    backdrop-filter: blur(6px);
    display:none; flex-direction:column; gap:12px; z-index:9998;
  }
  body.nav-open .mobile-menu{ display:flex; }
  .mobile-menu a{
    display:block; padding:14px 12px; font-size:18px; border-radius:12px;
    border:1px solid rgba(255,255,255,.12); text-decoration:none; color:#fff;
  }
  .mobile-menu a:active{ background:rgba(255,255,255,.08); }

  /* Sticky CTA mobile (created via JS) */
  .mobile-stick{position:fixed;left:0;right:0;bottom:calc(56px + env(safe-area-inset-bottom) + 8px);
    display:flex;gap:10px;justify-content:center;z-index:9998;pointer-events:none}
  .mobile-stick a{pointer-events:auto; display:inline-flex; align-items:center; justify-content:center;
    min-height:48px; padding:10px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:#fff; text-decoration:none; font-weight:700}
  .mobile-stick a:active{ transform: translateY(1px); }
}

/* Ensure toggle hidden by default on desktop */
.nav-toggle{ display:none; }


/* === Mobile header fixed + shrink === */
@media (max-width: 900px){
  :root{ --navH-mobile: 72px; }
  header{ position: fixed; top:0; left:0; right:0; z-index: 1000; }
  body{ padding-top: var(--navH-mobile); }
  body.scrolled header nav{ min-height: 60px !important; }
  body.scrolled header nav .brand img{ height: 60px !important; transition: height .25s ease; }
}


/* === Mobile header fade-in over hero === */
@media (max-width: 900px){
  header{
    position: fixed; top:0; left:0; right:0;
    z-index: 9999 !important;
    transition: opacity .25s ease, transform .25s ease;
  }
  /* Hidden state at page start on homepage */
  body.header-hidden header{ opacity:0; transform: translateY(-6px); pointer-events:none; }
  /* Visible state after slight scroll */
  body.header-visible header{ opacity:1; transform:none; }
  /* Pad content only when header is visible */
  body.header-visible{ padding-top: var(--navH-mobile, 72px); }
  body.header-hidden{ padding-top: 0; }

  /* Ensure hero video stays below header */
  .vertical-hero{ position: relative; z-index: 1; }
  .vertical-hero video,
  .vertical-hero .video-bg,
  .vertical-hero .bg-video{ z-index: 0 !important; }
}


/* === Strong header layering & defaults (mobile) === */
@media (max-width: 900px){
  header{
    position: fixed; top:0; left:0; right:0;
    z-index: 10000 !important;
    will-change: opacity, transform;
    transition: opacity .25s ease, transform .25s ease;
  }
  body:not(.is-home){ padding-top: var(--navH-mobile, 72px); }
  body:not(.is-home) header{ opacity:1; transform:none; pointer-events:auto; }

  body.is-home.header-hidden header{ opacity:0; transform: translateY(-8px); pointer-events:none; }
  body.is-home.header-visible header{ opacity:1; transform:none; pointer-events:auto; }
  body.is-home.header-visible{ padding-top: var(--navH-mobile, 72px); }
  body.is-home.header-hidden{ padding-top: 0; }

  .vertical-hero{ position: relative; z-index: 1; }
  .vertical-hero video,
  .vertical-hero .video-bg,
  .vertical-hero .bg-video{ z-index: 0 !important; }
}

/* === STABLE: header always visible on mobile (no fade), strong layering === */
@media (max-width: 900px){
  :root{ --navH-mobile: 72px; }
  header{ position: fixed; top:0; left:0; right:0; z-index: 100000 !important; opacity:1 !important; transform:none !important; }
  body{ padding-top: var(--navH-mobile,72px) !important; }
  .vertical-hero{ position:relative; z-index:1; }
  .vertical-hero video,
  .vertical-hero .video-bg,
  .vertical-hero .bg-video{ z-index:0 !important; }
}


/* === FORCE-PIN HEADER ON MOBILE (sticky + fixed fallback) === */
@media (max-width: 900px){
  /* Try sticky first for custom scroll containers */
  body > header,
  main > header,
  #app > header,
  .page > header,
  .content > header,
  [data-scroll-container] > header{
    position: sticky !important;
    top: 0 !important;
  }

  /* Fixed fallback with ultra z-index */
  header{
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    z-index: 100000 !important;
    transform: none !important;
  }

  /* Prevent ancestor transforms from detaching fixed elements visually */
  html, body{ transform: none !important; }

  /* Keep layout from jumping */
  :root{ --navH-mobile: 72px; }
  body{ padding-top: var(--navH-mobile,72px) !important; }
}


/* === 2P OVERRIDE: header non fisso e nessuno spazio in alto su mobile === */
@media (max-width: 900px){
  body, html{
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  header{
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: 100 !important;
    transform: none !important;
  }
}


/* HERO MOBILE LAYOUT (no changes to desktop) */
@media (max-width: 900px){
  .hero{
    align-items:flex-start;
    padding:18vh 5vw 20vh;
    text-align:center;
  }
  .hero-inner{
    max-width:100%;
    padding:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
  }
  .hero-inner h1{
    margin:0;
  }
  .hero-inner p{
    max-width:24ch;
  }
  .hero-cta{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
  }
  .hero-cta .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 18px;
    border-radius:999px;
    font-size:14px;
    font-weight:600;
    min-width:150px;
    border:1px solid rgba(255,255,255,.9);
  }
  .hero-cta .btn.outline{
    background:transparent;
    color:#fff;
  }
}

/* Ensure hero video fills background on mobile */
@media (max-width: 900px){
  .hero-video{
    height:100%;
    width:100%;
    object-fit:cover;
  }
}


/* ===== Custom mobile tweaks (<=900px) ===== */
@media (max-width: 900px){

  /* Hero full-screen video */
  .hero{
    min-height: 100vh;
    padding: 0 5vw;
    align-items: center;
  }

  /* Center logo in top bar, keep menu button on the right */
  header nav{
    position: relative;
  }
  header nav .brand{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0 !important;
  }
  header nav .nav-toggle{
    margin-left: auto;
    margin-right: 12px;
  }

  /* Slide-in menu from the right */
  .mobile-menu{
    inset: 0;
    left: auto;
    width: 80vw;
    max-width: 360px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transform: translateX(100%);
    transition: transform .3s ease;
    align-items: stretch;
  }
  body.nav-open .mobile-menu{
    transform: translateX(0);
  }

  /* Hide footer / cookie strip on first screen (mobile only) */
  footer{
    display: none;
  }
}


/* === Extra mobile tuning: bigger logo & top dropdown menu === */
@media (max-width: 900px){

  /* Bigger centered logo */
  header nav{ min-height: 84px !important; }
  header nav .brand img{
    height: 95px !important;
  }

  /* Menu panel drops from top, half screen height */
  .mobile-menu{
    left: 0;
    right: 0;
    width: 100vw;
    max-width: none;
    height: 50vh;
    transform: translateY(-104%);
    opacity: 0;
    transition: transform .45s ease, opacity .35s ease;
  }
  body.nav-open .mobile-menu{
    transform: translateY(0);
    opacity: 1;
  }
}


/* === 2P FINAL MOBILE TWEAK: logo bigger + soft menu animation === */
@media (max-width: 900px){
  /* Logo: uniforme e più grande ovunque */
  header nav{
    min-height: 96px !important;
  }
  header nav .brand img{
    height: 96px !important;
    transform: none !important;
    margin-left: 0 !important;
  }

  /* Menu overlay morbido, full-screen */
  .mobile-menu{
    position: fixed;
    inset: 0;
    width: 100vw;
    max-width: none;
    height: 100vh;
    padding: calc(18px + env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom));
    background: rgba(5, 10, 18, 0.97);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: stretch;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
  }
  body.nav-open .mobile-menu{
    opacity: 1;
    pointer-events: auto;
  }
}