@media (max-width: 980px) {

    /* ==========================================================================
       UTILITY GLOBALI MOBILE
       ========================================================================== */
    .desktop-only {
        display: none !important;
    }

    /* ==========================================================================
       HEADER
       ========================================================================== */
    .nav-desktop,
    .contact-link {
        display: none !important;
    }

    .burger-menu {
        display: block;
        padding: 10px; /* Area di tocco adeguata */
    }

    .blend-header {
        /* Calcola lo spazio necessario per la notch/status bar */
        padding: calc(20px + env(safe-area-inset-top)) 4vw 20px;
    }

    

/* Impedisce al menu mobile di esistere su schermi desktop */
@media screen and (min-width: 981px) {
    #bruyer-mobile-menu {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}



/* ==========================================================================
   AWWWARDS MOBILE MENU - IL VERO OVERLAY (NEW)
   ========================================================================== */

#aww-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background-color: #000000 !important;
  color: #ffffff;
  font-family: 'Montserrat', sans-serif !important;
  width: 100vw;
  height: 100dvh;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  
  /* Maschera per l'apertura a tendina */
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.8s cubic-bezier(0.77, 0, 0.175, 1), 
              opacity 0.6s ease, 
              visibility 0s linear 0.8s;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#aww-mobile-menu.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  clip-path: inset(0 0 0 0) !important;
  transition: clip-path 0.8s cubic-bezier(0.77, 0, 0.175, 1), 
              opacity 0.5s ease, 
              visibility 0s linear 0s;
}

/* 2. IMPALCATURA INTERNA */
.aww-menu-inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: calc(30px + env(safe-area-inset-top)) 6vw calc(40px + env(safe-area-inset-bottom));
}

/* 3. HEADER (Logo e chiusura) */
.aww-menu-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8vh;
}

.aww-logo-tag {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.915);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s;
}

#aww-mobile-menu.is-open .aww-logo-tag {
  opacity: 1;
  transform: translateY(0);
}

#aww-menu-close {
  background: transparent;
  border: none;
  padding: 10px;
  cursor: pointer;
}

#aww-menu-close svg {
  width: 24px;
  height: 24px;
  display: block;
}

/* 4. NAVIGAZIONE PRINCIPALE */
.aww-menu-nav {
  display: flex;
  flex-direction: column;
  gap: 3.5vh;
  margin-top: auto;
  margin-bottom: 2vh; /* Respiro prima della CTA */
}

.aww-nav-item {
  overflow: hidden;
}

.aww-nav-link {
  display: block;
  font-family: 'Montserrat', sans-serif !important;
  font-size: clamp(38px, 10vw, 56px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #ffffff;
  text-decoration: none;
  
  /* Animazione testi che salgono */
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.7s ease;
}

#aww-mobile-menu.is-open .aww-nav-item:nth-child(1) .aww-nav-link { transition-delay: 0.1s; transform: translateY(0); opacity: 1; }
#aww-mobile-menu.is-open .aww-nav-item:nth-child(2) .aww-nav-link { transition-delay: 0.2s; transform: translateY(0); opacity: 1; }
#aww-mobile-menu.is-open .aww-nav-item:nth-child(3) .aww-nav-link { transition-delay: 0.3s; transform: translateY(0); opacity: 1; }

.aww-sub-links a {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 15px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.813);
  text-decoration: none;
}

/* 5. BOTTOM GRID (LOC, CONNECT) */
.aww-menu-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: auto;
  
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease 0.5s, transform 0.7s cubic-bezier(0.25, 1, 0.5, 1) 0.5s;
}

#aww-mobile-menu.is-open .aww-menu-bottom {
  opacity: 1;
  transform: translateY(0);
}

.aww-label {
  display: block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: 12px;
}

.aww-bottom-col p, .aww-social-links a {
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  text-decoration: none;
}

.aww-social-links {
  display: flex;
  gap: 16px;
}

/* --- ACCORDION SERVICES --- */
.aww-accordion-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.aww-accordion-icon {
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  opacity: 0.5;
}

/* Rotazione icona quando aperto */
.aww-accordion-trigger[aria-expanded="true"] .aww-accordion-icon {
  transform: rotate(45deg); 
}

/* Struttura nascosta per animazione altezza fluida */
.aww-sub-links-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.aww-sub-links-wrapper.is-open {
  grid-template-rows: 1fr;
}

.aww-sub-links {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Il margine viene applicato dentro l'elemento nascosto per non creare salti */
  padding-top: 0; 
  transition: padding-top 0.5s ease;
}

.aww-sub-links-wrapper.is-open .aww-sub-links {
  padding-top: 24px;
}

/* --- CTA BUTTON SQUADRATO (NO PILLOLA) --- */
.aww-cta-wrap {
  margin-top: 2vh;
  margin-bottom: 6vh;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1) 0.4s, opacity 0.7s ease 0.4s;
}

#aww-mobile-menu.is-open .aww-cta-wrap {
  transform: translateY(0);
  opacity: 1;
}

.aww-cta-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 20px 24px;
  border: 1px solid rgba(255, 255, 255, 0.2); /* Bordo sottile ed elegante */
  border-radius: 0; /* Spigoli vivi, nessuna pillola */
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: none;
  background: transparent;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.aww-cta-button:active {
  background-color: #ffffff;
  color: #000000;
}




/* --------------------------------------------------------------------------
   2. TOP META
   -------------------------------------------------------------------------- */
.mobile-menu-topmeta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 40px;
    
    transform: translateY(10px);
    opacity: 0;
    transition: transform 0.4s ease 0.1s, opacity 0.4s ease 0.1s;
}

.mobile-menu-overlay.is-open .mobile-menu-topmeta {
    transform: translateY(0);
    opacity: 1;
}

.mobile-menu-kicker {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--text-white);
}

.mobile-menu-status {
    font-size: 12px;
    color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   3. MAIN NAVIGATION & SUBMENU
   -------------------------------------------------------------------------- */
.mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 40px;
}

.mobile-link,
.mobile-submenu-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    background: transparent;
    border: none;
    text-align: left;
    font-family: inherit;
    font-size: clamp(36px, 10vw, 56px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--text-white);
    text-decoration: none;
    cursor: pointer;
    
    transform: translateY(20px);
    opacity: 0;
    transition: color 0.3s ease, transform 0.5s ease, opacity 0.5s ease;
}

.mobile-link:hover,
.mobile-submenu-toggle:hover {
    color: var(--text-muted);
}

.mobile-menu-overlay.is-open .mobile-link,
.mobile-menu-overlay.is-open .mobile-submenu-toggle {
    transform: translateY(0);
    opacity: 1;
}

/* Delay a cascata */
.mobile-menu-overlay.is-open .mobile-submenu-item { transition-delay: 0.15s; }
.mobile-menu-overlay.is-open .mobile-link:nth-of-type(1) { transition-delay: 0.25s; }

/* Gestione Submenu */
.mobile-submenu-item {
    display: flex;
    flex-direction: column;
}

.mobile-submenu-icon {
    font-size: 32px;
    font-weight: 300;
    transition: transform 0.3s ease;
}

.mobile-submenu-toggle[aria-expanded="true"] .mobile-submenu-icon {
    transform: rotate(45deg);
}

.mobile-submenu {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease;
}

.mobile-submenu-toggle[aria-expanded="true"] + .mobile-submenu {
    grid-template-rows: 1fr;
}

.mobile-submenu > * {
    overflow: hidden;
}

.mobile-submenu a:first-child { margin-top: 12px; }
.mobile-submenu a:last-child { margin-bottom: 12px; }

.mobile-sublink {
    display: block;
    padding: 8px 0;
    font-size: 14px;
    color: var(--text-muted);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.3s ease;
}

.mobile-sublink:hover {
    color: var(--text-white);
}

/* --------------------------------------------------------------------------
   4. CTA LINK (Inside Nav)
   -------------------------------------------------------------------------- */
.mobile-cta-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding: 18px 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    text-decoration: none;
    
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.5s ease 0.35s, opacity 0.5s ease 0.35s, background-color 0.3s ease;
}

.mobile-menu-overlay.is-open .mobile-cta-link {
    transform: translateY(0);
    opacity: 1;
}

.mobile-cta-link:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.mobile-cta-text {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--text-white);
}

.mobile-cta-icon {
    color: var(--text-white);
    font-weight: bold;
}

/* --------------------------------------------------------------------------
   5. BOTTOM FOOTER (The White Card)
   -------------------------------------------------------------------------- */
.mobile-menu-footer {
    margin-top: auto;
    background-color: var(--bg-card);
    color: var(--text-black);
    padding: 32px 24px;
    border-radius: 4px;
    
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.5s ease 0.45s, opacity 0.5s ease 0.45s;
}

.mobile-menu-overlay.is-open .mobile-menu-footer {
    transform: translateY(0);
    opacity: 1;
}

.mobile-footer-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mobile-footer-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--text-card-muted);
}

.mobile-footer-inline {
    display: flex;
    gap: 16px;
}

.mobile-footer-link {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-black);
    text-decoration: none;
    transition: color 0.3s ease;
}

.mobile-footer-link:hover {
    color: var(--text-card-muted);
}

.mobile-footer-note p {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.7);
    margin: 0;
}

    /* ==========================================================================
       HERO SECTION
       ========================================================================== */
    #hero.hero-premium {
        /* svh previene i ridimensionamenti e i "salti" durante lo scroll */
        height: 100svh;
        padding: calc(80px + env(safe-area-inset-top)) 4vw calc(30px + env(safe-area-inset-bottom));
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .hero-video {
        /* Compensa il cambio di aspect ratio su schermi verticali */
        transform: scale(1.15); 
    }

    .hero-title {
        font-size: clamp(34px, 10vw, 52px) !important;
        font-weight: 500;
        line-height: 1.05 !important;
        letter-spacing: -0.05em !important;
        max-width: 100% !important;
        margin-bottom: 8vh !important;
        /* Forza visibilità per aggirare bug iniziali di SplitType/GSAP su mobile */
        visibility: visible !important; 
    }

    .hero-bottom-bar {
        /* Layout fluido a due estremità */
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-end !important;
        width: 100%;
        opacity: 1 !important;
        transform: none !important;
    }

    .hero-col-left {
        justify-content: flex-start;
    }

    .hero-col-center {
        justify-content: flex-end !important;
    }

    /* Testo puro, identico alla versione desktop */
    .hero-col-center a {
        font-size: 11px;
        font-weight: 500;
        letter-spacing: -0.02em;
        padding: 0;
        background: transparent;
        border: none;
        text-decoration: none;
        color: inherit;
    }




/* ==========================================================================
   ABOUT SECTION MOBILE
   ========================================================================== */
    .about-premium { 
        padding: 100px 4vw; 
    }
    
    .about-grid { 
        grid-template-columns: 1fr; 
        gap: 50px; /* Spazio verticale tra i metadati e il testo grande */
    }

    /* Modifica cruciale: griglia a due colonne per affiancare i meta-block */
    .about-meta { 
        display: grid;
        grid-template-columns: 1fr 1fr; 
        gap: 20px; 
    }

    .about-text-container { 
        padding-left: 0; 
    }




/* ==========================================================================
   EXPERTISE SECTION MOBILE (SERVICES)
   ========================================================================== */
    /* Struttura a colonna singola */
    .expertise-container {
        flex-direction: column;
    }

    /* Riposizionamento del blocco titolo */
    .expertise-left {
        width: 100%;
        position: relative;
        bottom: auto;
        align-self: flex-start;
        margin-bottom: 8vh;
    }

    .expertise-headline {
        font-size: clamp(40px, 12vw, 60px);
        letter-spacing: -0.05em;
    }

    /* Spazio laterale simmetrico per accogliere le parentesi animate senza sbavature */
    .expertise-right {
        width: 100%;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
        box-sizing: border-box;
    }

    .e-item {
        padding: 0 0 4vh 0;
    }

    .e-title-wrapper {
        margin-left: 0 !important;
    }

    .e-title {
        font-size: 20px;
    }

    /* Ripristino parentesi per l'effetto di animazione allo scroll */
    .left-bracket, 
    .right-bracket {
        display: inline-block !important;
    }

    .e-subtext-inner {
        padding-top: 8px;
    }

    /* Sblocco della larghezza massima per far fluire il testo fino al nuovo margine destro */
    .e-subtext {
        max-width: 100% !important;
    }

    .e-arrow {
        color: #111111;
    }

    /* ---------------------------------------------------
       STATO ATTIVO (SCROLL-SPY) CHE SOSTITUISCE L'HOVER
       --------------------------------------------------- */
    .e-item.is-active .e-title {
        color: #ff2a00;
    }
    
    .e-item.is-active .left-bracket,
    .e-item.is-active .right-bracket {
        opacity: 1;
        transform: translateX(0);
    }
    
    .e-item.is-active .e-link {
        color: #ff2a00;
    }
    
    .e-item.is-active .e-arrow {
        transform: translateX(5px);
    }




/* ==========================================================================
       FEATURED REVEAL MOBILE (TETRIS GRID)
       ========================================================================== */
    #featured.c-featured-reveal .c-featured-reveal__grid-container {
        display: flex !important;
        padding: 0 4vw !important;
        opacity: 1 !important;
    }

    #featured.c-featured-reveal .c-featured-reveal__grid {
        width: min(560px, 92vw);
        height: min(78vh, 760px);
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1.15fr 0.85fr 0.65fr;
        gap: 12px;
    }

    /* IL FIX: Annulliamo le proporzioni del PC e sblocchiamo il buco centrale */
    #featured.c-featured-reveal .c-featured-reveal__dummy { 
        grid-column: 1 / 3; 
        grid-row: 1 / 2; 
        width: 100% !important; 
        height: 100% !important; 
        aspect-ratio: auto !important; /* <--- IL SEGRETO È QUI */
        top: 0 !important;
    }

    /* Forza le immagini a riempire l'altezza delle righe della griglia */
    #featured.c-featured-reveal .c-featured-reveal__img {
        height: 100% !important; 
    }
    
    /* Foto riorganizzate in basso */
    .f-t1 { grid-column: 1 / 2; grid-row: 2 / 3; } 
    .f-t2 { grid-column: 2 / 3; grid-row: 2 / 3; } 
    .f-t4 { grid-column: 1 / 2; grid-row: 3 / 4; } 
    .f-t5 { grid-column: 2 / 3; grid-row: 3 / 4; }

    /* Estetica del testo */
    .c-featured-reveal__caption {
        left: 4vw !important;
        bottom: 4vw !important;
        max-width: 85% !important;
    }
    
    .c-featured-reveal__text {
        font-size: 14px !important;
    }





/* ==========================================================================
       8. FAQ SECTION MOBILE
       ========================================================================== */
    .faq-section {
        padding: 10vh 4vw !important;
    }

    .faq-headline {
        font-size: clamp(32px, 8vw, 48px) !important;
        line-height: 1.05 !important;
        max-width: 100% !important; /* Su mobile deve prendere tutta la larghezza */
        margin-bottom: 6vh !important;
        letter-spacing: -0.04em !important;
    }

    .faq-header {
        padding: 2.5vh 0 !important;
    }

    .faq-title {
        font-size: clamp(20px, 5vw, 24px) !important;
        text-align: left;
        padding-right: 15px; /* Evita che il testo si sovrapponga all'icona SVG */
    }

    .faq-inner p {
        max-width: 100% !important; /* Sblocca il limite dell'85% del PC */
        font-size: 14px !important;
        padding-bottom: 3vh !important;
    }



    /* ==========================================================================
   FOOTER MOBILE — EDITORIAL LUXURY / MY VERSION
   Da incollare dentro il media query mobile
   ========================================================================== */

.site-footer {
    background: #fff !important;
    color: #111 !important;
    padding: 12vh 5vw 0 !important;
    position: relative;
    overflow: hidden;
}

/* layout mobile: non "3 colonne compresse", ma stack elegante */
.footer-grid-custom {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin-bottom: 6vh !important;
}

/* tutte le colonne allineate uguali */
.f-col-nav,
.f-col-info,
.f-col-social {
    width: 100% !important;
    align-items: flex-start !important;
    text-align: left !important;
}

/* prima colonna: nav protagonista */
.f-col-nav {
    padding-bottom: 4vh !important;
    margin-bottom: 4vh !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}

/* seconda colonna: info più leggere */
.f-col-info {
    padding-bottom: 3.2vh !important;
    margin-bottom: 3.2vh !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}

/* terza colonna: social molto minimal */
.f-col-social {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    border-bottom: none !important;
}

/* eventuale piccola label sopra le sezioni */
.site-footer .footer-label,
.site-footer .footer-small-title,
.site-footer .eyebrow {
    display: block;
    margin-bottom: 14px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: rgba(17,17,17,0.34) !important;
}

/* NAV PRINCIPALE */
.f-nav-links {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.f-nav-links a {
    font-size: clamp(22px, 6.2vw, 30px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.045em !important;
    color: #111 !important;
    text-decoration: none !important;
    opacity: 0.94;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.f-nav-links a:active {
    opacity: 1;
    transform: translateX(3px);
}

/* INFO */
.info-chunk {
    margin-bottom: 18px !important;
}

.info-chunk:last-child {
    margin-bottom: 0 !important;
}

.info-chunk p {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    letter-spacing: -0.01em !important;
    color: rgba(17,17,17,0.62) !important;
    max-width: 28ch !important;
}

/* SOCIAL / LINK SECONDARI */
.f-col-social a,
.f-col-social p,
.f-col-social span {
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: rgba(17,17,17,0.7) !important;
    text-decoration: none !important;
}

/* se hai una lista social */
.f-col-social .f-nav-links,
.f-col-social .social-links,
.f-col-social .footer-social-links {
    gap: 10px !important;
}

.f-col-social a:active {
    opacity: 1;
    transform: translateX(2px);
}

/* BOTTOM BAR */
.footer-bottom-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 4vh 0 3vh !important;
    margin-top: 5vh !important;
    border-top: 1px solid rgba(0,0,0,0.08) !important;
}

.footer-bottom-bar p,
.footer-bottom-bar span {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    color: rgba(17,17,17,0.42) !important;
}

.legal-links {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 14px !important;
}

.legal-links a {
    font-size: 12px !important;
    line-height: 1.4 !important;
    color: rgba(17,17,17,0.5) !important;
    text-decoration: none !important;
}

.footer-huge-logo {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.footer-logo-svg {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* respiro finale */
.site-footer::after {
    content: "";
    display: block;
    height: max(10px, env(safe-area-inset-bottom));
}

/* sicurezza colori */
.site-footer a,
.site-footer p,
.site-footer span,
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4 {
    color: inherit !important;
}






   /* ==========================================================================
   CINEMATOGRAPHY HERO MOBILE - VERSIONE DEFINITIVA
   ========================================================================== */
.service-parallax-wrapper {
    height: auto !important;
    background-color: #050505;
    position: relative;
    overflow: hidden;
}

.service-parallax-bg {
    height: 120% !important; 
    top: -10% !important;
    position: absolute;
    width: 100%;
}

/* BLINDAGGIO HERO SERVIZI MOBILE */
.service-hero-screen .hero-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* Forza a sinistra */
    justify-content: flex-end !important;
    text-align: left !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    left: 0 !important;
    position: relative !important;
    inset: auto !important; /* Annulla l'inset: 0 della griglia photography */
}

.service-hero-screen .hero-title {
    text-align: left !important;
    margin-left: 0 !important;
    width: 100% !important;
    display: block !important;
}

/* Fix per le parole di SplitType che potrebbero ereditare il centraggio */
.service-hero-screen .hero-title .word {
    display: inline-block !important;
    text-align: left !important;
}

/* FIX: Layout orizzontale a due estremità */
.service-hero-screen .hero-bottom-bar {
    display: flex !important;
    flex-direction: row !important; /* Mette gli elementi in linea */
    justify-content: space-between !important; /* Spinge social a sx e label a dx */
    align-items: flex-end !important; /* Allinea alla base */
    width: 100% !important; /* Permette al space-between di funzionare */
    opacity: 1 !important;
    transform: none !important;
}

.service-hero-screen .hero-col-center {
    order: 0 !important; /* Ripristina l'ordine naturale */
    text-align: right !important; /* Allinea il testo all'estremità destra */
}

.service-hero-screen .hero-col-center span {
    font-size: 10px !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

/* --- SEZIONE APPROCCIO SUBITO SOTTO --- */
.service-approach-screen {
    min-height: auto !important;
    padding: 8vh 6vw 12vh 6vw !important;
    position: relative;
    z-index: 2;
}

.approach-label {
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    margin-bottom: 12px !important;
    display: block !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

.approach-text {
    font-size: clamp(20px, 6vw, 28px) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
}

/* ==========================================================================
   CAPABILITIES (CINE-LIST-SECTION) MOBILE - OTTIMIZZAZIONE MARGINI
   ========================================================================== */
.cine-list-section {
    /* Mantieni padding verticale originale, aggiungi rientro laterale */
    padding: 80px 6vw !important; 
}

.cine-list-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}

.cine-list-header {
    margin-bottom: 40px !important;
}

/* Allineamento della lista */
.cine-list-wrapper {
    width: 100% !important;
}

.cine-list-item {
    /* Manteniamo la struttura PC (flex o grid che sia) ma con padding interno */
    padding: 30px 0 !important;
    display: flex !important;
    flex-direction: column !important; /* Stack necessario per lo spazio stretto del mobile */
    align-items: flex-start !important;
    gap: 10px !important;
}

.cine-item-right {
    width: 100% !important;
}

.cine-desc {
    /* Riduce la larghezza del testo per non farlo "sparare" troppo a destra */
    max-width: 100% !important;
    line-height: 1.4 !important;
}







/* ==========================================================================
       PHOTOGRAPHY: DISCIPLINES & METRICS MOBILE
       ========================================================================== */
    .disciplines-section {
        padding: 10vh 6vw !important; /* Respiro ottimizzato per smartphone */
    }

    .disciplines-container {
        flex-direction: column !important;
        gap: 6vh !important;
    }

    /* --- SINISTRA --- */
    .disciplines-left {
        position: relative !important;
        top: 0 !important;
        width: 100% !important;
        gap: 5vh !important;
    }

    .disciplines-headline {
        font-size: clamp(34px, 10vw, 48px) !important;
        max-width: 100% !important;
    }

    /* --- METRICHE SU UNA SINGOLA RIGA --- */
    .disciplines-metrics {
        flex-wrap: nowrap !important; /* Forza gli elementi a non andare a capo */
        justify-content: space-between !important;
        gap: 10px !important; /* Gap ridotto per far entrare tutto */
        padding-top: 30px !important;
        width: 100% !important;
    }

    .metric-item {
        flex: 1 1 0 !important; /* Distribuisce lo spazio equamente tra i 3 elementi */
        align-items: flex-start !important;
    }

    .metric-value {
        font-size: clamp(22px, 6vw, 28px) !important; /* Ridimensionato per non uscire dallo schermo */
    }

    .metric-accent {
        font-size: 14px !important;
    }

    .metric-label {
        font-size: 9px !important; /* Più piccolo per i telefoni più stretti */
        letter-spacing: 0.05em !important;
    }

    /* --- DESTRA --- */
    .disciplines-right {
        width: 100% !important;
        padding-top: 0 !important; /* Rimuove lo scarto di 100px del PC */
        gap: 40px !important;
    }

    .discipline-title {
        font-size: 22px !important;
    }

    .discipline-desc {
        max-width: 100% !important; /* Il testo scorre fino al bordo */
        font-size: 15px !important;
    }


    /* ==========================================================================
       FIX RIGA NERA TRA SEZIONI E CTA
       ========================================================================== */
    .cta-cinematic {
        margin-top: -2px !important; /* "Salda" la CTA alla sezione sopra, chiudendo la fessura */
        z-index: 11 !important; /* Si assicura che il bordo si sovrapponga correttamente */
    }

    .cta-cinematic .cta-bg {
        top: -20% !important; /* Dà più margine superiore all'immagine... */
        height: 140% !important; /* ...e la allunga per evitare che il parallax scopra il fondo */
    }





    /* ==========================================================================
       PLATFORM ROLLER SECTION MOBILE (IL TUO LAYOUT + FIX GSAP)
       ========================================================================== */
    .roller-container {
        flex-direction: column !important; /* La tua colonna originale */
        align-items: center !important;
        gap: 10px !important;
        /* Ingrandiamo il font su mobile in base alla larghezza dello schermo */
        font-size: 11vw !important; 
        line-height: 1.15 !important;
    }

    .roller-left {
        transform: translateY(-30vh); /* Il tuo originale */
        text-align: center !important;
        white-space: nowrap !important;
    }

    .roller-right {
        transform: translateY(30vh); /* Il tuo originale */
        height: 1.15em !important; /* La finestra esatta */
        display: block !important; 
        overflow: hidden !important;
    }

    /* IL FIX: Togliamo il flex che su mobile confonde GSAP e blindiamo le altezze */
    .roller-words {
        display: block !important; 
    }

    .roller-words span {
        display: block !important;
        height: 1.15em !important; /* Obbliga GSAP a calcolare l'altezza esatta di ogni parola */
        line-height: 1.15 !important;
        text-align: center !important;
        white-space: nowrap !important;
    }











    /* ==========================================================================
   3D PAGE — PROCESS / CAPABILITIES / THE DETAILS MOBILE
   Da incollare dentro @media (max-width: 980px)
   ========================================================================== */

/* -----------------------------
   THE PROCESS
   ----------------------------- */
.proc-section {
    padding: 11vh 4vw 9vh !important;
    background-color: #050505;
}

.proc-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 48px !important;
}

.proc-left {
    position: relative !important;
    top: 0 !important;
    width: 100% !important;
}

.proc-intro {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.proc-eyebrow {
    font-size: 11px !important;
    line-height: 1 !important;
    letter-spacing: 0.08em !important;
    color: rgba(255,255,255,0.55) !important;
}

.proc-headline {
    font-size: clamp(32px, 9.2vw, 46px) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.05em !important;
    max-width: 100% !important;
    margin: 0 !important;
}

.proc-button-wrap {
    margin-top: 2px !important;
}

.proc-premium-btn {
    width: 100% !important;
    min-height: 54px;
    justify-content: space-between !important;
    padding: 10px 10px 10px 18px !important;
}

.proc-premium-btn .btn-text {
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
    margin-right: 0 !important;
}

.proc-premium-btn .btn-icon-circle {
    width: 34px !important;
    height: 34px !important;
    flex-shrink: 0;
}

.proc-right {
    width: 100% !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    gap: 34px !important;
}

.proc-step {
    gap: 12px !important;
    padding-top: 18px !important;
}

.proc-step-title {
    font-size: clamp(21px, 6vw, 28px) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.03em !important;
}

.proc-step-desc {
    font-size: 14px !important;
    line-height: 1.6 !important;
    max-width: 100% !important;
    color: rgba(255,255,255,0.72) !important;
}


/* -----------------------------
   CAPABILITIES
   ----------------------------- */
.micro-section {
    padding: 10vh 4vw !important;
}

.micro-container {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 34px !important;
}

.micro-header {
    position: relative !important;
    top: 0 !important;
}

.micro-label {
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
    color: rgba(255,255,255,0.6) !important;
}

.micro-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
}

.micro-item {
    padding: 18px 0 20px !important;
    border-top: 1px solid rgba(255,255,255,0.12);
}

.micro-item:last-child {
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

.micro-index {
    display: inline-block;
    margin-bottom: 10px !important;
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
    color: rgba(255,255,255,0.45) !important;
}

.micro-title {
    font-size: clamp(21px, 6vw, 28px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.03em !important;
    margin-bottom: 10px !important;
}

.micro-desc {
    font-size: 14px !important;
    line-height: 1.6 !important;
    max-width: 100% !important;
    color: rgba(255,255,255,0.72) !important;
}


/* -----------------------------
   THE DETAILS
   ----------------------------- */
.micro-faq-section {
    padding-top: 0 !important;
    padding-bottom: 11vh !important;
}

.micro-accordion {
    margin-top: 2px !important;
}

.micro-acc-item {
    border-bottom: 1px solid rgba(255,255,255,0.12) !important;
}

.micro-acc-head {
    align-items: flex-start !important;
    gap: 18px !important;
    padding: 20px 0 !important;
}

.micro-acc-title {
    font-size: 16px !important;
    line-height: 1.35 !important;
    letter-spacing: -0.02em !important;
    padding-right: 10px !important;
}

.micro-acc-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}

.micro-acc-inner p {
    max-width: 100% !important;
    padding: 0 0 22px 0 !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: rgba(255,255,255,0.72) !important;
}












/* ==========================================================================
   PHOTOGRAPHY PAGE — MOBILE
   Save this as: style-mobile.css
   Linked already in photography.html for screens <= 980px
   ========================================================================== */

/* ----------------------------------------------------------
   GLOBAL MOBILE CLEANUP
   ---------------------------------------------------------- */
.cursor-dot {
  display: none !important;
}

body,
a,
button,
.proc-step,
.mobile-link {
  cursor: auto !important;
}

.blend-header {
  padding: 18px 5vw;
}

.logo a {
  font-size: 14px;
}

.nav-right {
  gap: 12px;
}

.contact-link {
  display: none;
}

.mobile-menu-overlay {
  padding:
    calc(82px + env(safe-area-inset-top))
    5vw
    calc(24px + env(safe-area-inset-bottom));
}

.menu-inner {
  min-height: calc(100dvh - 106px);
}

.mobile-nav-links {
  gap: 10px;
}

.mobile-link {
  font-size: clamp(34px, 10vw, 54px);
  line-height: 0.94;
}



/* ----------------------------------------------------------
   APPROACH / PROCESS
   ---------------------------------------------------------- */
.service-approach-screen,
.proc-section,
.disciplines-section {
  padding-left: 5vw;
  padding-right: 5vw;
}

.approach-content,
.proc-container,
.disciplines-container {
  width: 100%;
  max-width: 100%;
}

.approach-text {
  font-size: clamp(16px, 4.8vw, 22px);
  line-height: 1.26;
}

.proc-section,
.disciplines-section {
  padding-top: 90px;
  padding-bottom: 90px;
}

.proc-container,
.disciplines-container {
  gap: 48px;
}

.proc-headline,
.disciplines-headline {
  font-size: clamp(30px, 8vw, 44px);
  line-height: 0.98;
}

.proc-right,
.disciplines-right {
  gap: 44px;
}

.proc-step,
.discipline-item {
  padding-top: 18px;
}

.proc-step-title,
.discipline-title {
  font-size: 22px;
}

.proc-step-desc,
.discipline-desc {
  font-size: 14px;
  line-height: 1.55;
  max-width: 100%;
}

.disciplines-container {
  flex-direction: column;
}

.disciplines-left,
.disciplines-right {
  width: 100%;
}

.metric-value {
  font-size: clamp(30px, 8vw, 44px);
}

/* =========================================================
   PHOTOGRAPHY STICKY GRID — SMART MOBILE EXPERIENCE
   ========================================================= */

/* 1. La foto iniziale è 100% Fullscreen, senza padding */
#photography-sticky-grid .block--intro,
#photography-sticky-grid .media {
    height: 100svh !important; /* svh risolve il bug della barra di Safari */
    width: 100vw !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

#photography-sticky-grid .media__image {
    object-fit: cover;
}

/* 2. La griglia parte fuori misura (edge-to-edge) per un effetto pattern immersivo */
#photography-sticky-grid .gallery { 
    width: 130vw; 
}

#photography-sticky-grid .gallery__grid {
    column-gap: 4vw;
    row-gap: 4vw;
}

/* 3. Il testo diventa il vero protagonista assoluto */
#photography-sticky-grid .content__title {
    font-size: clamp(32px, 10vw, 44px);
    width: 90vw;
    line-height: 1.1;
}

/* 4. Scroll totale dimezzato per un'esperienza più rapida col pollice */
#photography-sticky-grid .block.block--main { 
    height: 400vh; 
}
}





/* ==========================================================================
   COOKIE BANNER MOBILE
   ========================================================================== */
.cookie-banner {
    bottom: 20px;
    left: 20px;
    right: 20px;
    width: auto; /* Sovrascrive la larghezza fissa del desktop */
    max-width: none;
    padding: 20px;
}

.cookie-actions {
    flex-direction: column-reverse; /* Mette l'azione principale (Accept) in alto */
    gap: 10px;
}

.cookie-btn {
    width: 100%;
    padding: 14px;
}