/* Folium top bar. One header, four looks, chosen per page with data-nav on
   <header class="topbar">: dark | dark-glass | light | light-glass.
   The glass looks are translucent and stick to the top so the blur has
   something to blur; the solid looks scroll away with the page.
   A small picker in the bar (assets/topbar.js) switches the look and
   remembers it per page in localStorage. Loaded after nav.css and after every
   page's own styles, and written with enough specificity to win. */
header.topbar{position:relative;top:0;z-index:60;background:var(--fo-night-brand,#0f1119);border-bottom:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;transition:background .35s ease,border-color .35s ease}
header.topbar .top{display:flex;align-items:center;justify-content:space-between;padding:18px 32px;gap:20px}
@media (max-width:820px){header.topbar .top{padding:14px 20px}}
header.topbar .wordmark{display:flex;align-items:center;gap:12px;font-weight:600;font-size:15px;letter-spacing:-.01em;text-decoration:none;color:#fff}
header.topbar .wordmark .ring{width:26px;height:26px;border-radius:50%;border:2px solid currentColor;position:relative;flex:none}
header.topbar .wordmark .ring::after{content:'';position:absolute;inset:5px;border-radius:50%;border:2px solid currentColor}
header.topbar .topnav{display:flex;align-items:center;gap:22px;font-size:13px;color:rgba(255,255,255,.72)}
header.topbar .topnav a,header.topbar .megabtn{text-decoration:none;color:rgba(255,255,255,.72);font-size:13px}
header.topbar .topnav a:hover,header.topbar .topnav a.here,header.topbar .megabtn:hover,header.topbar .megabtn.on{color:#fff}
header.topbar .navcta{background:var(--fo-brand,#2742c9);color:#fff!important;font-weight:600;padding:9px 14px;margin-left:6px;line-height:1}
header.topbar .navcta:hover{background:#1d3399}
/* glass */
header.topbar[data-nav="dark-glass"]{position:absolute;left:0;right:0;background:rgba(15,17,25,.38);border-bottom:0;backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15)}
/* light */
header.topbar[data-nav="light"],header.topbar[data-nav="light-glass"]{background:#fff;border-bottom:1px solid rgba(16,16,20,.08);box-shadow:none}
header.topbar[data-nav="light-glass"]{position:absolute;left:0;right:0;background:rgba(255,255,255,.42);backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15)}
header.topbar[data-nav^="light"] .wordmark{color:#0f1013}
header.topbar[data-nav^="light"] .topnav,header.topbar[data-nav^="light"] .topnav a,header.topbar[data-nav^="light"] .megabtn{color:#5c5e66}
header.topbar[data-nav^="light"] .topnav a:hover,header.topbar[data-nav^="light"] .topnav a.here,header.topbar[data-nav^="light"] .megabtn:hover,header.topbar[data-nav^="light"] .megabtn.on{color:#0f1013}
header.topbar[data-nav^="light"] .mega{border-top-color:rgba(16,16,20,.08)}
/* glass bars float over the page; the hero sizes itself to the full viewport underneath */

/* the picker */
header.topbar .navpick{display:flex;align-items:center;gap:5px;margin-left:18px;padding-left:18px;border-left:1px solid rgba(255,255,255,.14)}
header.topbar[data-nav^="light"] .navpick{border-left-color:rgba(16,16,20,.12)}
header.topbar .navpick button{width:18px;height:18px;border-radius:50%;border:1px solid rgba(255,255,255,.35);padding:0;cursor:pointer;background:#0f1013;position:relative;box-shadow:none}
header.topbar .navpick button[data-nav="dark-glass"]{background:linear-gradient(135deg,#0f1013 50%,rgba(15,16,19,.45) 50%)}
header.topbar .navpick button[data-nav="light"]{background:#fff}
header.topbar .navpick button[data-nav="light-glass"]{background:linear-gradient(135deg,#fff 50%,rgba(255,255,255,.45) 50%)}
header.topbar[data-nav^="light"] .navpick button{border-color:rgba(16,16,20,.35)}
header.topbar .heropick button{background:#0f1013}
header.topbar .heropick button[data-v="film"]{background:linear-gradient(180deg,#0f1013 40%,#8fa3ff 40% 60%,#0f1013 60%)}
header.topbar .heropick button[data-v="grid"]{background:conic-gradient(#0f1013 25%,#8fa3ff 0 50%,#0f1013 0 75%,#8fa3ff 0)}
header.topbar .heropick button[data-v="dark"]{background:var(--fo-night-brand,#0f1119)}
header.topbar .heropick button[data-v="cream"]{background:#f5f3ee}
header.topbar .heropick button[data-v="white"]{background:#fff}
header.topbar .heropick button[data-v="scrim"]{background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
header.topbar .heropick button[data-v="card"]{background:#0f1013;box-shadow:inset 0 0 0 4px #0f1013,inset 0 0 0 20px #dfe5ff}
header.topbar .navpick button.on{outline:2px solid var(--fo-brand,#2742c9);outline-offset:2px}
header.topbar .navpick .lb{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-right:4px}
header.topbar[data-nav^="light"] .navpick .lb{color:#8a8c96}
@media (max-width:820px){header.topbar .navpick{display:none}header.topbar .topnav{gap:14px;overflow-x:auto;white-space:nowrap;scrollbar-width:none}header.topbar .navcta{padding:8px 11px;margin-left:0}}

/* Editor: the Save control that turns the current look into a shipped default */
.navpick.looksave{gap:5px}
.navpick.looksave button{width:auto;height:auto;border-radius:0;padding:4px 9px;font:inherit;font-size:10.5px;font-weight:600;
  letter-spacing:.06em;line-height:1.4;background:none;border:1px solid currentColor;opacity:.55;cursor:pointer;
  transition:opacity .2s ease,background .2s ease}
.navpick.looksave button:hover{opacity:1;background:rgba(127,127,127,.18)}
.look-toast{position:fixed;left:50%;bottom:26px;translate:-50% 0;z-index:200;max-width:min(560px,calc(100vw - 40px));
  padding:13px 18px;background:#101014;color:#fff;font-size:13px;line-height:1.5;letter-spacing:.01em;
  box-shadow:0 24px 50px -24px rgba(0,0,0,.7);opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .3s ease,transform .3s ease}
.look-toast.up{opacity:1;transform:none}

/* v1: the look pickers are for the team only (?edit=1 unlocks them) */
html:not(.is-editor) header.topbar .navpick{display:none}
/* v1 footer: brand + two columns */
footer.sitefoot.v1{grid-template-columns:2fr 1fr 1fr}
@media (max-width:700px){footer.sitefoot.v1{grid-template-columns:1fr 1fr}footer.sitefoot.v1>div:first-child{grid-column:1/-1}}

/* phone menu: hamburger to cross, full-screen panel, links staggered in */
.navtoggle{display:none}
.mnav{display:none}
@media (max-width:760px){
  header.topbar{position:relative;z-index:60}
  header.topbar .top{padding:14px 20px}
  header.topbar .topnav{display:none}
  .navtoggle{display:grid;place-items:center;position:relative;width:44px;height:44px;margin-right:-10px;background:none;border:0;cursor:pointer;z-index:3;-webkit-tap-highlight-color:transparent}
  .navtoggle span{position:absolute;left:11px;right:11px;height:2px;border-radius:2px;background:#fff;transition:transform .45s cubic-bezier(.7,0,.2,1),top .45s cubic-bezier(.7,0,.2,1)}
  .navtoggle span{transition:transform .4s cubic-bezier(.7,0,.2,1),top .4s cubic-bezier(.7,0,.2,1),opacity .25s ease}
  .navtoggle span:nth-child(1){top:14px}
  .navtoggle span:nth-child(2){top:21px}
  .navtoggle span:nth-child(3){top:28px}
  header.topbar.menu-open .navtoggle span:nth-child(1){top:21px;transform:rotate(45deg)}
  header.topbar.menu-open .navtoggle span:nth-child(2){opacity:0;transform:scaleX(.2)}
  header.topbar.menu-open .navtoggle span:nth-child(3){top:21px;transform:rotate(-45deg)}
  header.topbar .wordmark{position:relative;z-index:3}
  .mnav{display:flex;flex-direction:column;justify-content:space-between;position:fixed;inset:0;z-index:2;padding:96px 24px calc(28px + env(safe-area-inset-bottom));
    background:radial-gradient(120% 70% at 80% 0%,#1c2033,#0f1119 60%);color:#fff;
    opacity:0;transform:translateY(-12px);visibility:hidden;transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.2,1),visibility 0s linear .45s}
  header.topbar.menu-open .mnav{opacity:1;transform:none;visibility:visible;transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.2,1),visibility 0s}
  .mnav-links{display:flex;flex-direction:column}
  .mnav-links a,.mnav-foot{opacity:0;transform:translateY(18px);transition:opacity .35s ease,transform .35s ease}
  header.topbar.menu-open .mnav-links a,header.topbar.menu-open .mnav-foot{opacity:1;transform:none;transition:opacity .5s ease calc(.12s + var(--i) * 60ms),transform .6s cubic-bezier(.2,.7,.2,1) calc(.12s + var(--i) * 60ms)}
  .mnav-links a{font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1.1;color:#fff;text-decoration:none;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center}
  .mnav-links a::after{content:'';width:9px;height:9px;border-top:2px solid rgba(255,255,255,.45);border-right:2px solid rgba(255,255,255,.45);transform:rotate(45deg)}
  .mnav-links a.here{color:#aab6ff}
  .mnav-cta{display:block;text-align:center;background:var(--fo-brand,#2742c9);color:#fff;text-decoration:none;font-weight:600;font-size:17px;padding:17px 20px}
  .mnav-cases{display:flex;flex-direction:column;gap:8px;margin-top:22px;font-size:14px}
  .mnav-cases span{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45)}
  .mnav-cases a{color:rgba(255,255,255,.8);text-decoration:none}
  html.menu-lock,html.menu-lock body{overflow:hidden;touch-action:none}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .mnav,.mnav-links a,.mnav-foot,.navtoggle span{transition:none!important}
}