/* =========================================================
   Noventra — shared styles for all pages
   Split out of /; changes here apply everywhere.
   ========================================================= */

/* ===== house typeface: Proxima Nova ===== */
@font-face{
  font-family:'Proxima Nova';
  src:url('fonts/proximanova-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Proxima Nova';
  src:url('fonts/proximanova-700.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Proxima Nova';
  src:url('fonts/proximanova-800.woff2') format('woff2');
  font-weight:800; font-style:normal; font-display:swap;
}

  :root{ --red:#f33801; --ink:#0d0e11; --nav-h:68px;
         --letter:'Proxima Nova', ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
  *{box-sizing:border-box}
  html{scroll-behavior:auto; scrollbar-width:none; -ms-overflow-style:none}
  html::-webkit-scrollbar, body::-webkit-scrollbar{width:0; height:0; display:none}
  body{
    margin:0; background:#07080c; color:#fff;
    font-family:var(--letter);
    line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:clip;
  }

  /* ===== navigation ===== */
  nav{position:fixed; top:0; left:0; width:100%; height:var(--nav-h); z-index:30;
      display:flex; align-items:center; gap:1.1rem; padding:0 clamp(1rem,4vw,2.4rem);
      background:transparent; transition:background .35s ease, backdrop-filter .35s ease}
  nav.stuck{background:rgba(7,8,12,.82); backdrop-filter:blur(14px);
           border-bottom:1px solid rgba(255,255,255,.1)}
  nav .brand{display:flex; align-items:center}
  nav .brand img{width:auto; height:30px}

  /* ===== film stage ===== */
  .film{position:relative}                 /* height is set by JS */
  .sticky{position:sticky; top:0; height:100vh; overflow:hidden; background:#07080c}
  .sticky video, .sticky .still{
    position:absolute; top:0; left:0; right:0; bottom:0;
    width:100%; height:100%; object-fit:cover; display:block
  }
  .sticky .still{opacity:0; transition:opacity .12s linear; z-index:1}
  .sticky .still.on{opacity:1; transition:opacity .18s linear}

  /* gradient for legibility; adjustable per stop */
  .haze{position:absolute; top:0; left:0; width:100%; height:100%; z-index:2; pointer-events:none;
        transition:opacity .2s ease, background .2s ease}
  .haze.left{background:linear-gradient(to right, rgba(4,6,12,.86) 0%, rgba(4,6,12,.34) 44%, transparent 72%)}
  .haze.right{background:linear-gradient(to left, rgba(4,6,12,.86) 0%, rgba(4,6,12,.34) 44%, transparent 72%)}
  .haze.none{background:none}
  /* hero: soft borderless vignette so logo and text stay legible everywhere */
  .haze.hero{background:radial-gradient(120% 90% at 50% 46%, transparent 34%, rgba(4,6,12,.55) 100%)}

  /* ===== glass base ===== */
  .glass{background:linear-gradient(160deg, rgba(20,24,34,.62), rgba(9,11,17,.52));
        backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
        border:1px solid rgba(255,255,255,.13); border-radius:14px;
        box-shadow:0 18px 48px -22px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.14)}

  /* ===== tabs ===== */
  .tabs{display:inline-flex; align-self:flex-start; width:auto; flex:none;
        gap:.2rem; padding:.22rem; border-radius:999px; margin-top:1.2rem;
        background:rgba(9,11,17,.5); backdrop-filter:blur(14px);
        border:1px solid rgba(255,255,255,.13)}
  .tabs button{appearance:none; border:0; cursor:pointer; color:rgba(255,255,255,.66);
               background:transparent; font:700 .82rem/1 inherit; padding:.5rem 1.05rem;
               border-radius:999px; transition:color .2s, background .2s}
  .tabs button[aria-selected="true"]{color:#fff; background:rgba(243,56,1,.9);
               box-shadow:0 6px 18px -8px rgba(243,56,1,.9)}
  .tab-panel{display:none; align-self:flex-start; width:100%; max-width:620px;
             margin-top:.9rem; padding:1.05rem 1.15rem}
  .tab-panel.on{display:block}
  .tab-panel p{margin:0; font-size:.93rem; line-height:1.6; color:rgba(255,255,255,.82)}
  .tab-panel .panel-head{display:block; margin:0 0 .4rem; font-size:.93rem; line-height:1.4;
                        font-weight:600; color:#fff}

  /* ===== KPI gauges (Performance) ===== */
  .meters{display:grid; gap:.55rem; margin-top:1.2rem; max-width:700px}
  .meter{padding:.8rem 1rem}
  .meter-head{display:flex; align-items:center; gap:.1rem; font-size:.88rem}
  .meter-head > span{flex:1; text-align:left; color:rgba(255,255,255,.88)}
  .meter-head .target{font-weight:800; color:#fff; font-variant-numeric:tabular-nums; margin-left:.6rem}
  .lane{height:4px; border-radius:99px; background:rgba(255,255,255,.14); margin-top:.55rem; overflow:hidden}
  .lane i{display:block; height:100%; border-radius:99px; width:0;
          background:linear-gradient(90deg,#ff5323,#f33801); transition:width 1s cubic-bezier(.2,.7,.2,1)}

  /* blocks and steps inherit the glass base */
  .block.wide{max-width:1060px}
  /* stop 2: the dashboard sits on the left, so the text goes right */
  .block.right{left:auto; right:0; margin-left:auto}



  /* ===== closing on the last poster (stop 6, the earth) ===== */
  .block.outro{align-items:center; text-align:center; max-width:none;
             padding-left:clamp(1.4rem,7vw,7rem); padding-right:clamp(1.4rem,7vw,7rem)}
  .block .claim{margin-top:1.9rem; color:rgba(255,255,255,.5);
               font-size:.86rem; font-style:italic; letter-spacing:.01em}
  body.static .block.outro, body.static .block.wide{justify-content:flex-end; align-items:flex-start; text-align:left}
  body.static .block.outro{align-items:center; text-align:center}


  /* ===== text blocks ===== */
  .texts{position:absolute; top:0; left:0; width:100%; height:100%; z-index:3}
  .block{
    position:absolute; top:0; left:0; width:100%; height:100%;
    display:flex; flex-direction:column; justify-content:center;
    padding:var(--nav-h) clamp(1.4rem,7vw,7rem) 12vh;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .2s ease, visibility 0s linear .2s;
    max-width:760px
  }
  .block.on{opacity:1; visibility:visible; pointer-events:auto;
            transition:opacity .2s ease, visibility 0s linear 0s}
  .block.tall{justify-content:flex-start; padding-top:calc(var(--nav-h) + 8vh)}
  .block .label{font-size:.7rem; font-weight:700; letter-spacing:.2em;
               text-transform:uppercase; color:var(--red); margin-bottom:.9rem}
  .block h1, .block h2{font-size:clamp(1.9rem,4.4vw,3.2rem); letter-spacing:-.03em;
           line-height:1.08; margin:0 0 .9rem; text-wrap:balance}
  .block p{margin:0; font-size:clamp(1rem,1.5vw,1.16rem); color:rgba(255,255,255,.82); max-width:52ch}
  .placeholder{opacity:.5; font-style:italic}

  body.static .scroll-icon{display:none}
  @media(max-width:820px){ .scroll-icon{display:none} }

  /* ===== static mode: mobile + prefers-reduced-motion ===== */
  body.static .sticky{position:static; height:auto; overflow:visible}
  body.static .sticky video, body.static .sticky .still, body.static .haze{display:none}
  body.static .texts{position:static}
  body.static .block{
    position:relative; inset:auto; opacity:1; visibility:visible; pointer-events:auto; min-height:100svh;
    max-width:none; background-size:cover; background-position:center;
    justify-content:flex-end; padding-bottom:14vh
  }
  body.static .block::before{content:""; position:absolute; top:0; left:0; width:100%; height:100%;
    background:linear-gradient(to top, rgba(4,6,12,.92) 0%, rgba(4,6,12,.45) 42%, rgba(4,6,12,.1) 75%)}
  body.static .block > *{position:relative}

  /* ===== film loader: small, never blocks the page ===== */
  .loader{position:fixed; right:18px; bottom:18px; z-index:40; width:168px;
          padding:.55rem .75rem .65rem; border-radius:10px;
          background:rgba(7,8,12,.72); border:1px solid rgba(255,255,255,.12);
          backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
          font-size:.72rem; font-weight:600; letter-spacing:.04em; color:rgba(255,255,255,.75);
          opacity:0; visibility:hidden; transform:translateY(6px);
          transition:opacity .35s, transform .35s, visibility 0s linear .35s}
  .loader.visible{opacity:1; visibility:visible; transform:none; transition:opacity .35s, transform .35s}
  .loader-label{display:flex; justify-content:space-between; margin-bottom:.4rem}
  .loader-label b{color:#fff; font-variant-numeric:tabular-nums}
  .loader-track{display:block; height:3px; border-radius:3px; background:rgba(255,255,255,.14); overflow:hidden}
  .loader-track i{display:block; height:100%; width:0; background:var(--red); transition:width .2s linear}
  body.static .loader{display:none}
  @media(prefers-reduced-motion:reduce){ .loader, .loader-track i{transition:none} }

  /* ===== tuning panel ===== */
  #panel{position:fixed; left:12px; bottom:12px; z-index:60; display:none;
          background:rgba(7,8,12,.9); border:1px solid rgba(255,255,255,.16); border-radius:10px;
          padding:.7rem .85rem; font:500 11px/1.5 ui-monospace,Menlo,monospace; color:#cbd0d8;
          backdrop-filter:blur(10px); min-width:210px}
  #panel.on{display:block}
  #panel b{color:#fff; float:right}
  #panel label{display:block; margin-top:.5rem; color:#8b93a1}
  #panel input[type=range]{width:100%}
  #panel .good{color:#5fd08a} #panel .warn{color:#e8b33c}

  /* ===== navigation links ===== */
  /* page titles sit right; the film sections have their own column on the left */
  .nav-links{margin-left:auto; flex:none;
             display:flex; align-items:center; gap:.2rem}
  .nav-links .btn{margin-left:.55rem}
  .nav-links a{color:rgba(255,255,255,.7); font-size:.82rem; font-weight:600;
               padding:.4rem .7rem; border-radius:8px; text-decoration:none; cursor:pointer;
               transition:color .2s, background .2s; white-space:nowrap}
  .nav-links a:hover{color:#fff; background:rgba(255,255,255,.1)}
  .nav-links a.active{color:#fff}
  .nav-links .btn{background:var(--red); color:#fff; padding:.5rem .95rem;
                   border-radius:999px; font-weight:700}
  .nav-links .btn:hover{background:#ff5526}
  /* language switch (written by tools/build.py): NL | EN, the current one filled */
  .lang-switch{display:flex; align-items:center; gap:2px; margin-left:.45rem; padding:2px; border-radius:999px;
               border:1px solid rgba(255,255,255,.18)}
  .nav-links .lang-switch a{padding:.22rem .5rem; border-radius:999px; font-size:.72rem; font-weight:700; letter-spacing:.04em}
  .nav-links .lang-switch a[aria-current]{color:var(--ink); background:#fff}

  .block h1 em, .block h2 em{font-style:normal; color:var(--red)}
  .block h1, .block h2, .block p, .block .label{text-shadow:0 2px 24px rgba(4,6,12,.6), 0 1px 4px rgba(4,6,12,.5)}
  .hero .wm{filter:drop-shadow(0 2px 10px rgba(4,6,12,.45))}

  /* ===== hero: logo over the clouds poster ===== */
  .block.hero{align-items:center; text-align:center; max-width:none;
             padding-left:clamp(1.4rem,7vw,7rem); padding-right:clamp(1.4rem,7vw,7rem)}
  .block.hero h2, .block.hero p{margin-left:auto; margin-right:auto}
  .block.hero p{max-width:56ch}
  .hero .brand-mark{width:clamp(62px,8.5vw,92px); height:auto; margin:0 0 1.05rem;
                   display:block; overflow:visible}
  .hero .brand-mark path{fill:var(--red); opacity:0;
                        transform-box:fill-box; transform-origin:50% 50%;
                        animation:brandSwipe .78s cubic-bezier(.2,.75,.25,1) forwards}
  .hero .brand-mark path:nth-child(1){animation-delay:.10s}
  .hero .brand-mark path:nth-child(2){animation-delay:.24s}
  .hero .brand-mark path:nth-child(3){animation-name:brandCorner; animation-delay:.42s}
  .hero .brand-mark path:nth-child(4){animation-name:brandCorner; animation-delay:.50s}
  @keyframes brandSwipe{from{opacity:0; transform:translate(-16%, 16%)} to{opacity:1; transform:none}}
  @keyframes brandCorner{from{opacity:0; transform:scale(.45)} to{opacity:1; transform:none}}
  .hero .wm{height:clamp(22px,3.2vw,30px); margin-bottom:1.8rem}
  .btn-large{display:inline-flex; align-items:center; gap:.6rem; color:#fff; font-weight:700;
              font-size:.95rem; padding:.9rem 1.7rem; border-radius:999px; margin-top:1.9rem;
              text-decoration:none;
              background:linear-gradient(135deg, #ff5323, #d63000);
              box-shadow:0 12px 30px -10px rgba(243,56,1,.75), inset 0 1px 0 rgba(255,255,255,.28);
              transition:transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s}
  .btn-large::after{content:"→"; transition:transform .2s}
  .btn-large:hover{transform:translateY(-2px);
                    box-shadow:0 18px 40px -12px rgba(243,56,1,.9), inset 0 1px 0 rgba(255,255,255,.3)}
  .btn-large:hover::after{transform:translateX(4px)}

  /* starts below the hero text and moves to middle-right on scroll.
     both states are a transform, so the move animates smoothly */
  .scroll-icon{position:fixed; left:50%; top:50%; z-index:24; pointer-events:none;
               transform:translate(-50%, 25vh);
               transition:transform .7s cubic-bezier(.2,.75,.25,1), opacity .45s ease;
               opacity:0}
  .scroll-icon.visible{opacity:1}
  .scroll-icon.aside{transform:translate(calc(50vw - 2.6rem - 22px), -50%)}
  /* the word is absolutely positioned so it doesn't affect the element's width
     and the right-hand position calculation stays correct */
  .scroll-icon .word{position:absolute; top:100%; left:50%; transform:translateX(-50%);
                      margin-top:.6rem; white-space:nowrap;
                      font-size:.7rem; font-weight:700; letter-spacing:.18em;
                      text-transform:uppercase; color:rgba(255,255,255,.58);
                      text-shadow:0 2px 12px rgba(4,6,12,.6);
                      transition:opacity .3s ease}
  .scroll-icon.aside .word{opacity:0}
  .scroll-icon .arrow{display:block; width:22px; height:35px; border-radius:13px;
                     border:2px solid rgba(255,255,255,.45); position:relative;
                     box-shadow:0 2px 14px rgba(4,6,12,.45)}
  .scroll-icon .arrow::after{content:""; position:absolute; left:50%; top:7px; width:3px; height:8px;
    border-radius:2px; background:var(--red); transform:translateX(-50%);
    animation:drop 1.6s ease-in-out infinite}
  @keyframes drop{0%,100%{transform:translate(-50%,0); opacity:1} 60%{transform:translate(-50%,11px); opacity:.2}}
  @media (prefers-reduced-motion: reduce){
    .hero .brand-mark path{animation:none; opacity:1; transform:none}
    .scroll-icon .arrow::after{animation:none}
    .scroll-icon{transition:opacity .45s ease}
  }
  body.static .block.hero{justify-content:center; text-align:center; align-items:center}


  /* ===== footer ===== */
  footer a{color:var(--red)}


  /* ===== click area on the dashboard screen ===== */
  .hotspot{position:absolute; z-index:4; padding:0; margin:0; border:0; background:none;
           cursor:pointer; -webkit-tap-highlight-color:transparent}
  .hotspot[hidden]{display:none}
  /* corner brackets instead of a full border: the frame lands exactly on the
     screen corners and doesn't cut through the people in front of it */
  .hs-frame{--frame-color:rgba(243,56,1,.92); position:absolute; top:0; left:0; width:100%; height:100%;
            background:
              linear-gradient(var(--frame-color),var(--frame-color)) left  top    / 10% 2px no-repeat,
              linear-gradient(var(--frame-color),var(--frame-color)) right top    / 10% 2px no-repeat,
              linear-gradient(var(--frame-color),var(--frame-color)) left  bottom / 10% 2px no-repeat,
              linear-gradient(var(--frame-color),var(--frame-color)) right bottom / 10% 2px no-repeat,
              linear-gradient(var(--frame-color),var(--frame-color)) left  top    / 2px 12% no-repeat,
              linear-gradient(var(--frame-color),var(--frame-color)) right top    / 2px 12% no-repeat,
              linear-gradient(var(--frame-color),var(--frame-color)) left  bottom / 2px 12% no-repeat,
              linear-gradient(var(--frame-color),var(--frame-color)) right bottom / 2px 12% no-repeat;
            filter:drop-shadow(0 0 9px rgba(243,56,1,.6));
            animation:hsBreathe 2.6s ease-in-out infinite; transition:filter .2s}
  @keyframes hsBreathe{0%,100%{opacity:.65} 50%{opacity:1}}
  .hs-pulse{position:absolute; top:50%; left:50%; width:13px; height:13px; margin:-6.5px 0 0 -6.5px;
           border-radius:50%; background:var(--red); box-shadow:0 0 12px rgba(243,56,1,.9)}
  .hs-pulse::after{content:""; position:absolute; top:50%; left:50%; width:13px; height:13px;
                  margin:-6.5px 0 0 -6.5px; border-radius:50%; border:2px solid var(--red);
                  animation:hsRing 2s cubic-bezier(.2,.7,.2,1) infinite}
  @keyframes hsRing{0%{transform:scale(1); opacity:.9} 100%{transform:scale(3.4); opacity:0}}
  .hs-label{position:absolute; left:50%; top:-.5rem; transform:translate(-50%,-100%);
            display:inline-flex; align-items:center; gap:.42rem; white-space:nowrap;
            padding:.44rem .8rem; border-radius:999px; font:700 .76rem/1 inherit; color:#fff;
            background:rgba(9,11,17,.72); backdrop-filter:blur(12px);
            border:1px solid rgba(243,56,1,.55); box-shadow:0 10px 26px -12px rgba(0,0,0,.9);
            transition:background .2s, border-color .2s}
  .hs-label svg{width:13px; height:13px; color:var(--red)}
  .hotspot:hover .hs-frame{--frame-color:#fff; filter:drop-shadow(0 0 14px rgba(243,56,1,.85))}
  .hotspot:hover .hs-label{background:var(--red); border-color:var(--red)}
  .hotspot:hover .hs-label svg{color:#fff}
  .hotspot:focus-visible{outline:2px solid #fff; outline-offset:4px; border-radius:8px}

  /* button in the text */
  .view-btn{display:inline-flex; align-items:center; gap:.5rem; align-self:flex-start;
            margin-top:1.1rem; padding:.62rem 1.05rem; border-radius:999px; cursor:pointer;
            font:700 .84rem/1 inherit; color:#fff;
            background:rgba(9,11,17,.55); backdrop-filter:blur(14px);
            border:1px solid rgba(255,255,255,.2);
            transition:background .2s, border-color .2s, transform .2s}
  .view-btn svg{width:15px; height:15px; color:var(--red); transition:color .2s}
  .view-btn:hover{background:var(--red); border-color:var(--red); transform:translateY(-1px)}
  .view-btn:hover svg{color:#fff}

  /* ===== lightbox ===== */
  .lightbox{position:fixed; top:0; left:0; width:100%; height:100%; z-index:80;
            display:flex; align-items:center; justify-content:center; padding:4vh 3vw;
            background:rgba(4,6,12,.86); backdrop-filter:blur(10px);
            opacity:0; transition:opacity .25s ease}
  .lightbox[hidden]{display:none}
  .lightbox.on{opacity:1}
  .lightbox figure{margin:0; max-width:1500px; width:100%; display:flex;
                   flex-direction:column; align-items:center; gap:.8rem}
  .lightbox img{max-width:100%; max-height:84vh; width:auto; height:auto; display:block;
                border-radius:10px; border:1px solid rgba(255,255,255,.14);
                box-shadow:0 40px 100px -30px rgba(0,0,0,.95);
                transform:scale(.97); transition:transform .3s cubic-bezier(.2,.7,.2,1)}
  .lightbox.on img{transform:scale(1)}
  .lightbox figcaption{font-size:.82rem; color:rgba(255,255,255,.6); letter-spacing:.01em}
  .lb-close{position:absolute; top:1.3rem; right:1.5rem; width:40px; height:40px; border-radius:50%;
            display:grid; place-items:center; cursor:pointer; font:300 26px/1 inherit; color:#fff;
            background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
            transition:background .2s, border-color .2s}
  .lb-close:hover{background:var(--red); border-color:var(--red)}
  @media (prefers-reduced-motion: reduce){
    .hs-frame, .hs-pulse::after{animation:none}
    .lightbox img{transition:none}
  }

  /* ===== full footer ===== */
  footer.site{padding:12vh clamp(1.4rem,7vw,7rem) 4vh}
  footer .wrap{display:grid; gap:2.6rem 2rem; max-width:1180px; margin:0 auto;
               grid-template-columns:repeat(4, 1fr); align-items:start}
  footer .wrap > div p{color:var(--text); font-size:.9rem; max-width:34ch}
  footer h4{margin:0 0 .7rem; font-size:.72rem; font-weight:700; letter-spacing:.18em;
            text-transform:uppercase; color:var(--ink)}
  footer ul{list-style:none; margin:0; padding:0; display:grid; gap:.42rem}
  footer li{color:var(--text); font-size:.9rem}
  footer .footer-bar{grid-column:1/-1; display:flex; flex-wrap:wrap; gap:.6rem 1.4rem;
                justify-content:space-between; padding-top:1.8rem; margin-top:1rem;
                border-top:1px solid rgba(13,14,17,.1);
                color:var(--muted); font-size:.82rem}
  @media(max-width:860px){ footer .wrap{grid-template-columns:1fr 1fr} }
  @media(max-width:560px){ footer .wrap{grid-template-columns:1fr} }

/* =========================================================
   Standalone pages: dropdown menu on narrow screens
   ========================================================= */

/* ---- dropdown menu for narrow screens ---- */
.nav-toggle{display:none; margin-left:auto; width:40px; height:40px; padding:0;
         background:none; border:1px solid rgba(255,255,255,.18); border-radius:10px;
         cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:4px}
.nav-toggle span{display:block; width:17px; height:1.6px; border-radius:2px; background:#fff;
              transition:transform .25s, opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5.6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)}

@media(max-width:1360px){
  .nav-toggle{display:flex}
  .nav-links{position:fixed; top:var(--nav-h); left:0; width:100%; margin:0; flex:none;
             flex-direction:column; align-items:stretch; gap:.1rem; padding:.7rem clamp(1rem,4vw,2.4rem) 1.1rem;
             background:rgba(7,8,12,.97); backdrop-filter:blur(16px);
             border-bottom:1px solid rgba(255,255,255,.1);
             box-shadow:0 22px 46px -22px rgba(0,0,0,.9)}
  .nav-links[hidden]{display:none}
  .nav-links a{font-size:.95rem; padding:.62rem .55rem}
  .nav-links .btn{margin:.55rem 0 0; text-align:center; justify-content:center}
  .lang-switch{align-self:flex-start; margin:.5rem 0 0 .45rem}
  .nav-links .lang-switch a{padding:.35rem .8rem; font-size:.8rem}
  }
@media(min-width:1361px){
  .nav-links{display:flex !important}
}

/* =========================================================
   Stop rail: the film's sections, fixed to the left side
   ========================================================= */
/* note: this is a <nav>, so the bar rules above apply too —
   width, height, padding and alignment must be reset explicitly */
.stop-rail{position:fixed; left:clamp(.9rem,1.6vw,1.6rem); top:50%; right:auto; z-index:25;
          width:auto; height:auto; padding:0; gap:1.45rem;
          transform:translateY(-50%); display:none;
          flex-direction:column; align-items:flex-start; justify-content:center;
          background:none; opacity:0; visibility:hidden; pointer-events:none;
          transition:opacity .45s ease, visibility 0s linear .45s}
.stop-rail.on{opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s}

/* the line runs from the center of the first dot to the center of the last */
.rail-line{position:absolute; left:4px; top:5px; bottom:5px; width:2px; border-radius:2px;
           background:rgba(255,255,255,.17); overflow:hidden}
.rail-line i{position:absolute; left:0; top:0; width:100%; height:0; border-radius:2px;
             background:linear-gradient(180deg,#ff8a4d,var(--red));
             box-shadow:0 0 8px rgba(243,56,1,.75), 0 0 18px rgba(243,56,1,.4);
             transition:height .18s linear}

.rail-item{position:relative; display:flex; align-items:center; gap:.7rem;
           text-decoration:none; cursor:pointer}
.rail-dot{width:10px; height:10px; flex:none; border-radius:50%;
           background:#0a0c12; border:2px solid rgba(255,255,255,.38);
           transition:border-color .25s, background .25s, transform .25s, box-shadow .25s}
.rail-name{font-size:.78rem; font-weight:600; letter-spacing:-.005em; white-space:nowrap;
           color:rgba(255,255,255,.55); text-shadow:0 1px 10px rgba(4,6,12,.85);
           transition:color .25s, transform .25s}
.rail-item:hover .rail-dot{border-color:rgba(243,56,1,.8)}
.rail-item:hover .rail-name{color:rgba(255,255,255,.88)}
.rail-item:focus-visible{outline:2px solid var(--red); outline-offset:4px; border-radius:6px}

.rail-item.current .rail-dot{background:var(--red); border-color:var(--red); transform:scale(1.25);
                         box-shadow:0 0 10px rgba(243,56,1,.9), 0 0 22px rgba(243,56,1,.45)}
.rail-item.current .rail-name{color:#fff; transform:translateX(2px)}
/* already passed: highlight, but don't shout */
.rail-item.done .rail-dot{border-color:rgba(243,56,1,.6)}
.rail-item.done .rail-name{color:rgba(255,255,255,.68)}

/* only show when there's room; the text blocks then shift right */
@media(min-width:1100px){
  .stop-rail{display:flex}
  .block:not(.hero):not(.outro){padding-left:clamp(11rem,13vw,13.5rem)}
}
/* a right-aligned block keeps the rail clear without extra indent */
@media(min-width:1100px){
  .block.right:not(.hero):not(.outro){padding-left:clamp(1.4rem,7vw,7rem)}
}
body.static .stop-rail{display:none}

/* =========================================================
   FAQ dropdown in the bar
   ========================================================= */
.navmenu{position:relative; display:flex; align-items:center}
.navmenu-arrow{display:grid; place-items:center; width:22px; height:24px; margin-left:-.45rem;
              padding:0; background:none; border:0; cursor:pointer;
              color:rgba(255,255,255,.55); transition:color .2s, transform .25s}
.navmenu-arrow:hover{color:#fff}
.navmenu-arrow[aria-expanded="true"]{transform:rotate(180deg)}
.navmenu-arrow svg{width:13px; height:13px}
.navmenu-panel{position:absolute; top:calc(100% + .55rem); left:50%; transform:translateX(-50%);
                width:max-content; min-width:215px; padding:.4rem; z-index:40;
                border-radius:14px; border:1px solid rgba(255,255,255,.16);
                background:linear-gradient(160deg, rgba(23,27,38,.97), rgba(10,12,18,.97));
                backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
                box-shadow:0 24px 54px -20px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.1)}
.navmenu-panel a{display:block; padding:.5rem .65rem; border-radius:9px;
                  font-size:.83rem; font-weight:500; color:rgba(255,255,255,.78);
                  text-decoration:none; white-space:nowrap; transition:background .16s, color .16s}
.navmenu-panel a:hover{background:rgba(243,56,1,.16); color:#fff}
.navmenu-all{margin-top:.2rem; padding-top:.55rem !important;
               border-top:1px solid rgba(255,255,255,.1); color:var(--red) !important}
/* on wide screens it also opens on hover; the hover itself
   is handled by page.js, so the panel doesn't snap shut when you brush past */
@media(min-width:1361px){
  .navmenu:focus-within .navmenu-panel{display:block}
  /* invisible bridge over the gap: the mouse doesn't lose the panel */
  .navmenu-panel::before{content:""; position:absolute; left:0; right:0;
                          top:-.65rem; height:.65rem}
}
/* in the narrow column it belongs in the list, not floating above it */
@media(max-width:1360px){
  .navmenu{flex-wrap:wrap}
  .navmenu-head{flex:1}
  .navmenu-arrow{width:38px; height:38px; margin:0}
  .navmenu-arrow svg{width:15px; height:15px}
  .navmenu-panel{position:static; transform:none; width:100%; min-width:0; margin:.15rem 0 .35rem;
                  background:rgba(255,255,255,.04); box-shadow:none;
                  border-color:rgba(255,255,255,.1)}
  .navmenu-panel a{font-size:.9rem; padding:.55rem .6rem}
}

/* =========================================================
   Footer as closing block: hairline, closing line and link columns
   ========================================================= */
footer.site{position:relative; overflow:hidden}

/* hairline fading from orange to nothing */
.footer-edge{position:absolute; top:0; left:0; right:0; height:1px; pointer-events:none;
           background:linear-gradient(to right, transparent 4%, rgba(243,56,1,.9) 24%,
                      rgba(243,56,1,.45) 52%, transparent 88%)}
.footer-band{grid-column:1/-1; position:relative; text-align:center;
           padding-bottom:3rem; margin-bottom:.6rem;
           border-bottom:1px solid rgba(13,14,17,.1)}
.footer-band h2{margin:0 auto; font-size:clamp(1.75rem,4.4vw,3.1rem); line-height:1.12;
              letter-spacing:-.03em; color:var(--ink); text-wrap:balance}
.footer-band h2 em{font-style:normal; color:var(--red)}
/* gradient across the letters, but only where the browser supports it */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .footer-band h2 em{background:linear-gradient(100deg,#ff9257,var(--red) 64%);
                   -webkit-background-clip:text; background-clip:text; color:transparent}
}

/* dash before the column headings */
footer h4{display:flex; align-items:center; gap:.5rem}
footer h4::before{content:""; width:14px; height:2px; border-radius:2px;
                  background:var(--red); flex:none}

footer li a{display:inline-block; transition:color .2s, transform .2s}
footer li a:hover{color:var(--red); transform:translateX(3px)}

footer .footer-bar{position:relative}

/* contact column: company name on top, a little air before the phone number */
footer li strong{color:var(--ink); font-weight:700}
footer li.contact-gap{margin-top:.55rem}


/* =========================================================
   Light theme — opt in with <body class="theme-light">
   (light page, nav and footer)
   ========================================================= */
.theme-light{--paper:#f7f5f2; --surface:#fff; --text:#4a4f5a; --muted:#7a808c; --line:rgba(13,14,17,.09);
             background:var(--paper); color:var(--ink)}
/* homepage: the part below the film (FAQ and footer) is light; it scrolls over the sticky film */
.page-tail{position:relative; z-index:4}
/* homepage: the nav turns light once the light part below the film reaches it (page.js) */
nav.nav-light{--paper:#f7f5f2; --surface:#fff; --line:rgba(13,14,17,.09)}
nav .brand-light{display:none}
nav.nav-light .brand-dark{display:none}
nav.nav-light .brand-light{display:block}
.theme-light nav, nav.nav-light{background:rgba(247,245,242,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
                 border-bottom:1px solid var(--line)}
.theme-light .nav-links a, nav.nav-light .nav-links a{color:rgba(13,14,17,.66)}
.theme-light .nav-links a:hover, nav.nav-light .nav-links a:hover{color:var(--ink); background:rgba(13,14,17,.06)}
.theme-light .nav-links a.active, nav.nav-light .nav-links a.active{color:var(--ink)}
.theme-light .nav-links .btn, .theme-light .nav-links .btn:hover, nav.nav-light .nav-links .btn, nav.nav-light .nav-links .btn:hover{color:#fff; background:var(--red)}
.theme-light .nav-links .btn:hover, nav.nav-light .nav-links .btn:hover{background:#ff5526}
.theme-light .navmenu-arrow, nav.nav-light .navmenu-arrow{color:rgba(13,14,17,.45)}
.theme-light .navmenu-arrow:hover, nav.nav-light .navmenu-arrow:hover{color:var(--ink)}
.theme-light .navmenu-panel, nav.nav-light .navmenu-panel{background:var(--surface); border-color:var(--line);
                            box-shadow:0 24px 54px -24px rgba(13,14,17,.35)}
.theme-light .navmenu-panel a, nav.nav-light .navmenu-panel a{color:rgba(13,14,17,.75)}
.theme-light .navmenu-panel a:hover, nav.nav-light .navmenu-panel a:hover{background:rgba(243,56,1,.08); color:var(--ink)}
.theme-light .navmenu-all, nav.nav-light .navmenu-all{border-top-color:var(--line)}
.theme-light .lang-switch, nav.nav-light .lang-switch{border-color:rgba(13,14,17,.15)}
.theme-light .nav-links .lang-switch a[aria-current], nav.nav-light .nav-links .lang-switch a[aria-current]{color:#fff; background:var(--ink)}
.theme-light .nav-toggle, nav.nav-light .nav-toggle{border-color:rgba(13,14,17,.18)}
.theme-light .nav-toggle span, nav.nav-light .nav-toggle span{background:var(--ink)}
@media(max-width:1360px){
  .theme-light .nav-links, nav.nav-light .nav-links{background:var(--paper); border-bottom-color:var(--line);
                          box-shadow:0 22px 46px -22px rgba(13,14,17,.3)}
  .theme-light .navmenu-panel, nav.nav-light .navmenu-panel{background:rgba(13,14,17,.03); box-shadow:none}
}
/* light footer.site: warm paper fading into soft orange, a dotted texture and a giant outlined wordmark */
footer.site{background:
    radial-gradient(ellipse 70% 60% at 88% 105%, rgba(243,56,1,.20), transparent 70%),
    radial-gradient(ellipse 50% 45% at 6% 0%, rgba(255,146,87,.12), transparent 70%),
    linear-gradient(180deg, #f1ece5 0%, #f6e7dc 100%);
  border-top:1px solid var(--line);
  padding-top:clamp(3rem,7vh,4.5rem); padding-bottom:calc(4vh + clamp(5.5rem,15vw,15rem))}
/* fine dot grid, fading out towards the bottom */
footer.site::before{content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(13,14,17,.11) 1px, transparent 1.2px); background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, transparent 75%); mask-image:linear-gradient(180deg, #000 0%, transparent 75%)}
/* the wordmark as a big outlined signature along the bottom edge */
footer.site::after{content:"NOVENTRA"; position:absolute; left:50%; bottom:0; transform:translate(-50%, 24%);
  font-size:clamp(3rem,18vw,21rem); font-weight:800; line-height:1; letter-spacing:-.045em; white-space:nowrap;
  color:transparent; -webkit-text-stroke:1.5px rgba(243,56,1,.42); pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg, #000 20%, rgba(0,0,0,.25) 90%); mask-image:linear-gradient(180deg, #000 20%, rgba(0,0,0,.25) 90%)}
footer.site .wrap{position:relative; z-index:1}
footer.site .footer-edge{background:linear-gradient(to right, transparent 4%, rgba(243,56,1,.7) 24%,
                                 rgba(243,56,1,.3) 52%, transparent 88%)}

footer.site .footer-band{border-bottom-color:rgba(13,14,17,.1); padding-bottom:3.4rem}
footer.site .footer-band h2{color:var(--ink); font-size:clamp(2rem,5.2vw,3.9rem); letter-spacing:-.04em}
footer.site .wrap > div p{color:var(--text)}
footer.site h4{color:var(--ink)}
footer.site li{color:var(--text)}
footer.site li strong{color:var(--ink)}
footer.site li a{color:var(--text); text-decoration:none; background:linear-gradient(var(--red), var(--red)) left bottom / 0 1px no-repeat;
                         transition:color .2s, transform .2s, background-size .25s}
footer.site li a:hover{color:var(--ink); background-size:100% 1px}
footer.site .footer-bar{border-top-color:rgba(13,14,17,.1); color:var(--muted)}
@media(max-width:560px){
  footer.site{padding-bottom:calc(4vh + 5rem)}
}

/* footer logo: logo.svg (icon + wordmark) */
footer .footer-logo{display:inline-block}
footer .footer-logo img{display:block; height:36px; width:auto}

/* =========================================================
   Cookie banner (consent.js)
   ========================================================= */
.cookie-banner{position:fixed; left:clamp(1rem,3vw,1.6rem); bottom:clamp(1rem,3vw,1.6rem); z-index:60;
               width:min(420px, calc(100vw - 2rem)); padding:1.1rem 1.2rem;
               background:rgba(13,14,17,.94); color:rgba(255,255,255,.86);
               border:1px solid rgba(255,255,255,.14); border-radius:14px;
               backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
               box-shadow:0 18px 50px rgba(0,0,0,.35); font-size:.86rem; line-height:1.55}
.cookie-banner[hidden]{display:none}
.cookie-banner p{margin:0}
.cookie-banner a{color:#fff; text-decoration:underline; text-underline-offset:2px}
.cookie-actions{display:flex; gap:.6rem; margin-top:.9rem}
.cookie-actions button{flex:1; padding:.62rem 1rem; border-radius:999px; cursor:pointer;
                       font:700 .82rem/1 var(--letter); letter-spacing:.02em}
.cookie-decline{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.4)}
.cookie-accept{background:#fff; color:var(--ink); border:1px solid #fff}
.cookie-actions button:hover{border-color:#fff}
.cookie-accept:hover{background:var(--red); border-color:var(--red); color:#fff}
.cookie-actions button:focus-visible{outline:2px solid var(--red); outline-offset:2px}