/* Page navigation shared by every service page and case study:
   1. a section bar that stays under the menu (also on phones) and lights up the current section
   2. the menu hides while reading down and comes back on the way up
   3. jumps land below the bars
   5. a "Top" button bottom right, shown once the reader heads back up */

:root{ --pn-nav:0px; --pn-bar:56px }   /* one bar at the top: logo, sections, case study */
@media (max-width:640px){ :root{ --pn-bar:50px } }

/* 2. the menu slides away on scroll down, back on scroll up (300 ms) */
.nav{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.pn-up .nav{transform:translateY(-100%)}

/* 1. section bar */
.secbar{position:sticky; top:var(--pn-nav); z-index:19; background:rgba(0,0,0,.82); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid #1E1E22; transition:top .3s cubic-bezier(.2,.7,.2,1)}
.pn-up .secbar{top:0}
.secbar-in{display:flex; align-items:center; gap:12px; height:var(--pn-bar)}
.secbar-logo{flex:none; font-weight:600; font-size:20px; color:#fff; letter-spacing:-0.02em; text-decoration:none; margin-right:12px}
.secbar-logo span{color:#2F54FF}
@media (max-width:900px){ .secbar-logo{display:none} }
.secbar-back{flex:none; display:inline-flex; align-items:center; gap:8px; font-size:14px; color:#C9C9CF; text-decoration:none; padding-right:14px; border-right:1px solid #2A2A30; height:24px; white-space:nowrap}
.secbar-back:hover{color:#fff}
.secbar-back svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.secbar-list{flex:1; min-width:0; display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image:linear-gradient(90deg, #000 calc(100% - 28px), transparent)}
.secbar-list::-webkit-scrollbar{display:none}
.secbar-list a{position:relative; flex:none; display:inline-flex; align-items:center; height:36px; padding:0 12px; border-radius:999px; font-size:14px; color:#8C8C93; text-decoration:none; white-space:nowrap; transition:color .2s, background .2s}
.secbar-list a:hover{color:#fff}
.secbar-list a[aria-current="true"]{color:#fff; background:#16161A}
.secbar-list a[aria-current="true"]::after{content:""; position:absolute; left:12px; right:12px; bottom:4px; height:2px; border-radius:2px; background:linear-gradient(90deg, #2F54FF, #B37BFF)}
.secbar-cta{flex:none; display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 14px; border-radius:999px; border:1px solid #3A3A42; color:#fff; font-size:14px; font-weight:500; text-decoration:none; white-space:nowrap; transition:border-color .2s, background .2s}
.secbar-cta:hover{border-color:#fff; background:rgba(255,255,255,.04)}
.secbar a:focus-visible{outline:2px solid #B37BFF; outline-offset:2px}
@media (max-width:640px){
  .secbar-in{gap:8px}
  .secbar-list a{height:34px; padding:0 10px; font-size:13.5px}
  .secbar-back{font-size:0; gap:0; padding-right:10px}
  .secbar-back svg{width:18px; height:18px}
  .secbar-cta{height:32px; padding:0 12px; font-size:13.5px}
}

/* 3. jumps land below the menu and the bar */
[data-pn-section]{scroll-margin-top:calc(var(--pn-nav) + var(--pn-bar) + 16px)}

/* 4. "Next" link at the end of each case-study chapter */
.pn-next{display:flex; justify-content:flex-end; margin-top:clamp(24px, 3vw, 36px)}
.pn-next a{display:inline-flex; align-items:center; gap:10px; font-size:15px; color:#C9C9CF; text-decoration:none; padding:10px 0; border-bottom:1px solid #2A2A30}
.pn-next a span{color:#6C6C73}
.pn-next a:hover{color:#fff; border-bottom-color:#fff}

/* 5. "Top" button */
.totop{position:fixed; right:max(16px, env(safe-area-inset-right, 0px)); bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:35; display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 16px 0 12px; border-radius:999px; border:1px solid #2A2A30; background:rgba(14,14,16,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:#fff; font-family:inherit; font-size:14px; font-weight:500; cursor:pointer; opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .25s, transform .25s, visibility .25s, border-color .2s}
.totop svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.totop.is-on{opacity:1; visibility:visible; transform:none}
.totop:hover{border-color:#fff}
.totop:focus-visible{outline:2px solid #B37BFF; outline-offset:3px}

@media (prefers-reduced-motion: reduce){
  .nav, .secbar, .totop, .secbar-list a{transition:none}
}