/* SARTOR lab — shared tokens. Every variant loads this first, then its own CSS.
   Palette is fixed: klein blue, off-white paper, near-black ink, mist for type on blue.
   Fonts are fixed: Sora (display), IBM Plex Mono (labels). Do not add colours here. */
:root{
  --blue:#002FA7; --blue-2:#0B3BD1; --blue-deep:#00206F;
  --paper:#EDEDE8; --paper-2:#F6F5F0;
  --ink:#0A0A0B; --ink-2:#4A4A50; --mist:#C5D0F5;
  --line:rgba(10,10,11,.16); --line-w:rgba(255,255,255,.24);
  --sans:'Sora',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  --gx:clamp(20px,4.5vw,72px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
canvas{display:block}
::selection{background:var(--blue);color:#fff}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;line-height:1.6}
.sq{display:inline-block;width:8px;height:8px;background:currentColor;vertical-align:1px;margin-right:10px}

/* top nav — shared skeleton, colour flips with .on-blue */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:20px var(--gx);pointer-events:none}
.nav>*{pointer-events:auto}
.logo{font-weight:800;font-size:22px;letter-spacing:-.03em;line-height:1}
.logo i{font-style:normal;color:var(--blue)}
.nav-idx{display:flex;gap:26px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.nav-idx a{display:flex;gap:8px;opacity:.72;transition:opacity .2s}
.nav-idx a b{font-weight:500;opacity:.55}
.nav-idx a:hover{opacity:1}
.nav-cta{justify-self:end}
.on-blue{color:#fff}.on-blue .logo i{color:var(--mist)}
@media(max-width:900px){.nav-idx{display:none}.nav{grid-template-columns:1fr auto}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:16px 22px;border:1px solid currentColor;transition:background .2s,color .2s,border-color .2s,transform .2s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn-solid{background:var(--blue);color:#fff;border-color:var(--blue)}.btn-solid:hover{background:var(--ink);border-color:var(--ink)}
.btn-ink{background:var(--ink);color:#fff;border-color:var(--ink)}.btn-ink:hover{background:var(--blue);border-color:var(--blue)}
.btn-white{background:#fff;color:var(--blue);border-color:#fff}.btn-white:hover{background:var(--mist);border-color:var(--mist)}
.btn-ghost{background:transparent}.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-ghost-ink{background:transparent;color:var(--ink)}.btn-ghost-ink:hover{background:var(--ink);color:#fff}
.btn .ar{transition:transform .2s}.btn:hover .ar{transform:translateX(4px)}

/* lab switcher — internal, not part of the site */
.lab{position:fixed;right:14px;bottom:14px;z-index:60;display:flex;align-items:center;gap:2px;padding:5px 6px;background:var(--ink);color:#fff;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;box-shadow:0 8px 30px rgba(0,0,0,.25)}
.lab span{opacity:.5;padding:0 8px}
.lab a{padding:7px 10px;border-radius:999px;opacity:.6;transition:opacity .15s,background .15s}
.lab a:hover{opacity:1;background:rgba(255,255,255,.12)}
.lab a.cur{opacity:1;background:var(--blue)}

/* "next section" stub — only there to judge the seam below the hero */
.next{padding:64px var(--gx) 96px;border-top:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:baseline;background:var(--paper)}
.next h2{font-size:clamp(26px,3.4vw,44px);font-weight:600;letter-spacing:-.03em;line-height:1.1}
.next .mono{color:var(--blue)}
.next p{grid-column:2;color:var(--ink-2);max-width:56ch;margin-top:8px}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.nav .btn{padding:11px 16px;font-size:11px}
.rv{opacity:0;transform:translateY(14px);animation:rv .8s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rv{to{opacity:1;transform:none}}