@font-face{
    font-family:"Serotiva";
    src:url("../assets/font/Serotiva-SemiBold.otf") format("opentype");
    font-weight:600;
    font-style:normal;
    font-display:swap;
  }
  
  *{ margin:0; padding:0; box-sizing:border-box; }
  
  :root{
    --pad:12px;
    --text-light:#EAE9E8;
    --text-dark:#253126;
    --bg:#EAE9E8;
    --accent:#ff3b30;
  }
  
  body{
    background:var(--bg);
    font-family:"tt-commons-pro",sans-serif;
    font-weight:400;
    color:var(--text-dark);
  }
  
  /* =========================
     HERO + VIDEO
  ========================= */
  .hero{
    position:relative;
    min-height:100vh;
    padding:var(--pad);
    color:var(--text-light);
  }
  
  /* video fixed con cornice */
  .hero-media{
    position:fixed;
    inset:var(--pad);
    z-index:0;
    overflow:hidden;
    transition:inset 600ms ease;
  }
  
  body.is-scrolled .hero-media{ inset:0; }
  
  .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;
  }
  
  /* overlay solo prima schermata */
  .hero-overlay{
    position:relative;
    height:calc(100vh - (var(--pad) * 2));
    z-index:5;
    pointer-events:none;
  }
  
  /* =========================
     HEADER
  ========================= */
  .site-header{
    position:fixed;
    top:30px;
    left:30px;
    right:30px;
  
    display:flex;
    justify-content:space-between;
    align-items:center;
  
    z-index:1000;
    pointer-events:auto;
  }
  
  .logo img{ height:32px; }
  
  .menu{
    position:relative;
    display:flex;
    align-items:center;
  }
  
  .menu-bar{
    display:flex;
    align-items:center;
    gap:64px;
    padding:14px 132px 14px 32px;
    background:var(--bg);
  }
  
  .menu-bar a{
    font-size:20px;
    color:var(--text-dark);
    text-decoration:none;
    font-weight:300;
  }
  
  .menu-login{
    position:absolute;
    top:50%;
    right:4px;
    transform:translateY(-50%);
  
    padding:11px 28px;
    background:var(--text-dark);
    color:var(--text-light);
  
    font-size:20px;
    font-weight:300;
    text-decoration:none;
  }
  
  /* =========================
     HERO TEXT
  ========================= */
  .hero-overlay .hero-content,
  .hero-overlay .hero-description{
    position:absolute;
    left:clamp(16px,3vw,32px);
    z-index:10;
    pointer-events:none;
  }
  
  .hero-overlay .hero-content{
    top:clamp(148px,12vh,220px);
  }
  
  .hero-overlay .hero-content h1{
    font-family:"Serotiva",serif;
    font-size:96px;
    line-height:94px;
    font-weight:400;
  }
  
  .hero-overlay .hero-description{
    bottom:clamp(10px,3vw,28px);
    font-size:28px;
    font-weight:200;
    line-height:32px;
    max-width:1200px;
  }
  
  /* =========================
     WHAT WE DO
  ========================= */
  .whatwedo{
    position:relative;
    z-index:50;
    margin-top:0;
  
    --steps: 3; /* fallback */
    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,30px);
  }
  
  /* label */
  .whatwedo-label{
    display:inline-flex;
    align-items:center;
    gap:9px;
    font-size:20px;
    font-weight:100;
    text-transform:lowercase;
  
    background:rgba(209,208,209,0.40);
    padding:2px 10px;
    color:#E6362A;
  
    position:relative;
    z-index:2;
  }
  
  .whatwedo-label .dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#E6362A;
  }
  
  /* progress line full width */
  .whatwedo-line{
    margin-top:18px;
    height:1.5px;
    background:rgba(209,208,209,0.50);
    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:#EAE9E8;
  }
  
  /* frame testo (limita overflow come Figma) */
  .whatwedo-textwrap{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
  
    padding:0 clamp(16px,3vw,40px);
    overflow:hidden;
    transform: translateY(-20px);
  }
  
  /* item (colonna dentro frame) */
  .whatwedo-item{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
  
    right:clamp(16px,3vw,40px);
    width:auto;
    max-width:min(850px,62vw);
  
    opacity:0;
    transition: opacity 220ms ease;
    will-change: opacity;
  }
  
  .whatwedo-item.is-active{ opacity:1; }
  
  /* tipografia */
  .whatwedo-item p{
    width:100%;
    max-width:100%;
  
    font-family:"tt-commons-pro",sans-serif;
    font-weight:300;
    font-size:clamp(48px,2.6vw,52px);
    line-height:1.12;
    letter-spacing:-0.2px;
    margin:0;
    text-align:left;
  
    hyphens:none;
    word-break:normal;
    overflow-wrap:normal;
    white-space:normal;
  
    font-kerning:none;
    font-variant-ligatures:none;
    font-feature-settings:"kern" 0,"liga" 0,"clig" 0;
  }
  
  /* layers */
  .whatwedo-item .p-base{
    color:rgba(255,255,255,0.25);
  }
  
  .whatwedo-item .p-reveal{
    position:absolute;
    inset:0;
    color:rgba(255,255,255,0.95);
    pointer-events:none;
  }
  
  /* =========================
     LINE-LOCKED WORD FILL
  ========================= */
  .wwd-lines{ display:block; }
  
  .wwd-line{
    display:block;
    white-space:nowrap; /* riga bloccata (decisa dal JS) */
  }
  
  .wwd-word{
    display:inline;
    white-space:pre;    /* spazio dentro parola */
  }
  
  .p-base .wwd-word{ opacity:1; }
  
  .p-reveal .wwd-word{
    opacity:0;
    transition: opacity 140ms linear;
    will-change: opacity;
  }
  
  @media (prefers-reduced-motion: reduce){
    .p-reveal .wwd-word{ transition:none; }
  }