:root{--shell-brand:#1E88CE;--shell-brand-dark:#146AAA;--shell-ink:#0A2C4C}

.sg-logotype{display:inline-flex;align-items:baseline;font-family:'Archivo',sans-serif;font-weight:700;
  letter-spacing:-.032em;line-height:1;white-space:nowrap;color:var(--shell-ink);text-decoration:none}
.sg-logotype .sg-s{height:.6875em;width:auto;color:var(--shell-brand);margin-right:.025em;overflow:visible}
.sg-logotype .sg-rest i{font-style:normal;font-weight:inherit;color:rgba(10,44,76,.38)}

/* Letterlijk Syncground-menu; alleen gecentreerd en dynamisch verbreed voor de cockpitlabels. */
.menuwrap{--menu-w:204px;--ease:cubic-bezier(.2,.7,.3,1);--spring:cubic-bezier(.2,.9,.25,1.06);
  position:relative;display:flex;flex-direction:column;align-items:center;width:var(--menu-w);margin-inline:auto;
  z-index:250;font-family:'Inter',sans-serif;pointer-events:none}
.mtoggle{position:relative;display:inline-flex;align-items:center;gap:9px;width:var(--w,auto);
  padding:4px 16px 4px 4px;border-radius:999px;border:0;cursor:pointer;overflow:hidden;pointer-events:auto;
  background:var(--shell-brand);box-shadow:0 6px 14px -8px rgba(6,40,70,.5);
  transition:box-shadow .35s var(--ease),background .3s,width .5s var(--spring),padding .5s var(--spring)}
.mtoggle[aria-expanded="true"]{width:var(--menu-w);padding-left:8px;padding-right:8px}
.mtoggle:active{background:var(--shell-brand-dark)}
.mtoggle.measure{transition:none!important;width:calc(var(--menu-w) - 14px);padding-left:8px;padding-right:8px}
.mdisc{width:31px;height:31px;border-radius:50%;background:#fff;flex:none;display:grid;place-items:center;
  box-shadow:0 1px 4px -1px rgba(6,40,70,.28);transition:transform .75s var(--spring)}
.mtoggle[aria-expanded="true"] .mdisc{transform:rotate(180deg)}
.mburger{position:relative;width:14px;height:10px}
.mburger i{position:absolute;left:0;right:0;height:3px;border-radius:3px;background:var(--shell-brand);
  transition:transform .5s var(--spring),opacity .3s}
.mburger i:nth-child(1){top:0}.mburger i:nth-child(2){bottom:0}
.mtoggle[aria-expanded="true"] .mburger i:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.mtoggle[aria-expanded="true"] .mburger i:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
.mlabel{font-family:'Inter',sans-serif;font-weight:600;font-size:15px;letter-spacing:-.011em;color:#fff;
  transition:opacity .28s var(--ease),transform .6s var(--spring)}
.mtoggle[aria-expanded="true"] .mlabel{opacity:1;transform:none;position:absolute;left:0;right:0;
  text-align:center;pointer-events:none}
@media(hover:hover) and (pointer:fine){
  .mtoggle:hover{background:#2A94D8;box-shadow:0 10px 22px -10px rgba(6,40,70,.55);
    width:calc(var(--menu-w) - 14px);padding-left:8px;padding-right:8px}
  .mtoggle[aria-expanded="true"]:hover{width:var(--menu-w);padding-left:8px;padding-right:8px}
  .mtoggle:hover .mdisc{transform:translateX(var(--roll,86px)) rotate(360deg)}
  .mtoggle[aria-expanded="true"]:hover .mdisc{transform:rotate(180deg)}
  .mtoggle:hover .mlabel{opacity:0;transform:translateX(6px)}
  .mtoggle[aria-expanded="true"]:hover .mlabel{opacity:1;transform:none}
}
.mpanel{position:absolute;top:calc(100% + 5px);left:0;width:var(--menu-w);background:var(--shell-brand);
  border-radius:19px;padding:6px;box-shadow:0 30px 66px -32px rgba(21,115,180,.78);overflow:hidden;
  opacity:0;visibility:hidden;pointer-events:none;transform-origin:top center;
  clip-path:inset(0 0 100% 0 round 19px)}
.mpanel.open{opacity:1;visibility:visible;pointer-events:auto}
.mlink{position:relative;display:block;padding:8px 14px;border-radius:14px;color:#fff;text-align:center;
  text-decoration:none;font-family:'Inter',sans-serif;font-weight:600;font-size:15px;letter-spacing:-.012em;
  line-height:1.2;opacity:0;pointer-events:auto;transition:transform .55s cubic-bezier(.34,1.56,.64,1)}
.mlink::before{content:"";position:absolute;inset:3px 0;background:#FBFAF8;border-radius:14px;transform:scale(.7);
  opacity:0;transition:transform .45s var(--spring),opacity .35s}
.mlink:hover::before,.mlink.active::before{transform:none;opacity:1}
.mlink:hover{transform:scale(1.05)}.mlink:active{transform:scale(.98);transition-duration:.1s}
.mlink b{position:relative;z-index:1;font-weight:700;transition:color .3s}
.mlink:hover b,.mlink.active b{color:var(--shell-brand-dark)}

@media(max-width:700px){
  .menuwrap{--menu-w:min(220px,calc(100vw - 24px));width:var(--menu-w)}
  .mtoggle:not([aria-expanded="true"]){width:var(--w)!important;padding:4px 16px 4px 4px!important}
  .mtoggle:not([aria-expanded="true"]) .mdisc{transform:none!important}
  .mtoggle:not([aria-expanded="true"]) .mlabel{opacity:1!important;transform:none!important}
  .frame-bar .fb-links,.frame-bar .fb-rechts,.home-bar .home-brand,.home-bar .home-user{
    transition:opacity .26s var(--ease),transform .42s var(--spring),filter .3s ease;
    will-change:opacity,transform;pointer-events:auto}
  .frame-bar.cockpit-menu-active .fb-links,.home-bar.cockpit-menu-active .home-brand{
    opacity:0;transform:translateX(-18px) scale(.94);filter:blur(3px);pointer-events:none}
  .frame-bar.cockpit-menu-active .fb-rechts,.home-bar.cockpit-menu-active .home-user{
    opacity:0;transform:translateX(18px) scale(.94);filter:blur(3px);pointer-events:none}
}
@media(prefers-reduced-motion:reduce){.menuwrap *{transition-duration:.01ms!important;animation-duration:.01ms!important}}