/* ==========================================================================
   GLOBAL TYPOGRAPHY RESET
   Forza tutti gli elementi interattivi a ereditare il font principale
   ========================================================================== */
button, 
input, 
optgroup, 
select, 
textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}







/* ==========================================================================
   1. RESET, BASE & VARIABILI
   ========================================================================== */
:root {
    --grid-margin: 4vw;
    --grid-gutter: 20px;
}

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
}

body { 
    width: 100%; 
    background-color: #000; 
    color: #ffffff; 
    font-family: 'Montserrat', sans-serif;
    cursor: none; 
    overflow-x: hidden; 
}

a { 
    text-decoration: none; 
    color: inherit; 
    cursor: none; 
}


/* ==========================================================================
   2. CUSTOM CURSOR
   ========================================================================== */
.cursor-dot {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 9px; 
    height: 9px; 
    background-color: #fff;
    border-radius: 50%; 
    transform: translate(-50%, -50%); 
    z-index: 9999;
    pointer-events: none; 
    mix-blend-mode: difference;
}


/* ==========================================================================
   3. HEADER & DESKTOP NAV
  ========================================================================== */
.blend-header {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    padding: 35px 4vw; 
    z-index: 2000;
    mix-blend-mode: difference; 
    color: #ffffff; 
    pointer-events: none;
}

.header-container { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    width: 100%; 
    pointer-events: auto; 
}

/* Corretto l'errore di sintassi e aggiunto padding per migliorare il click */
.logo a { 
    font-size: 15px; 
    font-weight: 800; 
    letter-spacing: -0.02em; 
    text-transform: uppercase; 
    padding: 10px 0; 
    display: inline-block;
}

/* Aggiunto padding invisibile e transizione per l'effetto focus */
.nav-desktop a, .contact-link, .burger-menu { 
    font-size: 12px; 
    font-weight: 500; 
    letter-spacing: -0.02em; 
    text-transform: uppercase; 
    padding: 10px 0; 
    display: inline-block;
    transition: opacity 0.4s ease;
}

.nav-desktop { 
    display: flex; 
    gap: 40px; 
}

/* Effetto Focus: Scurisce gli altri link quando passi sulla barra di navigazione */
.nav-desktop:hover a {
    opacity: 0.35;
}
.nav-desktop a:hover {
    opacity: 1;
}

.hover-line { 
    position: relative; 
}

.hover-line::after {
    content: ''; 
    position: absolute; 
    width: 100%; 
    height: 1px; 
    bottom: 5px; /* Sostituisce il padding-bottom, posiziona la linea con più precisione */
    left: 0;
    background-color: currentColor; 
    transform-origin: right center; 
    transform: scaleX(0);
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.hover-line:hover::after { 
    transform-origin: left center; 
    transform: scaleX(1); 
}

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

.burger-menu { 
    display: none; 
    padding: 10px; 
}



/* ---------------------------------------------------
   MEGA PANEL SERVICES (Quasi Full-Screen Dropdown)
   --------------------------------------------------- */
.mega-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 75vh;
    background-color: #050505;
    z-index: 1900;
    
    /* Animazione pannello più veloce e scattante */
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    transition: clip-path 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    
    display: flex;
    align-items: flex-end;
    padding: 0 4vw 8vh 4vw;
}

.mega-panel.is-open {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.mega-panel-inner {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.mega-panel-list {
    display: flex;
    flex-direction: column;
    gap: 0; 
}

.mega-panel-link {
    /* Font rimpicciolito per maggiore eleganza */
    font-size: clamp(32px, 4vw, 65px); 
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: #ffffff;
    text-decoration: none;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    
    /* Animazione testi più veloce */
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease, color 0.2s ease, padding-left 0.2s ease;
}

.mega-panel.is-open .mega-panel-link {
    transform: translateY(0);
    opacity: 1;
}

/* Tempi a cascata dimezzati per una comparsa fulminea */
.mega-panel.is-open .mega-panel-link:nth-child(1) { transition-delay: 0.10s; }
.mega-panel.is-open .mega-panel-link:nth-child(2) { transition-delay: 0.14s; }
.mega-panel.is-open .mega-panel-link:nth-child(3) { transition-delay: 0.18s; }
.mega-panel.is-open .mega-panel-link:nth-child(4) { transition-delay: 0.22s; }
.mega-panel.is-open .mega-panel-link:nth-child(5) { transition-delay: 0.26s; }

.mega-panel-link:hover {
    color: #ff2a00;
    padding-left: 15px;
}

/* Rimosso .m-index perché non serve più */

/* Il testo di cortesia a destra */
.mega-panel-meta {
    max-width: 300px;
    font-size: 12px;
    line-height: 1.5;
    color: #888888;
    text-align: right;
    
    transform: translateY(15px);
    opacity: 0;
    transition: all 0.3s ease 0.25s; /* Appare prima rispetto a prima */
}

.mega-panel.is-open .mega-panel-meta {
    transform: translateY(0);
    opacity: 1;
}


/* ==========================================================================
   4. MOBILE MENU OVERLAY
   ========================================================================== */
.mobile-menu-overlay {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100vh; 
    background-color: #050505;
    z-index: 1500; 
    display: flex; 
    flex-direction: column; 
    justify-content: flex-end; 
    padding: 4vw;
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); 
    transition: clip-path 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

.mobile-menu-overlay.is-open { 
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); 
}

.menu-inner { 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    height: 75vh; 
}

.mobile-nav-links { 
    display: flex; 
    flex-direction: column; 
    gap: 2vh; 
}

.mobile-link { 
    font-size: clamp(40px, 10vw, 80px); 
    font-weight: 700; 
    line-height: 1; 
    letter-spacing: -0.04em; 
    text-transform: uppercase; 
    transform: translateY(20px); 
    opacity: 0; 
    transition: all 0.5s ease; 
    color: #ffffff; 
}

.is-open .mobile-link { transform: translateY(0); opacity: 1; }
.is-open .mobile-link:nth-child(1) { transition-delay: 0.3s; }
.is-open .mobile-link:nth-child(2) { transition-delay: 0.4s; }
.is-open .mobile-link:nth-child(3) { transition-delay: 0.5s; }
.is-open .mobile-link:nth-child(4) { transition-delay: 0.6s; }

.mobile-menu-footer { 
    display: flex; 
    flex-direction: column; 
    gap: 30px; 
    font-size: 13px; 
    font-weight: 400; 
    opacity: 0; 
    letter-spacing: 0.02em; 
    transition: opacity 0.5s ease 0.7s; 
    color: #ffffff; 
}

.is-open .mobile-menu-footer { opacity: 1; }
.agency-info p, .agency-contact a { margin-bottom: 5px; display: block; color: #ffffff; }
.mobile-social { margin-top: 15px !important; text-decoration: underline; }


/* ==========================================================================
   5. HERO
   ========================================================================== */
.hero-premium {
    position: sticky; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100vh;
    display: flex; 
    flex-direction: column;
    justify-content: space-between; 
    padding: 35px 4vw 2vw 4vw; 
    z-index: 1; 
    overflow: hidden; 
    background-color: #000;
}

.hero-media-container { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 0; 
    background-color: #000; 
}

.hero-video { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    transform: scale(1.05); 
    will-change: transform; 
    display: block; 
}

.hero-content {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 0px; 
    pointer-events: none;
}

.hero-title {
    font-size: clamp(36px, 5.5vw, 72px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.05em;
    max-width: 55vw;
    margin-bottom: 6vh; 
    clip-path: polygon(0 0, 100% 0, 100% 115%, 0% 115%);
}

.hero-title .word { 
    transform: translateY(100%); 
}

.hero-featured-card {
    position: absolute;
    right: 0;
    bottom: 8vh; 
    width: 240px; 
    height: 60px; 
    background-color: rgba(10, 10, 10, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    padding: 8px;
    gap: 12px;
    z-index: 5;
    pointer-events: auto;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.4s ease;
    border-radius: 10px; 
}

.hero-featured-card:hover {
    border-color: rgba(255, 255, 255, 0.3);
}

.featured-card-img {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 10%;
}

.featured-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.featured-card-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.card-label {
    font-size: 8px;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.5);
    text-transform: lowercase;
    margin: 0;
}

.card-title {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.1;
    color: #ffffff;
    text-transform: lowercase;
    margin: 0;
}

.hero-bottom-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr; 
    align-items: end;
    width: 100%;
    pointer-events: auto;
    opacity: 0; 
}

.hero-col {
    display: flex;
}

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

.hero-col-center {
    justify-content: center;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: -0.02em;
}

.hero-col-right {
    justify-content: flex-end;
}

.hero-social {
    display: flex;
    gap: 10px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: -0.02em;
}

.hero-social .separator {
    color: rgba(255, 255, 255, 0.3);
}

.hero-subtitle {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.6);
    max-width: 260px;
    line-height: 1.4;
    text-align: right;
    margin: 0;
}


/* ==========================================================================
   6. ABOUT
   ========================================================================== */
.about-premium {
    position: relative; 
    width: 100%; 
    background-color: #ffffff; 
    color: #000000;
    padding: 180px 4vw; 
    z-index: 2; 
}

.about-grid { 
    display: grid; 
    grid-template-columns: 3fr 9fr; 
    gap: 60px; 
    align-items: flex-start; 
}

.about-meta { 
    display: flex; 
    flex-direction: column; 
    gap: 60px; 
}

.meta-block { 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
}

.meta-label { 
    font-size: 10px; 
    font-weight: 600; 
    letter-spacing: 0.08em; 
    color: rgba(0,0,0,0.4); 
    display: block; 
    margin-bottom: 10px; 
}

.meta-value { 
    font-size: 13px; 
    font-weight: 500; 
    line-height: 1.5; 
    letter-spacing: -0.01em; 
}

.about-text-container { 
    padding-left: 4vw; 
}

.about-large-text { 
    font-size: clamp(32px, 4vw, 68px); 
    font-weight: 500; 
    line-height: 1.02; 
    letter-spacing: -0.06em; 
    margin: 0; 
}

.scrub-word { 
    opacity: 0.15; 
    will-change: opacity; 
}

.highlight-red { 
    color: #ff2a00; 
}

 /* ==========================================================================
   7. THE VISION (IMAGE BACKGROUND)
   ========================================================================== */
.vision-premium {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #050505;
    color: #ffffff;
    display: grid;
    place-items: center;
    z-index: 2;
    overflow: hidden;
}

/* Contenitore dell'immagine di sfondo */
.vision-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

/* L'immagine vera e propria */
.vision-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.15); /* Leggermente ingrandita per lo zoom out */
    will-change: transform, filter;
}

/* Overlay per oscurare dinamicamente l'immagine */
.vision-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(5, 5, 5, 0.2); /* Opacità base, quasi trasparente */
    z-index: 1;
    will-change: background-color;
}

.vision-content {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    position: relative;
    z-index: 2;
}

.vision-text-wrapper {
    position: relative;
    width: min(1100px, 80vw);
    height: auto;
    display: grid;
    place-items: center;
}

.vision-headline {
    position: absolute;
    font-size: clamp(24px, 3.5vw, 50px);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0;
    text-align: center;
    width: 100%;
    will-change: opacity, transform, filter;
}

/* Classi iniziali per GSAP */
.phase-1 { opacity: 1; filter: blur(0px); }
.phase-2, .phase-3 { opacity: 0; filter: blur(15px); pointer-events: none; }

/* ==========================================================================
   8. EXPERTISE SECTION (WHITE BACKGROUND)
   ========================================================================== */
.expertise-section {
    position: relative;
    z-index: 3; 
    width: 100%;
    background-color: #ffffff;
    color: #050505;
    padding: 15vh 4vw; 
}

.expertise-container {
    display: flex;
    align-items: flex-start;
    position: relative;
    width: 100%;
    max-width: 1400px; 
    margin: 0 auto;
}

.expertise-left {
    width: 50%;
    position: sticky;
    bottom: 5vh; 
    align-self: flex-end;
}

.expertise-headline {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: clamp(32px, 4vw, 56px); 
    line-height: 0.85;
    letter-spacing: -0.10em;
    color: #050505;
    margin: 0;
    text-transform: uppercase;
}

.expertise-right {
    width: 50%;
    display: flex;
    flex-direction: column;
    padding-top: 10vh; 
    padding-bottom: 0vh;
    padding-left: 6vw; 
    align-items: flex-start; 
}

.e-item {
    padding: 0 0 5vh 0; 
    cursor: none; 
    border: none; 
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.e-title-wrapper {
    position: relative; 
    display: inline-flex;
    align-items: center;
}

.e-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600; 
    font-size: clamp(16px, 1.5vw, 22px); 
    letter-spacing: -0.10em;
    color: #111111;
    margin: 0;
    text-transform: uppercase;
    transition: color 0.4s ease;
}

.e-bracket {
    position: absolute;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: clamp(16px, 1.5vw, 22px);
    color: #ff2a00;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    pointer-events: none;
}

.left-bracket { 
    right: 100%; 
    margin-right: 10px; 
    transform: translateX(10px); 
}

.right-bracket { 
    left: 100%; 
    margin-left: 10px; 
    transform: translateX(-10px); 
}

.e-item:hover .e-title { color: #ff2a00; }
.e-item:hover .left-bracket { opacity: 1; transform: translateX(0); }
.e-item:hover .right-bracket { opacity: 1; transform: translateX(0); }

.e-subtext-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.e-subtext-inner {
    display: flex;
    align-items: flex-start; 
    justify-content: flex-start;
    padding-top: 12px; 
}

.e-subtext {
    font-size: 13px;
    font-weight: 500;
    color: #888888; 
    max-width: 320px;
    line-height: 1.4;
    margin: 0;
}

/* --- BOTTONE EXPLORE --- */
.e-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #050505;
    transition: color 0.4s ease;
}

.e-link .e-arrow {
    width: 12px;
    height: 12px;
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.e-link:hover, .e-item:hover .e-link {
    color: #ff2a00;
}

.e-link:hover .e-arrow, .e-item:hover .e-arrow {
    transform: translateX(5px);
}







/* ==========================================================================
   10. RESPONSIVE DESIGN (TABLET & MOBILE)
   ========================================================================== */
@media (max-width: 980px) {

    /* --- Menu & Header --- */
    .burger-menu { display: block; }
    .nav-desktop, .desktop-only { display: none; }
    
    /* --- About --- */
    .about-premium { padding: 120px 6vw; }
    .about-grid { grid-template-columns: 1fr; gap: 40px; }
    .about-text-container { padding-left: 0; }
    
    /* --- Expertise --- */
    .expertise-container { flex-direction: column; }
    .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;
    }
    .expertise-right {
        width: 100%;
        padding-top: 0;
        padding-bottom: 0;
        padding-left: 0; 
    }
    .e-title { font-size: 20px; }
    .left-bracket, .right-bracket { display: none; }
    .e-subtext-inner { padding-top: 8px; }
    .e-arrow { color: #111; }
    .e-item { padding: 0 0 4vh 0; }

    /* --- Works / Projects Mobile --- */
    .projects-scroll-wrapper { height: auto; }
    .projects-sticky { height: auto; position: static; padding: 100px 4vw 40px; }
    
    .main-project-mask {
        position: relative; height: 60vh;
        clip-path: none !important; border-radius: 0px; margin-bottom: 20px;
    }
    
    .projects-grid { display: flex; flex-direction: column; gap: 20px; }
    .grid-col { display: contents; } 
    .project-card { height: 50vh; transform: none !important; opacity: 0.2; }
    .dummy-center { display: none; }
    
    .intro-text-wrapper { bottom: 30px; left: 20px; }
}







/* =========================================================
   FEATURED REVEAL — CSS UNICO (FIX misure JS + allineamento)
   ========================================================= 
*/

:root{
  --fr-margin: 32px;
  --fr-gutter: 20px;
  --fr-radius: 16px;

  --fr-final-h: 65vh;
  --fr-center-ratio: 9 / 16;

  /* micro correzione centrale (prova -2% / -1.5% ecc.) */
  --fr-center-top-nudge: 0%;
}

#featured.c-featured-reveal{
  background: #fff;
  position: relative;
  z-index: 10;
  isolation: isolate;
  overflow: clip;
}

#featured.c-featured-reveal .c-featured-reveal__sticky{
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 100svh;
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
  overflow: hidden;
}

/* GRID CONTAINER — IMPORTANTISSIMO: NO transform qui (altrimenti sballa le misure del JS) */
#featured.c-featured-reveal .c-featured-reveal__grid-container{
  position: absolute;
  inset: 0;
  padding: 0 var(--fr-margin);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;

  opacity: 0;           /* resta hidden all’inizio, va bene */
  overflow: hidden;     /* ✅ non vedi le laterali in attesa */
}

@media (hover:none){
  #featured.c-featured-reveal .c-featured-reveal__grid-container{ display:none; }
}

#featured.c-featured-reveal .c-featured-reveal__grid{
  height: min(var(--fr-final-h), calc(100vh - 32px));
  width: min(1200px, 100%);
  display: grid;
  gap: var(--fr-gutter);
  box-sizing: border-box;
  align-items: stretch;

  grid-template-columns:
    1fr
    clamp(220px, calc(min(var(--fr-final-h), calc(100vh - 32px)) * 9 / 16), 520px)
    1fr;
}

/* PC: Griglia piatta a 3 colonne, il bersaglio (f-t3) sta al centro */
#featured.c-featured-reveal .c-featured-reveal__grid {
    height: min(var(--fr-final-h), calc(100vh - 32px));
    width: min(1200px, 100%);
    display: grid;
    gap: var(--fr-gutter);
    grid-template-columns: 1fr clamp(220px, calc(min(var(--fr-final-h), calc(100vh - 32px)) * 9 / 16), 520px) 1fr;
    grid-template-rows: 60% 40%;
}

.f-t1 { grid-column: 1 / 2; grid-row: 1 / 2; }
.f-t2 { grid-column: 1 / 2; grid-row: 2 / 3; }
.f-t3 { grid-column: 2 / 3; grid-row: 1 / 3; width: 100%; height: 100%; visibility: hidden; }
.f-t4 { grid-column: 3 / 4; grid-row: 1 / 2; }
.f-t5 { grid-column: 3 / 4; grid-row: 2 / 3; }

/* ✅ IL NUDGE LO FACCIAMO QUI: sul dummy con top, così il JS lo misura SEMPRE */
#featured.c-featured-reveal .c-featured-reveal__dummy{
  height: 100%;
  width: auto;
  aspect-ratio: var(--fr-center-ratio);
  max-width: 100%;
  visibility: hidden;
  pointer-events: none;

  position: relative;
  top: var(--fr-center-top-nudge); /* ✅ questo ora deve funzionare */
}

/* IGNORA ratio-large/small */
#featured.c-featured-reveal .ratio-large,
#featured.c-featured-reveal .ratio-small{
  aspect-ratio: auto !important;
}

#featured.c-featured-reveal .c-featured-reveal__img{
  width: 100%;
  overflow: hidden;
  border-radius: calc(var(--fr-radius) - 2px);
  will-change: transform;
  transform: translateZ(0);
}

#featured.c-featured-reveal .c-featured-reveal__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* SINISTRA 60/40 */
#featured.c-featured-reveal .c-featured-reveal__grid > .c-featured-reveal__col:first-child .c-featured-reveal__img:first-child{
  flex: 0 0 calc(60% - (var(--fr-gutter) / 2));
}
#featured.c-featured-reveal .c-featured-reveal__grid > .c-featured-reveal__col:first-child .c-featured-reveal__img:last-child{
  flex: 0 0 calc(40% - (var(--fr-gutter) / 2));
}

/* DESTRA 40/60 */
#featured.c-featured-reveal .c-featured-reveal__grid > .c-featured-reveal__col:last-child .c-featured-reveal__img:first-child{
  flex: 0 0 calc(40% - (var(--fr-gutter) / 2));
}
#featured.c-featured-reveal .c-featured-reveal__grid > .c-featured-reveal__col:last-child .c-featured-reveal__img:last-child{
  flex: 0 0 calc(60% - (var(--fr-gutter) / 2));
}

/* MASK sopra */
#featured.c-featured-reveal .c-featured-reveal__mask{
  position: absolute;
  border-radius: var(--fr-radius);
  overflow: hidden;
  z-index: 2;
  will-change: left, top, width, height;
  transform: translateZ(0);
}

#featured.c-featured-reveal .c-featured-reveal__bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Caption */
#featured.c-featured-reveal .c-featured-reveal__caption{
  position: absolute;
  left: 24px;
  bottom: 24px;
  max-width: 520px;
  z-index: 3;
}

#featured.c-featured-reveal .c-featured-reveal__text{
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #231b14;
  text-shadow: 0 10px 30px rgba(0,0,0,.35);
}











/* ==========================================================================
   11. BIG TYPOGRAPHY, COLOR SHIFT & FAQ
   ========================================================================== */
.faq-section {
    position: relative;
    background-color: #ffffff; 
    color: #050505; 
    padding: 15vh 4vw;
    z-index: 4;
    overflow: hidden; /* Evita scroll orizzontali col blur */
}

.faq-container {
    max-width: 1600px;
    margin: 0 auto;
}

/* RENDIAMO IL TESTO MASSICCIO E STRETTO */
.faq-headline {
    font-size: clamp(48px, 4vw, 150px); /* Molto più grande */
    font-weight: 500;
    line-height: 0.88; /* Righe schiacciate tipiche dell'editorial design */
    letter-spacing: -0.06em; /* Lettere più vicine */
    margin-bottom: 10vh;
    max-width: 60%;
}

/* Stile per dare enfasi corsiva ad alcune parole (opzionale, vedi HTML) */
.faq-headline em {
    font-style: italic;
    font-weight: 400;
    font-family: serif; /* Se vuoi l'effetto esatto dello screenshot */
}

/* Prepariamo le parole generate da SplitType per l'animazione */
.faq-section .word {
    will-change: filter, opacity, transform;
    display: inline-block;
}

/* LAYOUT ASIMMETRICO TIPO POSTER */
.faq-grid {
    display: grid;
    grid-template-columns: 3.5fr 6.5fr; /* Immagine un po' più stretta */
    gap: 8vw;
    align-items: end; /* Spinge l'accordion in basso, allineandolo col fondo dell'immagine */
}

.faq-img-wrapper {
    width: 100%;
    aspect-ratio: 4/5;
    overflow: hidden;
    /* Rimosso lo sticky per farlo sembrare un poster statico come nello screen */
}

.faq-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Il resto del CSS per .faq-accordion-wrapper rimane uguale! */

/* Accordion Style */
.faq-accordion-wrapper {
    border-top: 1px solid rgba(128, 128, 128, 0.3); /* Visibile sia su bianco che su nero */
}

.faq-item {
    border-bottom: 1px solid rgba(128, 128, 128, 0.3);
}

.faq-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3.5vh 0;
    background: transparent;
    border: none;
    color: inherit;
    cursor: none; 
}

.faq-title {
    font-size: clamp(24px, 2.5vw, 36px);
    font-weight: 500;
    letter-spacing: -0.03em;
    text-align: left;
    transition: color 0.3s ease;
}

.faq-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.faq-header:hover .faq-title {
    color: #ff2a00; /* Rosso al passaggio del mouse */
}

/* Animazione fluida apertura tramite Grid */
.faq-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.faq-inner {
    overflow: hidden;
}

.faq-inner p {
    padding-bottom: 4vh;
    font-size: 14px;
    line-height: 1.5;
    color: #888; /* Grigio medio per massima leggibilità su nero */
    max-width: 85%;
}

/* Classi attivate dal JS */
.faq-item.is-open .faq-content {
    grid-template-rows: 1fr;
}

.faq-item.is-open .faq-icon {
    transform: rotate(45deg);
}

@media (max-width: 980px) {
    .faq-headline { margin-bottom: 8vh; }
    .faq-grid { grid-template-columns: 1fr; gap: 40px; }
    .faq-img-wrapper { position: relative; top: 0; }
}










/* ==========================================================================
   12. CINEMATIC CTA (L'Orizzonte Basso)
   ========================================================================== */
.cta-cinematic {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 10;
    background-color: #050505;
    margin-top: -1px;
}

.cta-bg {
    position: absolute;
    top: -20%;
    left: 0;
    width: 100%;
    height: 140%;
    z-index: 0;
    will-change: transform;
}

.cta-bg img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

.cta-gradient-overlay {
    position: absolute;
    inset: 0;
    /* Lascia la parte alta intatta e scurisce dolcemente il fondo */
    background: linear-gradient(to top, rgba(5, 5, 5, 0.85) 0%, rgba(5, 5, 5, 0.3) 25%, transparent 60%);
    z-index: 1;
}

.cta-bottom-anchor {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1600px;
    padding: 0 4vw 6vh 4vw; /* Incollato in basso con il giusto respiro */
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Allinea tutto perfettamente alla linea di base inferiore */
}

/* BLOCCO SINISTRA */
.cta-left {
    max-width: 480px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.cta-subtext {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: -0.06em;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 15px;
    text-transform: uppercase;
}

.cta-title {
    font-size: clamp(24px, 2.5vw, 38px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin-bottom: 30px;
}

.bracket-text { 
    font-weight: 400; 
    color: rgba(255, 255, 255, 0.8); 
}

.cta-button {
    display: inline-flex;
    padding: 12px 24px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    color: #ffffff;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.04em;
    transition: all 0.4s ease;
}

.cta-button:hover {
    background-color: #ffffff;
    color: #050505;
}

/* BLOCCO DESTRA */
.cta-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 20px;
}

.floating-chat-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 20px 10px 10px;
    border-radius: 10px;
}

.chat-avatar { 
    width: 34px; 
    height: 34px; 
    border-radius: 10%; 
    overflow: hidden; 
}

.chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-text { display: flex; flex-direction: column; gap: 3px; }
.chat-name { font-size: 10px; font-weight: 600; color: #ffffff; }
.chat-msg { font-size: 10px; color: #bbbbbb; }

.floating-input-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 260px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 6px 6px 6px 16px;
    border-radius: 10px;
}

.input-placeholder { font-size: 10px; color: rgba(255, 255, 255, 0.4); }

.input-arrow {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    cursor: pointer; 
    user-select: none; 
    -webkit-user-select: none;
}

@media (max-width: 980px) {
    .cta-bottom-anchor {
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
        padding-bottom: 10vh;
    }
    .cta-right { align-items: flex-start; }
}


/* ==========================================================================
   12.1. CINEMATIC CTA WIZARD (Add-on)
   ========================================================================== */

.wizard-container {
    /* Permette alla pillola di allargarsi dolcemente nello step 3 */
    width: auto;
    min-width: 260px;
    transition: all 0.4s ease;
 position: relative;
    z-index: 50; 
}

.wizard-step {
    display: none;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    animation: fadeInStep 0.4s ease forwards;
}

.wizard-step.active-step {
    display: flex;
}

@keyframes fadeInStep {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Reset degli input per fonderli nel design glassy */
.wizard-input {
    background: transparent;
    border: none;
    outline: none;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    width: 100%;
    padding-right: 10px;
}

.wizard-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* Stili specifici per il Terzo Step (Tags) */
#step-3 {
    gap: 12px;
}

.step-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
}

.service-tags-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.glassy-pill-tag {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 6px 12px;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.glassy-pill-tag:hover,
.glassy-pill-tag.selected {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Fix per l'icona di invio finale che deve sembrare disabilitata finché non si sceglie un tag */
#submit-wizard {
    cursor: pointer;
    transition: all 0.3s ease;
}

#submit-wizard.disabled {
    opacity: 0.3;
    pointer-events: none;
}







/* ==========================================================================
   13. CUSTOM MINIMAL FOOTER (Tension & Brutalist)
   ========================================================================== */
.site-footer {
    position: relative;
    z-index: 20;
    background-color: #ffffff;
    color: #050505;
    padding-top: 12vh;
    /* Nasconde eventuali sbavature orizzontali del font */
    overflow: hidden; 
}

.footer-container {
    max-width: 1600px; 
    margin: 0 auto;
    padding: 0 4vw;
    display: flex;
    flex-direction: column;
}

/* GRIGLIA A 3 COLONNE */
.footer-grid-custom {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 4vw;
    align-items: start;
    margin-bottom: 8vh; /* Spazio tra la griglia e la barra copyright */
}

/* COLONNA 1: SERVIZI */
.f-col-nav {
    display: flex;
    flex-direction: column;
}

.f-nav-links {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Spazio elegante tra i link */
}

.f-nav-links a {
    font-size: 14px; /* Dimensione piccola e professionale */
    font-weight: 600; /* Semi-Bold per dare contrasto ed eleganza */
    letter-spacing: -0.01em;
    color: #050505;
    width: fit-content;
}

/* COLONNA 2: INFO */
.f-col-info {
    display: flex;
    flex-direction: column;
    gap: 4vh;
}

.info-chunk {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chunk-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #888888;
    text-transform: uppercase;
}

.info-chunk p {
    font-size: 13px; /* Leggermente aumentato per leggibilità */
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.01em;
    color: #050505;
    margin: 0;
}

/* COLONNA 3: SOCIAL */
.f-col-social {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.f-small-link {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #050505;
    text-transform: uppercase;
}

/* BARRA INFERIORE (SOPRA IL LOGO) */
.footer-bottom-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2vh 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 2vh; /* Stacca la barra dal logo gigante */
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: #888888;
    text-transform: uppercase;
}

.legal-links {
    display: flex;
    gap: 20px;
}

.legal-links .f-small-link {
    color: #888888;
    font-size: 9px;
}

/* --- IL LOGO GIGANTE EDGE-TO-EDGE IN SVG --- */
.footer-huge-logo {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%); /* Forza il centraggio matematico saltando i margini */
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Allinea l'SVG alla base del footer */
    cursor: pointer;
    color: #050505; /* Questo viene ereditato dal fill="currentColor" dell'SVG */
    transition: color 0.4s ease;
}

.footer-logo-svg {
    width: 100%;
    height: auto;
    display: block; /* Rimuove i margini fantasma sotto l'immagine */
}

.footer-huge-logo:hover {
    color: #ff2a00; /* L'SVG diventerà rosso al passaggio del mouse */
}

/* HOVER LINES */
.site-footer .hover-line::after {
    background-color: #050505;
    height: 1px;
    bottom: 0px;
}

/* RESPONSIVE MOBILE */
@media (max-width: 980px) {
    .footer-grid-custom {
        grid-template-columns: 1fr;
        gap: 6vh;
    }
    .f-col-social {
        align-items: flex-start;
    }
    .footer-huge-logo {
        /* Ricalibrato per schermi verticali */
        font-size: 14vw; 
    }
}






















/* ==========================================================================
   cinematography Hero 
   ========================================================================== */

.service-parallax-wrapper {
    position: relative;
    width: 100%;
    /* Rimuove qualsiasi sfondo solido nero in mezzo */
    background-color: #050505;
    overflow: hidden;
    z-index: 1;
}

/* L'immagine in background, più alta del contenitore per poter scivolare giù */
.service-parallax-bg {
    position: absolute;
    top: -10%; /* Parte un po' più in alto */
    left: 0;
    width: 100%;
    height: 125%; /* C'è margine per scorrere */
    z-index: 0;
    will-change: transform;
}

.service-parallax-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Oscuramento leggero (gradient dal basso per favorire la lettura della bottom-bar) */
.service-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.6) 100%);
    z-index: 1;
}

/* LA HERO - Stesse dimensioni della tua Home Page */
.service-hero-screen {
    position: relative;
    z-index: 2;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Spinge tutto in basso */
    padding: 35px 4vw 2vw 4vw;
}

/* L'APPROCCIO - Ridotto il margine, allineato a sinistra come il titolo */
.service-approach-screen {
    position: relative;
    z-index: 2;
    min-height: 70vh; /* Da spazio per respirare senza essere un vuoto infinito */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5vh 4vw 15vh 4vw;
}

.approach-content {
    max-width: 55vw; /* Si allinea esattamente con la tua .hero-title */
}

.approach-label {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 18px;
}

.approach-text {
    font-size: clamp(18px, 2.5vw, 36px);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: -0.01em;
    color: #ffffff;
}

@media (max-width: 980px) {
    .approach-content { max-width: 90vw; }
}






/* ==========================================================================
   PHOTOGRAPHY: EDITORIAL SPLIT (STYLES)
   ========================================================================== */
.editorial-split-section {
    background-color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    padding: clamp(80px, 10vw, 160px) 5vw;
}

.editorial-split-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
}

/* --- SINISTRA: Sidebar --- */
.split-sidebar {
    flex: 0 0 25%;
    display: flex;
    flex-direction: column;
    gap: 40px;
    position: sticky;
    top: 120px; /* Rimane fissa mentre leggi a destra */
}

.micro-label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #555555;
}

.label-accent {
    width: 8px;
    height: 8px;
    background-color: #d2ff00; /* Un tocco di lime o il tuo colore aziendale */
    display: inline-block;
}

/* Bottone Anton Schweitzer */
.schweitzer-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background-color: #f7f7f7;
    padding: 6px 20px 6px 6px;
    border-radius: 50px;
    text-decoration: none;
    color: #1a1a1a;
    transition: background-color 0.3s ease, transform 0.3s ease;
    width: max-content;
}

.schweitzer-btn:hover {
    background-color: #ededed;
    transform: translateY(-2px);
}

.schweitzer-thumb {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
}

.schweitzer-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.schweitzer-text {
    font-size: 0.85rem;
    font-weight: 500;
}

/* --- DESTRA: Contenuto Principale --- */
.split-content {
    flex: 0 0 65%;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.split-headline {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 400; /* Montserrat non troppo grasso */
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: #1a1a1a;
    margin: 0;
}

.text-light-grey {
    color: #c0c0c0; /* Colore per l'ultima parte della frase */
}

/* La magia del Text-Reveal */
.reveal-mask {
    position: relative;
    display: inline-flex;
    overflow: hidden;
    vertical-align: top;
    padding-bottom: 5px; /* Previene il taglio di lettere come la g o la p */
    margin-right: 8px; /* Spazio tra le parole */
}

.reveal-word {
    display: inline-block;
    transform: translateY(110%); /* Nascosto all'inizio */
    will-change: transform;
}

/* Paragrafo e CTA */
.split-bottom-wrap {
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 600px;
    opacity: 0; /* Nascosto per l'animazione */
    transform: translateY(20px);
}

.split-paragraph {
    font-size: 1.1rem;
    font-weight: 300;
    line-height: 1.6;
    color: #444444;
    margin: 0;
}

.split-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background-color: #1a1a1a;
    color: #ffffff;
    padding: 16px 32px;
    border-radius: 4px; /* Un po' più squadrato e serio */
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.split-cta-btn:hover {
    background-color: #333333;
}

/* Responsive */
@media (max-width: 900px) {
    .editorial-split-container {
        flex-direction: column;
        gap: 60px;
    }
    .split-sidebar, .split-content {
        flex: 1 1 100%;
        position: relative;
        top: 0;
    }
}




/* ==========================================================================
   SERVICE PAGE: FEATURED PROJECT (Video Expand)
   ========================================================================== */

.service-featured-project {
    background-color: #ffffff; /* Continuiamo dal bianco della sezione The Process */
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100vh; /* Obbligatorio 100vh perché poi la bloccheremo col pin */
    display: flex;
    align-items: center;
    justify-content: center;
}

.sfp-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sfp-video-wrapper {
    /* Dimensione iniziale del rettangolo */
    width: 55vw; 
    height: 60vh;
    overflow: hidden;
    position: relative;
    will-change: width, height; /* Ottimizza l'animazione per non farla scattare */
}

.sfp-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* L'overlay con i testi che comparirà a tutto schermo */
.sfp-overlay-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 6vh 4vw; /* Pad identico a quello della hero */
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    color: #ffffff;
    opacity: 0; /* Invisibile all'inizio */
    pointer-events: none;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
}

.sfp-text-left {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sfp-client {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500; /* Massimo spessore per il comando */
    font-size: clamp(28px, 4vw, 52px); 
    line-height: 0.95; /* Molto compatto, quasi iper-brutalista */
    letter-spacing: -0.05em; /* Lettere molto vicine per dare tensione */
    color: #ffffff;
    margin-bottom: 15px;
}

.sfp-project {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.15em; /* Molto spazio per bilanciare il titolo compatto */
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
}

.sfp-text-right p {
    font-size: 14px;
    line-height: 1.4;
    color: #ffffff;
    max-width: 320px;
    opacity: 0.8;
    border-left: 1px solid rgba(255, 255, 255, 0.3); /* Una linea sottile per separare il testo */
    padding-left: 20px;
}

@media (max-width: 980px) {
    .sfp-video-wrapper {
        width: 85vw; /* Su mobile parte un po' più grande */
        height: 50vh;
    }
    .sfp-overlay-content {
        padding: 4vh 6vw;
    }
}








/* ==========================================================================
   SERVICE PAGE: INFO COMPACT (What we do + FAQ)
   ========================================================================== */

.service-info-section {
    background-color: #ffffff;
    color: #050505;
    padding: 15vh 4vw 15vh 4vw; /* DÃ  aria, ma resta vicina alla CTA */
    position: relative;
    z-index: 10;
}

.info-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 3.5fr 6.5fr; /* Asimmetria stile Bruyer Media */
    gap: 8vw;
    align-items: start;
}

.info-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: #888888;
    margin-bottom: 30px;
    text-transform: uppercase;
}

/* Lista di sinistra pulita ed elegante */
.clean-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.clean-list li {
    font-size: clamp(16px, 1.5vw, 20px);
    font-weight: 500;
    color: #050505;
    letter-spacing: -0.01em;
}

/* Accordion Compatto a destra */
.faq-compact-wrapper {
    border-top: 1px solid rgba(0, 0, 0, 0.15);
}

.faq-item-compact {
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.faq-header-compact {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3vh 0;
    background: transparent;
    border: none;
    color: inherit;
    cursor: none; 
    text-align: left;
}

.faq-title-compact {
    font-size: clamp(16px, 1.5vw, 22px);
    font-weight: 500;
    letter-spacing: -0.01em;
    transition: color 0.3s ease;
}

.faq-icon-compact {
    font-size: 20px;
    font-weight: 300;
    transition: transform 0.4s ease;
}

.faq-header-compact:hover .faq-title-compact {
    color: #ff2a00; /* Richiamo del rosso aziendale */
}

/* Animazione fluida apertura */
.faq-content-compact {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.faq-inner-compact {
    overflow: hidden;
}

.faq-inner-compact p {
    padding-bottom: 3vh;
    font-size: 14px;
    line-height: 1.5;
    color: #555555;
    max-width: 85%;
    margin: 0;
}

/* Stato aperto */
.faq-item-compact.is-open .faq-content-compact {
    grid-template-rows: 1fr;
}

.faq-item-compact.is-open .faq-icon-compact {
    transform: rotate(45deg);
}

@media (max-width: 980px) {
    .info-container {
        grid-template-columns: 1fr;
        gap: 60px;
    }
}












/* ==========================================================================
   PROCESS SECTION (Elegant Dark & Sticky)
   ========================================================================== */
.proc-section {
    position: relative;
    width: 100%;
    background-color: #050505; /* Fondo solido scuro */
    color: #ffffff;
}

/* Layout */
.proc-container {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 15vh var(--grid-margin);
    max-width: 1500px;
    margin: 0 auto;
}

/* Left Column (Sticky) */
.proc-left {
    flex: 0 0 42%;
    position: sticky;
    top: 25vh; /* Si blocca elegantemente a 1/4 dello schermo */
    height: max-content; 
    display: flex;
    flex-direction: column;
    gap: 40px; 
}

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

.proc-eyebrow {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #ffffff;
    font-weight: 500;
}

.proc-headline {
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
    color: #ffffff;
    letter-spacing: -0.02em;
}

/* Premium Button */
.proc-button-wrap {
    display: flex;
}

.proc-premium-btn {
    display: inline-flex;
    align-items: center;
    background-color: #ffffff;
    border-radius: 50px;
    padding: 6px 6px 6px 24px;
    color: #050505;
    text-decoration: none;
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.proc-premium-btn:hover {
    transform: translateY(-3px);
}

.proc-premium-btn .btn-text {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 15px;
}

.proc-premium-btn .btn-icon-circle {
    width: 32px;
    height: 32px;
    background-color: #050505;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s ease;
}

.proc-premium-btn:hover .btn-icon-circle {
    transform: translateX(2px);
}

/* Right Column (Scrolling Steps) */
.proc-right {
    flex: 0 0 45%;
    display: flex;
    flex-direction: column;
    padding-top: 10vh;
    padding-bottom: 25vh;
    gap: 120px; 
}

.proc-step {
    display: flex;
    flex-direction: column;
    gap: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 25px;
    will-change: filter, opacity, transform;
}

.proc-step-title {
    font-size: clamp(1.4rem, 2vw, 2rem);
    font-weight: 400;
    margin: 0;
    line-height: 1.1;
    color: #ffffff;
}

.proc-step-desc {
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    max-width: 90%;
}

@media (max-width: 980px) {
    .proc-container {
        flex-direction: column;
        gap: 80px;
    }
    .proc-left {
        position: relative;
        top: 0;
        width: 100%;
    }
    .proc-right {
        width: 100%;
        padding-top: 0;
        padding-bottom: 0;
        gap: 60px;
    }
}












/* ===============================
PHOTOGRAPHY SCATTER — SECTION CSS
(Only for this section)
=============================== */

.ps{
  position: relative;
  background: #ffffff;
  z-index: 10;
  overflow: clip;
}

.ps__sticky{
  position: relative;
  top: 0;
  height: 100vh;
  min-height: 100svh;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
}

/* GRID WRAP (under the mask) */
.ps__gridWrap{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 28px;
  pointer-events: none;
  z-index: 1;
  opacity: 0; /* fades in during transition */
}

.ps__grid{
  width: min(1280px, 92vw);
  height: min(78vh, 760px);
  display: grid;
  gap: 16px;

  /* Editorial tetris */
  grid-template-columns: 1.05fr 1.35fr 1.35fr 1.05fr;
  grid-template-rows: 1fr 1fr 0.72fr;
}

/* tile base */
.ps__tile{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  transform: translateZ(0);
  will-change: transform, opacity;
  background: #f2f2f2;
}

.ps__tile img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* layout tetris (7 elements) */
.ps__t1{ grid-column: 1 / 2; grid-row: 1 / 3; } /* left tall */
.ps__t2{ grid-column: 1 / 2; grid-row: 3 / 4; } /* left small */

.ps__t3{ grid-column: 2 / 4; grid-row: 1 / 3; } /* main slot big */
.ps__t4{ grid-column: 2 / 4; grid-row: 3 / 4; } /* bottom wide */

.ps__t5{ grid-column: 4 / 5; grid-row: 1 / 2; }
.ps__t6{ grid-column: 4 / 5; grid-row: 2 / 3; }
.ps__t7{ grid-column: 4 / 5; grid-row: 3 / 4; }

/* slot (only for measuring end rect) */
.ps__slot{
  position: absolute;
  inset: 0;
  visibility: hidden;
}

/* MAIN MASK (IMPORTANT: positioned in px; no translate centering here) */
.ps__mask{
  position: absolute;
  left: 0;
  top: 0;
  width: 320px;
  height: 560px;
  border-radius: 22px;
  overflow: hidden;
  z-index: 3;
  background: #111;
  will-change: left, top, width, height, border-radius;
  transform: none;
}

.ps__mask img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Mobile fallback (simpler tetris) */
@media (max-width: 820px){
  .ps__gridWrap{ padding: 0 16px; }
  .ps__grid{
    width: min(560px, 92vw);
    height: min(78vh, 760px);
    gap: 12px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1.15fr 0.85fr 0.65fr 0.65fr;
  }

  .ps__t3{ grid-column: 1 / 3; grid-row: 1 / 2; }
  .ps__t4{ grid-column: 1 / 3; grid-row: 2 / 3; }

  .ps__t1{ grid-column: 1 / 2; grid-row: 3 / 5; }
  .ps__t2{ grid-column: 2 / 3; grid-row: 3 / 4; }

  .ps__t5{ grid-column: 2 / 3; grid-row: 4 / 5; }
  .ps__t6{ display: none; }
  .ps__t7{ display: none; }
}










/* ==========================================================================
   PHOTOGRAPHY: DISCIPLINES & METRICS (STYLES)
   ========================================================================== */
.disciplines-section {
    background-color: #ffffff;
    color: #050505;
    font-family: 'Montserrat', sans-serif;
    padding: 150px 5vw; /* Tanto respiro sopra e sotto */
    position: relative;
    z-index: 10;
}

.disciplines-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1400px;
    margin: 0 auto;
    gap: 80px;
}

/* --- SINISTRA: Titolo e Metriche --- */
.disciplines-left {
    flex: 0 0 45%; 
    position: sticky;
    top: 150px;
    display: flex;
    flex-direction: column;
    gap: 60px; /* Distanza elegante tra il titolo e le metriche */
}

.disciplines-headline {
    font-size: clamp(2rem, 3.5vw, 3.5rem); 
    font-weight: 500;
    line-height: 1.2;
    margin: 0;
    letter-spacing: -0.02em; 
}

/* Stile delle Metriche / Risultati */
.disciplines-metrics {
    display: flex;
    gap: 40px;
    border-top: 1px solid rgba(0, 0, 0, 0.15); /* Linea divisione editoriale */
    padding-top: 30px;
}

.metric-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    will-change: transform, opacity;
}

.metric-value {
    font-size: clamp(2rem, 3vw, 2.5rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #050505;
    display: flex;
    align-items: flex-start;
}

.metric-number {
    display: inline-block;
}

.metric-accent {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    color: #ff2a00; /* Rosso aziendale */
    font-weight: 600;
    margin-left: 2px;
}

.metric-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #888888;
    font-weight: 500;
}

/* --- DESTRA: Elenco Servizi --- */
.disciplines-right {
    flex: 0 0 45%;
    display: flex;
    flex-direction: column;
    gap: 60px; /* Distanza tra i vari servizi */
    padding-top: 100px; /* Sfalsamento verticale desktop */
}

.discipline-item {
    display: flex;
    flex-direction: column;
    gap: 15px;
    will-change: transform, opacity;
}

.discipline-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    text-transform: capitalize; 
}

.discipline-desc {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    color: #555555;
    margin: 0;
    max-width: 90%;
}

/* --- RESPONSIVE MOBILE UNIFICATO ALLA FINE --- */
@media (max-width: 900px) {
    .disciplines-container {
        flex-direction: column;
        gap: 60px;
    }
    
    .disciplines-left {
        position: relative;
        top: 0;
        flex: 1 1 auto;
        gap: 40px;
    }
    
    .disciplines-metrics {
        gap: 30px;
        flex-wrap: wrap; /* Permette di andare a capo su mobile */
    }

    .disciplines-right {
        padding-top: 0; /* Rimuove lo sfalsamento verticale su mobile */
        flex: 1 1 auto;
    }
    
    .discipline-desc {
        max-width: 100%;
    }
}





/* ==========================================================================
   WEBSITES SHOWCASE
   ========================================================================== */

.websites-showcase,
.websites-showcase * {
  box-sizing: border-box;
}

.websites-showcase {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: #000;
  color: #fff;
}

.ws-slides {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 100%;
  overflow: hidden;
}

.ws-slide {
  grid-area: 1 / 1 / -1 / -1;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.ws-slide--current {
  opacity: 1;
  pointer-events: auto;
}

.ws-slide__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  will-change: transform, filter, opacity;
  transform-origin: 50% 50%;
}

.ws-slide__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.42) 0%,
    rgba(0, 0, 0, 0.08) 32%,
    rgba(0, 0, 0, 0.08) 68%,
    rgba(0, 0, 0, 0.20) 100%
  );
}

.ws-slide__content {
  position: absolute;
  left: 4vw;
  bottom: 4vh;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  max-width: 520px;
  pointer-events: auto;
}

.ws-slide__title {
  margin: 0;
  font-size: clamp(34px, 5vw, 72px);
  line-height: 0.94;
  letter-spacing: -0.05em;
  font-weight: 600;
  color: #fff;
}

.ws-slide__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.88);
  transition: color 0.25s ease, opacity 0.25s ease;
}

.ws-slide__link::after {
  content: "↗";
  transition: transform 0.25s ease;
}

.ws-slide__link:hover {
  color: #fff;
}

.ws-slide__link:hover::after {
  transform: translate(3px, -3px);
}

@media (max-width: 980px) {
  .websites-showcase {
    height: 100svh;
  }

  .ws-slide__content {
    left: 20px;
    right: 20px;
    bottom: calc(22px + env(safe-area-inset-bottom));
    max-width: calc(100% - 40px);
  }

  .ws-slide__title {
    font-size: clamp(28px, 10vw, 48px);
  }

  .ws-slide__link {
    font-size: 11px;
  }
}




/* --- Aggiunta per il blocco Tech di pagina Website (non intacca le metriche globali) --- */
.disciplines-tech-note {
    margin-top: 8vh;
    max-width: 280px;
    border-top: 1px solid rgba(5, 5, 5, 0.1);
    padding-top: 15px;
}

.disciplines-tech-note .tech-label {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: #050505;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.disciplines-tech-note .tech-description {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    line-height: 1.5;
    color: #888888;
    margin: 0;
}

















/* ==========================================================================
   CAPABILITIES SECTION (ELEGANT, WIDE & COMPACT)
   ========================================================================== */
.cine-list-section {
    background-color: #ffffff;
    color: #050505;
    padding: 8vh 2vw; /* Margini laterali ridotti per allargarsi ai bordi */
    position: relative;
}

.cine-list-container {
    width: 100%;
    max-width: none; /* Occupa tutto lo schermo */
}

.cine-list-header {
    margin-bottom: 5vh; 
}

.cine-list-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 600; /* Lievemente marcato per la label */
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #ff2a00; 
    margin-bottom: 15px;
}

.cine-list-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 400; /* Tipografia elegante e non aggressiva */
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #050505;
    max-width: 800px;
    margin: 0;
}

/* La lista fluida e tesa */
.cine-list-wrapper {
    display: flex;
    flex-direction: column;
}

.cine-list-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 2.5vh 0; /* Spazio verticale ridotto tra le voci */
    border-bottom: 1px solid rgba(5, 5, 5, 0.08); /* Linea divisoria molto delicata */
    transition: all 0.4s ease;
    cursor: default;
}

.cine-list-item:last-child {
    border-bottom: none; 
}

/* Lato sinistro: Numero e Titolo */
.cine-item-left {
    display: flex;
    align-items: baseline;
    gap: 3vw;
    width: 45%; 
}

.cine-num {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400; /* Sottile e delicato */
    color: #888888;
    letter-spacing: 0;
    transition: color 0.4s ease;
}

.cine-name {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(22px, 2.5vw, 36px);
    font-weight: 400; /* Niente grassetto urlato */
    letter-spacing: 0; /* Respiro naturale */
    text-transform: none; /* Mantiene il minuscolo/maiuscolo originale dell'HTML */
    color: #050505;
    margin: 0;
    transition: color 0.4s ease, transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Lato destro: Descrizione */
.cine-item-right {
    width: 50%; 
    display: flex;
    justify-content: flex-end; 
    align-items: center;
}

.cine-desc {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    line-height: 1.6; /* Più respiro tra le righe per la leggibilità */
    color: #888888;
    font-weight: 400; /* Testo descrittivo leggero */
    max-width: 500px; 
    margin: 0;
    text-align: right; 
}

/* --- INTERAZIONE HOVER --- */
.cine-list-item:hover .cine-name {
    color: #ff2a00;
    transform: translateX(12px); 
}

.cine-list-item:hover .cine-num {
    color: #ff2a00;
}

/* Adattamento per Smartphone */
@media (max-width: 768px) {
    .cine-list-item {
        flex-direction: column;
        gap: 8px; 
        padding: 3vh 0;
    }
    .cine-item-left, .cine-item-right {
        width: 100%;
        justify-content: flex-start;
    }
    .cine-item-right {
        padding-left: calc(14px + 3vw); 
    }
    .cine-desc {
        text-align: left; /* Su mobile allineiamo a sinistra */
    }
}




















/* ==========================================================================
   STICKY STATEMENT SCROLL (Blur + Diagonal Reveal)
   ========================================================================== */
.sticky-statement-section {
    position: relative;
    height: 100vh;
    width: 100%;
    background-color: #050505;
    overflow: hidden;
    z-index: 5;
}

.ss-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.ss-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    will-change: filter, transform;
    filter: grayscale(30%) contrast(1.1); /* Tono elegante */
}

.ss-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(5, 5, 5, 0.4);
    z-index: 1;
}

.ss-content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ss-text {
    position: absolute;
    text-align: center;
    padding: 0 4vw;
    opacity: 0;
    visibility: hidden;
    will-change: transform, opacity;
}

.ss-text h2 {
    font-size: clamp(32px, 4vw, 56px);
    font-weight: 400; /* Leggero, stile consulting */
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin: 0;
}







/* =========================================================
   PHOTOGRAPHY STICKY GRID — REVEAL FROM UNDER & CENTER FIX
   ========================================================= */

#photography-sticky-grid {
    position: relative;
    width: 100%;
    background-color: #050505;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
}

#photography-sticky-grid * {
    box-sizing: border-box;
}

#photography-sticky-grid ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#photography-sticky-grid img {
    display: block;
    width: 100%;
    height: auto;
}

/* 1. L'IMMAGINE INIZIALE (STA SOPRA A TUTTO) */
#photography-sticky-grid .block--intro {
    position: relative;
    z-index: 10;
    height: 100vh;
    background-color: #050505;
}

#photography-sticky-grid .media {
    position: relative; 
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

#photography-sticky-grid .media__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.6); 
}

#photography-sticky-grid .media__caption {
    position: absolute;
    bottom: 4vh;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #ffffff;
    z-index: 2;
}

/* 2. IL BACKGROUND NERO (STA SOTTO L'IMMAGINE) */
#photography-sticky-grid .block.block--main {
    position: relative;
    z-index: 1; 
    margin-top: -100vh; /* Nascosto sotto l'immagine iniziale */
    height: 450vh;
    background-color: #050505;
}

#photography-sticky-grid .block__wrapper {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    padding: 0 4vw;
    will-change: transform;
    overflow: hidden;
}

/* 3. I TESTI (Già presenti sul background nero) */
#photography-sticky-grid .content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 1; 
}

#photography-sticky-grid .content__title {
    width: min(90vw, 850px);
    font-size: clamp(36px, 6vw, 84px);
    line-height: 1.05;
    letter-spacing: -0.04em;
    font-weight: 500;
    margin: 0;
    color: #ffffff;
}

#photography-sticky-grid .content__description {
    width: min(90vw, 450px);
    margin-top: 3vh;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

#photography-sticky-grid .content__button {
    margin-top: 32px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 4px;
    transition: color 0.3s ease, border-color 0.3s ease;
}

#photography-sticky-grid .content__button:hover {
    color: #ff2a00;
    border-color: #ff2a00;
}

/* 4. LA GRIGLIA FOTOGRAFICA */
#photography-sticky-grid .gallery {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* FIX: Griglia di partenza molto più larga e d'impatto */
    width: clamp(320px, 55vw, 800px); 
    z-index: 2; 
    pointer-events: none; 
}

#photography-sticky-grid .gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: clamp(16px, 2vw, 32px);
    row-gap: clamp(16px, 2vw, 32px);
    will-change: transform;
}

#photography-sticky-grid .gallery__item {
    width: 100%;
    aspect-ratio: 1; 
    will-change: transform;
}

#photography-sticky-grid .gallery__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}












/* ==========================================================================
   MODIFICATORE HERO 3D (Permette il click sul canvas Spline)
   ========================================================================== */
.is-3d-interactive .service-overlay,
.is-3d-interactive .service-hero-screen {
    pointer-events: none;
}

/* Riattiva il click su tutti i testi e i link della barra inferiore */
.is-3d-interactive .hero-bottom-bar,
.is-3d-interactive .hero-title,
.is-3d-interactive .approach-label,
.is-3d-interactive .approach-text {
    pointer-events: auto;
}













/* ==========================================================================
   PROCESS SECTION - 3D ANIMATION PAGE
   ========================================================================== */
.process-section {
    background-color: #ffffff;
    color: #050505;
    padding: 15vh 4vw;
    font-family: 'Montserrat', sans-serif;
    position: relative;
    z-index: 10;
}

.process-container {
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Fondamentale per far funzionare lo sticky */
    gap: 8vw;
}

/* --- COLONNA DI SINISTRA (STICKY) --- */
.process-left {
    flex: 0 0 35%;
    position: sticky;
    top: 20vh; /* Si ferma al 20% dall'alto dello schermo */
}

.process-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #555555;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
}

.process-headline {
    font-size: clamp(2.5rem, 4vw, 4.5rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 0 0 30px 0;
}

.process-desc {
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.6;
    color: #555555;
    max-width: 90%;
}

/* --- COLONNA DI DESTRA (SCORREVOLE) --- */
.process-right {
    flex: 0 0 55%;
    display: flex;
    flex-direction: column;
    gap: 10vh; /* Spazio tra la lista e l'immagine */
}

.process-list {
    display: flex;
    flex-direction: column;
}

.process-item {
    padding: 60px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.process-item:last-child {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.process-item-header {
    display: flex;
    align-items: baseline;
    gap: 20px;
    margin-bottom: 20px;
}

.process-number {
    font-size: 0.85rem;
    font-weight: 600;
    color: #050505;
}

.process-title {
    font-size: clamp(1.5rem, 2vw, 2.2rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    margin: 0;
}

.process-item-text {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #555555;
    padding-left: 40px; /* Allinea il testo sotto il titolo, saltando il numero */
    max-width: 85%;
}

/* --- IMMAGINE STOCK (SCROLL STOPPER) --- */
.process-image-wrapper {
    width: 100%;
    height: 70vh; /* Altezza generosa */
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.process-stock-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.1); /* Zoom inziale per l'effetto parallasse JS */
    transform-origin: center;
}

/* --- RESPONSIVE --- */
@media (max-width: 980px) {
    .process-container {
        flex-direction: column;
        gap: 60px;
    }
    .process-left {
        position: relative;
        top: 0;
        flex: 1 1 100%;
    }
    .process-right {
        flex: 1 1 100%;
    }
    .process-item-text {
        padding-left: 0;
        max-width: 100%;
    }
}










/* ==========================================================================
   PROCESS SECTION - DARK THEME
   ========================================================================== */
.process-dark-section {
    background-color: #0a0a0a; /* Sfondo scuro profondo per coerenza col resto del sito */
    color: #ffffff;
    padding: 15vh 4vw;
    font-family: 'Montserrat', sans-serif;
    position: relative;
    z-index: 10;
}

.process-dark-container {
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8vw;
}

/* --- COLONNA DI SINISTRA (STICKY) --- */
.process-dark-left {
    flex: 0 0 35%;
    position: sticky;
    top: 20vh;
}

.process-dark-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #888888;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
}

.process-dark-headline {
    font-size: clamp(2.5rem, 4vw, 4.5rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 0 0 30px 0;
    color: #ffffff;
}

.process-dark-desc {
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.6;
    color: #a0a0a0;
    max-width: 90%;
}

/* --- COLONNA DI DESTRA (SCORREVOLE) --- */
.process-dark-right {
    flex: 0 0 55%;
    padding-bottom: 10vh; /* Permette all'ultimo elemento di scorrere bene in alto */
}

.process-dark-list {
    display: flex;
    flex-direction: column;
}

.process-dark-item {
    padding: 60px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Linee sottili e chiare */
}

.process-dark-item:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.process-dark-item-header {
    display: flex;
    align-items: baseline;
    gap: 20px;
    margin-bottom: 20px;
}

.process-dark-number {
    font-size: 0.85rem;
    font-weight: 600;
    color: #ffffff;
}

.process-dark-title {
    font-size: clamp(1.5rem, 2vw, 2.2rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    margin: 0;
    color: #ffffff;
}

.process-dark-item-text {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #a0a0a0;
    padding-left: 40px;
    max-width: 85%;
}

/* --- RESPONSIVE --- */
@media (max-width: 980px) {
    .process-dark-container {
        flex-direction: column;
        gap: 60px;
    }
    .process-dark-left {
        position: relative;
        top: 0;
        flex: 1 1 100%;
    }
    .process-dark-right {
        flex: 1 1 100%;
        padding-bottom: 0;
    }
    .process-dark-item-text {
        padding-left: 0;
        max-width: 100%;
    }
}







/* ==========================================================================
   MICRO-TYPOGRAPHY SECTIONS (SWEETPUNK STYLE - ALL WHITE)
   ========================================================================== */
.micro-section {
    background-color: #050505; /* Nero profondo */
    color: #ffffff; /* Testo base bianco */
    padding: 12vh 4vw;
    font-family: 'Montserrat', sans-serif;
    position: relative;
    z-index: 10;
}

.micro-faq-section {
    padding-top: 4vh;
    padding-bottom: 15vh;
}

.micro-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2.5fr 9.5fr; /* Griglia rigorosa asimmetrica */
    gap: 6vw;
    align-items: start;
}

/* --- ETICHETTE LATERALI (PICCOLE E BIANCHE) --- */
.micro-header {
    position: sticky;
    top: 25vh;
}

.micro-label {
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #ffffff; /* Bianco e visibile */
    display: inline-block;
}

/* --- GRIGLIA CAPABILITIES --- */
.micro-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 60px;
    border-top: 1px solid rgba(255, 255, 255, 0.15); /* Linea leggermente più visibile */
    padding-top: 40px;
}

.micro-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.micro-index {
    font-size: 9px;
    font-weight: 600;
    color: #ffffff; /* Indice bianco */
}

.micro-title {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: #ffffff; /* Titolo bianco */
    margin: 0;
}

.micro-desc {
    font-size: 11px;
    font-weight: 400;
    line-height: 1.6;
    color: #ffffff; /* Descrizione bianca e visibile */
    margin: 0;
    max-width: 90%;
}

/* --- ACCORDION THE DETAILS (FAQ - TUTTO BIANCO) --- */
.micro-accordion {
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

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

.micro-acc-head {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    background: transparent;
    border: none;
    color: #ffffff;
    cursor: pointer; /* Cursore standard professionally */
    text-align: left;
}

.micro-acc-title {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.01em;
    transition: color 0.3s ease;
}

.micro-acc-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff; /* Icona bianca */
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Rimosso hover grigio, rimane bianco su bianco */
.micro-acc-head:hover .micro-acc-title {
    color: #ffffff; 
}

/* Animazione fluida apertura */
.micro-acc-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.micro-acc-inner {
    overflow: hidden;
}

.micro-acc-inner p {
    padding-bottom: 30px;
    font-size: 11px;
    line-height: 1.6;
    color: #ffffff; /* Risposta bianca */
    margin: 0;
    max-width: 75%;
}

/* Stato Attivo Accordion */
.micro-acc-item.is-open .micro-acc-body {
    grid-template-rows: 1fr;
}

.micro-acc-item.is-open .micro-acc-icon {
    transform: rotate(45deg); /* Solo rotazione icona */
}

/* --- RESPONSIVE --- */
@media (max-width: 980px) {
    .micro-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .micro-header {
        position: relative;
        top: 0;
    }
    .micro-grid {
        grid-template-columns: 1fr;
    }
    .micro-acc-inner p {
        max-width: 100%;
    }
}














/* ==========================================================================
   BIG MARQUEE SECTION (MODERN & CHUNKY)
   ========================================================================== */
.marquee-section {
    background-color: #050505; /* Fondo scuro per far risaltare il testo */
    padding: 12vh 0;
    overflow: hidden;
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.marquee-container {
    width: 100%;
    overflow: hidden;
}

.marquee-track {
    display: flex;
    width: max-content;
    /* 20s è la velocità . Abbassalo se lo vuoi più veloce */
    animation: marquee-scroll 25s linear infinite; 
}

.marquee-content {
    display: flex;
    align-items: center;
    gap: 4vw; /* Spazio tra le parole */
    padding-right: 4vw;
}

.marquee-text {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(60px, 10vw, 140px); /* Molto grosso su desktop, scala su mobile */
    font-weight: 700;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    color: #ffffff;
}

/* Un pallino per separare le parole, usando il rosso del tuo brand */
.marquee-dot {
    width: clamp(15px, 3vw, 30px);
    height: clamp(15px, 3vw, 30px);
    background-color: #ff2a00; 
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/* L'animazione fluida in CSS puro */
@keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Si sposta esattamente di metà (un blocco intero) per fare un loop perfetto */
}

/* Responsive: accelera leggermente su mobile perché lo schermo è stretto */
@media (max-width: 980px) {
    .marquee-track {
        animation-duration: 15s;
    }
}







/* ==========================================================================
   PLATFORM ROLLER SECTION (WHITE, MINIMAL, MASSIVE TYPOGRAPHY)
   ========================================================================== */
.roller-section {
    background-color: #ffffff; /* Sfondo bianco puro */
    color: #050505; /* Testo nero profondo */
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    z-index: 10;
    font-family: 'Montserrat', sans-serif;
}

.roller-container {
    display: flex;
    align-items: flex-start;
    gap: 1.5vw;
    font-size: clamp(40px, 7vw, 110px);
    font-weight: 500;
    letter-spacing: -0.04em;
    /* Aumentato da 1 a 1.15 per dare spazio alle lettere basse (g, p, y) */
    line-height: 1.15; 
}

/* La metà di sinistra parte fuori dallo schermo */
.roller-left {
    transform: translateX(-60vw);
    white-space: nowrap;
}

/* La metà di destra parte fuori dallo schermo e fa da "finestra" */
.roller-right {
    transform: translateX(60vw);
    /* L'altezza della maschera deve essere identica al line-height */
    height: 1.15em; 
    overflow: hidden;
    position: relative;
    /* ECCO IL ROSSO BRUYER */
    color: #ff2a00; 
}

/* Il binario verticale delle parole */
.roller-words {
    display: flex;
    flex-direction: column;
    will-change: transform;
}

.roller-words span {
    display: block;
    /* Anche le singole parole devono avere la stessa altezza esatta */
    height: 1.15em; 
    white-space: nowrap;
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 980px) {
    .roller-container {
        flex-direction: column; /* Su mobile li mettiamo uno sopra l'altro */
        align-items: center;
        gap: 10px;
    }
    .roller-left {
        transform: translateY(-30vh); /* Arriva dall'alto */
    }
    .roller-right {
        transform: translateY(30vh); /* Arriva dal basso */
    }
}





/* ==========================================================================
   NASCONDI MENU MOBILE SU DESKTOP
   ========================================================================== */
@media screen and (min-width: 981px) {
    #aww-mobile-menu,
    #aww-menu-trigger {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}






/* ==========================================================================
   COOKIE BANNER - DESKTOP MAIN
   ========================================================================== */
.cookie-banner {
    position: fixed;
    bottom: 30px;
    left: 30px;
    width: 380px;
    max-width: calc(100vw - 60px);
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    z-index: 99999;
    padding: 24px;
    color: #ffffff;
    
    /* Stato iniziale per l'animazione */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s;
}

.cookie-banner.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.cookie-header { margin-bottom: 12px; }
.cookie-title { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #ffffff; }
.cookie-text { font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, 0.7); margin: 0 0 20px 0; }
.cookie-actions { display: flex; gap: 12px; }
.cookie-btn { flex: 1; padding: 10px 16px; font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; border-radius: 4px; transition: all 0.3s ease; text-align: center; }
.cookie-btn-outline { background: transparent; border: 1px solid rgba(255, 255, 255, 0.2); color: #ffffff; }
.cookie-btn-outline:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.5); }
.cookie-btn-solid { background: #ffffff; border: 1px solid #ffffff; color: #050505; }
.cookie-btn-solid:hover { background: #e6e6e6; border-color: #e6e6e6; }






/* ==========================================================================
   LEGAL PAGES (Privacy Policy, Terms & Conditions)
   ========================================================================== */
.legal-main {
    padding-top: 150px; /* Spazio per l'header */
    padding-bottom: 100px;
    background-color: #000000;
    min-height: 100vh;
}

.legal-container {
    max-width: 800px; /* Larghezza ristretta per un'ottima leggibilità */
    margin: 0 auto;
    padding: 0 var(--grid-margin);
}

.legal-header {
    margin-bottom: 60px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 30px;
}

.legal-title {
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    margin-bottom: 10px;
    color: #ffffff;
}

.legal-date {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.05em;
}

.legal-content h2 {
    font-size: 20px;
    font-weight: 600;
    margin-top: 50px;
    margin-bottom: 20px;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.legal-content p {
    font-size: 16px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 20px;
}

/* --- MOBILE RESPONSIVE FOR LEGAL PAGES --- */
@media (max-width: 980px) {
    .legal-main {
        padding-top: 120px;
        padding-bottom: 60px;
    }
    
    .legal-header {
        margin-bottom: 40px;
    }
    
    .legal-content h2 {
        font-size: 18px;
        margin-top: 40px;
    }
    
    .legal-content p {
        font-size: 15px;
    }
}