/* =========================
   FONTS
========================= */
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-BlackItalic.otf);font-weight:900;font-style:italic;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-Black.otf);font-weight:900;font-style:normal;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-ExtraBold.otf);font-weight:800;font-style:normal;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-ExtraBoldItalic.otf);font-weight:800;font-style:italic;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-Bold.otf);font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-BoldItalic.otf);font-weight:700;font-style:italic;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-SemiBold.otf);font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-SemiBoldItalic.otf);font-weight:600;font-style:italic;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-Medium.otf);font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-MediumItalic.otf);font-weight:500;font-style:italic;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-Regular.otf);font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-RegularItalic.otf);font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-Light.otf);font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-LightItalic.otf);font-weight:300;font-style:italic;font-display:swap;}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
html, body{width:100%;}

:root{
  --pad:24px;
  --hamburger-size:32px;
  --report-col-width:min(680px,44vw);
  --content-x:48%;
  --content-w:50%;
  --text-light:#EAE9E8;
  --text-dark:#253126;
  --gray-dark:#A7A6A6;
  --gray-light:#D1D0D1;
  --bg:#EAE9E8;
  --bg-dark:#253126;
  --accent:#ff3b30;
  --video-steps:4;
}

body{
  background:var(--bg);
  font-family:"tt-commons-pro",sans-serif;
  font-weight:400;
  color:var(--text-light);
  overflow-x:hidden;
}

/* ===== VIDEO WRAPPER ===== */
.video-wrapper{
  position:absolute;
  inset:0 auto auto 0;
  width:100vw;
  height:calc(var(--video-steps)*100vh);
}

/* video fixed con cornice */
/* Stato iniziale: Angoli retti */
.hero-media {
    position: sticky;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    overflow: hidden;
    
    /* Forza il raggio a zero all'inizio */
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    
    /* Transizione fluida */
    transition: border-radius 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Stato Scrollato: Applica il raggio */
body.is-scrolled .hero-media {
    border-bottom-left-radius: 30px !important;
    border-bottom-right-radius: 30px !important;
}

.hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.50);
  z-index:1;
  pointer-events:none;
}
.hero-video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.hero{
  position:relative;
  min-height:100vh;
  padding:var(--pad);
}

/* overlay solo prima schermata */
.hero-overlay{
  position:relative;
  height:calc(100vh - (var(--pad)*2));
  z-index:5;
  pointer-events:none;
}

/* =========================
   BASE
========================= */
body{
  background:#EAE9E8;
  font-family:"tt-commons-pro",sans-serif;
  color:#253126;
}

.hero{
  position:relative;
  padding:var(--pad);
  width: 100%;
}

/* HERO OVERLAY - Rimosso margin-top auto e altezza fissa */
.hero-overlay {
  position: relative;
  z-index: 5;
  pointer-events: none;
  display: flex;
  flex-direction: column;
}

/* HEADER */
/* --- LOGO & HEADER --- */
.hero-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: clamp(10px, 2vw, 24px) clamp(16px, 3vw, 48px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 9999;
    pointer-events: none;
  }

@media (max-width: 980px) {
  :root {
    --content-x: 0%;
    --content-w: 100%;
  }

  .whatwedo-item {
    left: 0;
    width: 100%;
    padding: 0;
  }

  .whatwedo-item .p-base,
  .whatwedo-item .p-reveal {
    padding: 0 clamp(24px, 4vw, calc(var(--pad) * 2));
  }

  .wwd-line,
  .wwd-word {
    white-space: normal;
  }

  .whatwedo-item p {
    overflow-wrap: anywhere;
  }

  .whatwedo-item br {
    display: none;
  }
}

/* --- LOGO WRAP --- */
.logo-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    height: 40px;
    --r: 6px;
    border-radius: var(--r);
    transition: background-color 300ms ease;
    pointer-events: auto;
  }
  
  /* Stato quando si inizia a scrollare */
  body.ui-scrolled .logo-wrap {
    background-color: #D1D0D1; /* Il tuo grigio --gray-light */
  }
  
  /* Rimuovi assolutamente il vecchio blur */
  .logo-blur {
    display: none !important;
  }
  
  .logo img {
    height: 28px;
    width: auto;
    display: block;
    transition: opacity 300ms ease; /* Per rendere fluido il cambio src */
  }

/* TITOLO E SOTTOTITOLO */ /* copiare tutta per prima parte senza immagine */
.hero {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Occupa tutta l'altezza dello schermo */
    padding: var(--pad);
  }
  
  .hero-content {
    /* Cambia da clamp(80px, 12vh, 24px) a quello di Technology */
    margin-top: clamp(80px, 12vh, 56px); 
    margin-left: clamp(16px, 3vw, calc(var(--pad)/4));
    z-index: 10;
    pointer-events: none;
}

  .hero-content h1{
    font-family:"Serotiva",serif;
    font-size:clamp(42px, 7vw, 100px);
    line-height:1;
    font-weight:600;
    color:#EAE9E8;
  }
  
  .hero-description {
    z-index: 10;
    pointer-events: none;
    font-size: clamp(18px, 2vw, 28px);
    font-weight: 300;
    line-height: 1.3;
    max-width: 1200px;
    margin-top: auto; /* Spinge la descrizione in fondo */
    margin-bottom: 6px;
    margin-left: clamp(16px, 3vw, calc(var(--pad)/4));
    max-width: 1200px;
    color: #EAE9E8;
  }

  .hero-media {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 0;
    overflow: hidden;
}

/* Stato iniziale per i titoli e descrizioni */
.hero-content h1, 
.hero-description {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), 
                transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform;
}

/* Classe attivata da JS */
body.is-loaded .hero-content h1,
body.is-loaded .hero-description {
    opacity: 1;
    transform: translateY(0);
}

/* Ritardo per la descrizione (per far apparire prima il titolo) */
body.is-loaded .hero-description {
    transition-delay: 0.4s;
}

   /* WHAT WE DO */
   .whatwedo{
    position:relative;
    z-index:1;
    margin-top:0;
    --steps:3;
    height:calc(var(--steps)*100vh);
  }
  .whatwedo-sticky{
    position:sticky;
    top:0;
    height:100vh;
    pointer-events:none;
  }
  .whatwedo-top{
    position:absolute;
    top:140px;
    left:0;
    right:0;
    padding:0 clamp(16px,3vw,calc(var(--pad)*2));
  }
  .whatwedo-label{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:20px;
    font-weight:300;
    color:#EAE9E8;
    position:relative;
    z-index:2;
  }
  .whatwedo-line{
    margin-top:18px;
    height:1.5px;
    background:#A7A6A6;
    position:relative;
    overflow:hidden;
    width:100vw;
    left:50%;
    transform:translateX(-50%);
  }
  .whatwedo-line-progress{
    position:absolute;
    left:0;
    top:0;
    height:1.5px;
    width:0%;
    background:var(--bg);
  }
  .whatwedo-textwrap{
    position:absolute;
    inset:0;
    display:flex;
    align-items:right;
    overflow:hidden;
    height:100%;
  }
  .whatwedo-item{
    position:absolute;
    top:225px;
    left:var(--content-x);
    width:var(--content-w);
    opacity:0;
    transition:opacity 220ms ease;
    will-change:opacity;
  }
  .whatwedo-item.is-active{opacity:1;}
  .whatwedo-item p{
    font-size: clamp(24px, 3.8vw, 46px);
    line-height: 1.1;
    font-weight: 300;
    color: #EAE9E8;
  }
  .whatwedo-item .p-base{color:var(--gray-dark);opacity:0.4;}
  .whatwedo-item .p-reveal{
    position:absolute;
    inset:0;
    color:#EAE9E8;
    pointer-events:none;
  }
  
  .wwd-lines{display:block;}
  .wwd-line{display:block;white-space:nowrap;}
  .wwd-word{display:inline;white-space:pre;}
  .p-base .wwd-word{opacity:1;}
.p-reveal .wwd-word{
  opacity:0;
  transition:opacity 140ms linear;
  will-change:opacity;
}

@media (max-width: 980px) {
  .whatwedo-item,
  .whatwedo-item p {
    max-width: 100%;
  }

  .whatwedo-item .p-base,
  .whatwedo-item .p-reveal {
    padding: 0 clamp(24px, 4vw, calc(var(--pad) * 2));
  }

  .wwd-line,
  .wwd-word {
    white-space: normal;
  }

  .whatwedo-item p {
    overflow-wrap: anywhere;
  }
}
  @media (prefers-reduced-motion:reduce){
    .p-reveal .wwd-word{transition:none;}
  }
  
/* ===== REPORT (HOME) - FIXED ===== */
.report {
    width: 100%;
    background: var(--bg); /* Assicura lo sfondo corretto */
  }
  
  .report-top {
    /* Usiamo var(--pad) per coerenza con il resto del sito */
    padding: 80px clamp(16px, 3vw, 48px); 
    display: grid;
    /* Colonna 1: Titolo | Colonna 2: Contenuto (Testo + Stats) */
    grid-template-columns: clamp(150px, 20vw, 250px) 1fr; 
    column-gap: clamp(40px, 8vw, 100px);
    row-gap: 64px; 
    align-items: start;
  }
  
  .report-label {
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px; /* Allinea visivamente il pallino alla prima riga di testo */
  }

  /* STILE ETICHETTA UNIFICATO (Ereditato da Engagement Card) */
.system-label, 
.report-label, 
.leadership-label, 
.subscribe-label {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Rimuoviamo posizionamenti assoluti se presenti per gestire tutto con i margini dei contenitori */
}

.system-label .dot, 
.report-label .dot, 
.leadership-label .dot,
.subscribe-label .dot {
    width: 6px;
    height: 6px;
    background-color: var(--accent); /* #E6362A */
    border-radius: 50%;
    flex-shrink: 0;
}

.system-label .label-text, 
.report-label .label-text, 
.leadership-label .label-text,
.subscribe-label .label-text {
    font-size: 20px;
    font-weight: 300; /* Stile extra-light di Technology */
    line-height: 1.2;
    color: var(--text-dark); /* Default per pagine chiare */
}

/* ECCEZIONE: Quando l'etichetta è dentro una card scura (Engagement) */
.engagement-card-label .label-text {
    color: var(--text-light); /* #EAE9E8 */
}

/* Forza il testo ad allinearsi secondo le variabili globali */
.report-text {
    grid-column: 1 / -1; /* Occupa tutta la larghezza della grid per gestire il margine internamente */
  }
  
  .report-text p {
    font-size: clamp(20px, 2.5vw, 28px);
    line-height: 1.4;
    font-weight: 300;
    color: var(--text-dark);
    
    /* APPLICAZIONE LOGICA STEPS */
    width: var(--content-w);    /* Larghezza definita nelle variabili (50%) */
    margin-left: var(--content-x); /* Posizionamento orizzontale (48%) */
  }
  
  /* Forza le statistiche ad allinearsi sotto il paragrafo */
  .report-stats {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: clamp(20px, 4vw, 40px);
    
    /* APPLICAZIONE LOGICA STEPS */
    width: var(--content-w);    /* Stessa larghezza del testo sopra */
    margin-left: var(--content-x); /* Stesso punto di inizio del testo sopra */
    margin-top: 48px;
  }
  
  /* Assicurati che il contenitore padre non forzi allineamenti strani */
  .report-top {
    display: block; /* Passiamo a block perché il posizionamento è gestito dai margini variabili */
    padding: 80px clamp(16px, 3vw, 48px);
    position: relative;
  }
  
  /* Il Titolo rimane assoluto o fisso a sinistra come nella pagina steps */
  .report-label {
    position: absolute;
    left: clamp(16px, 3vw, 48px); /* Allineato al padding della pagina */
    top: 90px; /* Regola in base all'altezza del testo */
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .stat {
    display: flex;
    flex-direction: column;
  }
  
  .stat-value {
    margin-bottom: 12px;
    font-size: clamp(48px, 7vw, 84px);
    line-height:1.05;
    color:#E6362A;
    font-weight:400;
  }
  
  .stat-label {
    font-size: clamp(14px, 1.5vw, 20px);
    line-height: 1.1;
    color: #E6362A;
    font-weight: 200;
  }
  
  /* Modifica il Media Query per allineare tutto a sinistra su mobile */
  @media (max-width: 980px) {
    .report-top {
      grid-template-columns: 1fr;
      row-gap: 32px;
    }

    .report-label {
      position: static;
      margin-bottom: 24px;
    }
    
    .report-text, .report-stats {
      grid-column: 1;
      max-width: 100%;
    }

    .report-stats {
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
    }
  }