/* Component: fixed nav bar + ticker */
/* ---------- NAV (Figma 472:5069) ---------- */
.top{position:fixed;left:50%;top:8px;z-index:20;width:min(calc(1068 * var(--n)), calc(100vw - 24px));transform:translateX(-50%)}
.nav{position:relative;height:calc(64 * var(--n));display:flex;align-items:center;justify-content:space-between;padding:calc(6 * var(--n));background:var(--night);border-radius:calc(12 * var(--n));box-shadow:0 0 0 1px rgba(244,244,244,.08)}
.menu{display:flex;align-items:center;gap:calc(12 * var(--n));height:calc(52 * var(--n));padding:0 calc(20 * var(--n)) 0 0;color:var(--paper);font-size:calc(20 * var(--n));line-height:1.4}
.menu .bx{display:grid;place-items:center;width:calc(52 * var(--n));height:calc(52 * var(--n));border-radius:calc(6 * var(--n));background:rgba(244,244,244,.15);transition:background .3s}
.menu:hover .bx{background:#403c3c}
.burger{position:relative;width:calc(28 * var(--n));height:calc(8 * var(--n))}
.burger::before,.burger::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--paper);transition:transform .4s var(--ease-out)}
.burger::before{top:0}.burger::after{bottom:0}
.menu:hover .burger::before{transform:translateY(calc(4 * var(--n)))}
.menu:hover .burger::after{transform:translateY(calc(-4 * var(--n)))}
/* desktop: the pages sit on the bar in caps, Home and Content Engine left of the logo, About and Blog right of it, next to the button.
   The burger button and the pane are for phones only */
.links{list-style:none;display:flex;align-items:center;gap:calc(14 * var(--n));height:calc(52 * var(--n))}
.links.l{padding-left:calc(18 * var(--n))}
.links.r{margin-left:auto;padding-right:calc(18 * var(--n))}
.links a{display:flex;align-items:center;gap:calc(8 * var(--n));height:calc(40 * var(--n));padding:0 calc(10 * var(--n));border-radius:calc(6 * var(--n));color:var(--paper);font-weight:700;font-size:max(12px, calc(15 * var(--n)));line-height:1;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;transition:background .3s,color .3s}
.links a:hover{background:rgba(244,244,244,.12)}
.links a[aria-current]::before{content:"";width:calc(6 * var(--n));height:calc(6 * var(--n));border-radius:50%;background:var(--green)}
@media (min-width:821px){
  .menu,.pane{display:none}
}
.logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center}
.logo img,.logo svg{grid-area:1/1;display:block;overflow:visible}
.logo path,.logo g{transform-box:fill-box}
.logo .full{width:calc(149.181 * var(--n));height:calc(32 * var(--n))}
.book{height:calc(52 * var(--n));padding:0 calc(20 * var(--n));display:grid;place-items:center;background:var(--green);border-radius:calc(12 * var(--n));color:var(--ink);font-size:calc(20 * var(--n));line-height:1.4;white-space:nowrap;overflow:hidden}
.book span{display:block;transition:transform .45s var(--ease-out)}
.book:hover span{transform:translateY(-2px)}

/* menu pane: drops under the ticker, same width as the bar. Pages only; "Book an intro" stays on the bar */
.menu.open .burger::before{transform:translateY(calc(4 * var(--n))) rotate(45deg)}
.menu.open .burger::after{transform:translateY(calc(-4 * var(--n))) rotate(-45deg)}
.pane{margin-top:calc(8 * var(--n));padding:calc(10 * var(--n)) calc(8.69 * var(--n));background:var(--ink);border-radius:calc(7.45 * var(--n));box-shadow:0 0 0 1px rgba(244,244,244,.08);display:grid}
.pane[hidden]{display:none}
.pane a{display:flex;align-items:center;gap:calc(14 * var(--n));padding:calc(14 * var(--n)) calc(16 * var(--n));border-radius:calc(5 * var(--n));color:var(--bg);font-family:var(--xh);font-size:calc(34 * var(--n));line-height:1;letter-spacing:-.03em;transition:background .3s,color .3s}
.pane a::before{content:"";width:calc(8 * var(--n));height:calc(8 * var(--n));border-radius:50%;background:transparent;box-shadow:0 0 0 1px rgba(244,244,244,.35);transition:background .3s,box-shadow .3s}
.pane a[aria-current]::before{background:var(--green);box-shadow:none}
.pane a:hover{background:#343131}
.pane a:hover::before{background:var(--green);box-shadow:none}

/* ticker under the nav (Osmo-style) */
.tick{margin-top:calc(8 * var(--n));height:calc(30 * var(--n));background:var(--green);border-radius:calc(2.48 * var(--n));overflow:hidden;display:flex;align-items:center;font-family:var(--mono);font-size:calc(16 * var(--n));line-height:1;color:var(--ink);white-space:nowrap}
.tick{transition:height .45s var(--ease-out),margin-top .45s var(--ease-out),opacity .3s}
.top.scrolled .tick{height:0;margin-top:0;opacity:0}   /* the ticker folds away once the page moves (nav.js) */
/* the header slides away while scrolling down and comes back on any scroll up (nav.js).
   Moved with `top`: GSAP's intro writes inline translate/transform on .top */
.top{transition:top .45s var(--ease-out)}
.top.away{top:calc(-1 * (100 * var(--n) + 40px))}
.tick .run{display:flex;flex:none;will-change:transform}
.tick .run span{padding:0 calc(14 * var(--n))}
.tick .run i{font-style:normal}


@media (max-width:820px){
  .top{top:8px;width:calc(100vw - 16px)}
  .links{display:none}
  .nav{height:60px;padding:6px 6px 6px 16px;gap:8px;border-radius:12px}
  /* phones: logo on the left, then "Book an intro" and the menu as a square icon button on the right (no "Menu" label) */
  .logo{left:16px;transform:translateY(-50%);place-items:start}
  .book{order:1;margin-left:auto}
  .menu{order:2;height:48px;padding:0;gap:0;font-size:0}
  .menu .bx{width:48px;height:48px;border-radius:8px}
  .burger{width:28px;height:8px}
  .menu.open .burger::before{transform:translateY(4px) rotate(45deg)}
  .menu.open .burger::after{transform:translateY(-4px) rotate(-45deg)}
  .logo .full{width:99.53px;height:21.35px}
  .book{height:48px;padding:0 16px;font-size:var(--fs-body);border-radius:8px}
  .tick{margin-top:7px;height:28px;font-size:var(--fs-caption);border-radius:3px}
  .pane{margin-top:6px;padding:8px;border-radius:8px}
  .pane a{gap:10px;padding:12px 12px;font-size:24px}
  .pane a::before{width:7px;height:7px}
}