/* ─────────────────────────────────────────────────────────────
   MOA — shared header, menu and page transitions.
   One file for every page, so the four templates stop drifting.
   Colours come from each page's own tokens, with fallbacks.
   ───────────────────────────────────────────────────────────── */

:root{
  --nav-h:60px;
  --nav-fg:var(--fg,#141414);
  --nav-dim:var(--dim,#6B6B69);
  --nav-solid:rgba(237,237,236,.82);
  --nav-line:rgba(20,20,18,.13);
  --nav-dfg:#F4F5F6;
  --nav-ddim:#8A8F96;
  --nav-dsolid:rgba(10,10,11,.72);
  --nav-dline:rgba(255,255,255,.12);
  --nav-accent:var(--accent,#3355D8);
}

/* ── the bar ─────────────────────────────────────────────── */
#hdr{position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  height:var(--nav-h);padding:0 16px calc(0px) 16px;
  padding-top:env(safe-area-inset-top);
  height:calc(var(--nav-h) + env(safe-area-inset-top));
  background:transparent;border-bottom:.5px solid transparent;
  transition:transform .3s cubic-bezier(.2,.6,.3,1),background-color .25s ease,border-color .25s ease,backdrop-filter .25s ease}

/* gains a surface once you are past the top */
#hdr.solid{background:var(--nav-solid);border-bottom-color:var(--nav-line);
  backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4)}
body.navdark #hdr.solid{background:var(--nav-dsolid);border-bottom-color:var(--nav-dline)}

/* slides away going down, comes back going up */
#hdr.up{transform:translateY(-102%)}
#hdr.menuopen{transform:none!important;background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}

/* ── brand ───────────────────────────────────────────────── */
#hdr .brand{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 6px;
  text-decoration:none;color:var(--nav-fg);
  font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:11px;font-weight:600;letter-spacing:.14em}
body.navdark #hdr .brand{color:var(--nav-dfg)}
#hdr .brand svg{display:block;flex:0 0 auto}
#hdr .brand svg circle{stroke:currentColor;transition:stroke .25s}
#hdr .brand svg rect{fill:currentColor;transition:fill .25s}
#hdr .brand:hover{opacity:.7}

/* ── burger ──────────────────────────────────────────────── */
#burger{appearance:none;background:none;border:0;cursor:pointer;
  display:inline-flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:5px;
  width:44px;height:44px;padding:0 6px 0 0;color:var(--nav-fg)}
body.navdark #burger{color:var(--nav-dfg)}
#burger i{display:block;height:1.5px;width:20px;background:currentColor;border-radius:2px;
  transition:transform .3s cubic-bezier(.2,.6,.3,1),opacity .2s,width .3s}
#burger i:last-child{width:13px}
#burger[aria-expanded="true"] i:first-child{transform:translateY(6.5px) rotate(45deg)}
#burger[aria-expanded="true"] i:nth-child(2){opacity:0}
#burger[aria-expanded="true"] i:last-child{width:20px;transform:translateY(-6.5px) rotate(-45deg)}
#burger[aria-expanded="true"]{color:var(--nav-dfg)}

/* ── overlay ─────────────────────────────────────────────── */
#menu{position:fixed;inset:0;z-index:55;background:#0A0A0B;color:var(--nav-dfg);
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--nav-h) + env(safe-area-inset-top) + 20px) 26px calc(30px + env(safe-area-inset-bottom));
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .28s ease,transform .28s cubic-bezier(.2,.6,.3,1),visibility .28s}
#menu.on{opacity:1;visibility:visible;transform:none}
#menu .inner{max-width:1080px;margin:0 auto;width:100%}
#menu a.item{display:block;text-decoration:none;color:var(--nav-dfg);
  font-size:34px;line-height:1.18;font-weight:800;letter-spacing:-.02em;
  padding:14px 0;border-bottom:.5px solid rgba(255,255,255,.12);
  opacity:0;transform:translateY(10px)}
#menu.on a.item{opacity:1;transform:none;transition:opacity .4s ease,transform .4s cubic-bezier(.2,.6,.3,1)}
#menu.on a.item:nth-child(1){transition-delay:.06s}
#menu.on a.item:nth-child(2){transition-delay:.12s}
#menu.on a.item:nth-child(3){transition-delay:.18s}
#menu.on a.item:nth-child(4){transition-delay:.24s}
#menu a.item:hover{color:var(--nav-accent)}
#menu a.item .n{font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:11px;font-weight:600;
  letter-spacing:.14em;color:var(--nav-ddim);margin-right:14px;vertical-align:middle}
#menu .foot{display:flex;align-items:center;justify-content:flex-start;gap:16px;margin-top:22px;
  opacity:0;transition:opacity .4s ease .36s}
#menu.on .foot{opacity:1}
#menu #lang{display:flex;align-items:center;gap:1px;margin-left:-12px;
  font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:11px;font-weight:600;letter-spacing:.1em}
#menu #lang button{background:none;border:0;cursor:pointer;font:inherit;color:var(--nav-ddim);
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 12px;
  transition:color .2s}
#menu #lang button[aria-pressed="true"]{color:var(--nav-dfg)}
#menu #lang .sep{color:rgba(255,255,255,.25)}

/* ── call to action inside the menu ──────────────────────── */
#menu .menucta{position:relative;display:inline-flex;align-items:center;justify-content:center;
  margin-top:32px;padding:16px 28px;border-radius:10px;overflow:hidden;isolation:isolate;
  background:var(--nav-dfg);color:#0A0A0B;text-decoration:none;
  font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  opacity:0;transform:translateY(10px)}
#menu.on .menucta{opacity:1;transform:none;
  transition:opacity .4s ease .3s,transform .4s cubic-bezier(.2,.6,.3,1) .3s,color .25s ease}
#menu .menucta::before{content:"";position:absolute;inset:-1px;background:var(--nav-accent);
  transform:translateX(-101%);transition:transform .45s cubic-bezier(.65,0,.35,1);z-index:0}
#menu .menucta:hover::before,#menu .menucta:active::before{transform:translateX(0)}
#menu .menucta .lbl{position:relative;z-index:1}
#menu .menucta:hover{color:#fff}
body.menuopen{overflow:hidden}

@media (min-width:740px){
  :root{--nav-h:68px}
  #hdr{padding-left:26px;padding-right:22px}
  #menu a.item{font-size:56px;padding:18px 0}
}

/* ── page transition: feels like a new page, never a scroll ─
   NB: never put a transform on <body>. A transformed element becomes the
   containing block for its position:fixed children, which would size the
   header and the menu overlay to the document instead of the viewport.
   So: body fades only, and the slide is carried by the content wrapper. */
.js body{animation:pagefade .26s ease both}
@keyframes pagefade{from{opacity:0}to{opacity:1}}
.js main,.js body>.wrap{animation:pageslide .3s cubic-bezier(.2,.6,.3,1) both}
@keyframes pageslide{from{transform:translateY(7px)}to{transform:none}}
body.pageout{opacity:0;transition:opacity .2s ease}

/* Once the entry animation has had its time we take it off the element for two
   reasons. First, a filled animation sits in the animation origin and outranks
   normal declarations, so leaving it in place would make body.pageout above a
   no-op and kill the exit fade. Second, animations do not advance while a
   document is hidden (a background tab, a prerender), and with fill:both the
   page would hold its opening frame — a blank page — until it is looked at.
   nav.js adds .navready; from then on the page is simply visible. */
.js body.navready:not(.pageout){animation:none;opacity:1}
.js body.navready main,.js body.navready>.wrap{animation:none;transform:none}

@media (prefers-reduced-motion:reduce){
  .js body,.js main,.js body>.wrap{animation:none}
  body.pageout{transition:none;opacity:1}
  #hdr,#menu,#menu a.item,#burger i{transition:none!important}
  #menu a.item,#menu .menucta{opacity:1;transform:none}
}

/* company identity line, shared by every footer */
.legal-co{display:block;margin-top:10px;opacity:.75;font-weight:600;letter-spacing:.08em}