
/* ═══ LOKIZ TOP — the segmented strip and the leaves hero, scoped so Webflow's classes never touch them ═══ */
.lk-top{--bg:#000;--ink:#f2f0ef;--ink-2:#a7a3a2;--ink-3:#6d6867;--line:rgba(255,255,255,.13);--line-soft:rgba(255,255,255,.07);--accent:#b9df3c;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;--sans:"Host Grotesk",ui-sans-serif,system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --pad:clamp(16px,4.5vw,56px);--maxw:1320px;--bar:64px;font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased}
.lk-top *{box-sizing:border-box}
.lk-top a{color:inherit;text-decoration:none}
.lk-top .wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.lk-top .mono{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.lk-top .mark{width:20px;height:20px;flex:none;color:var(--ink)}
.lk-top .btn{border-radius:10px;font-family:var(--sans)}
.lk-top .btn-sm{border-radius:9px}
.lk-top .hero-shell{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:#000}
.lk-top .leaves{position:absolute;top:-6%;right:0;height:116%;width:auto;max-width:none;pointer-events:none;user-select:none}
.lk-top .hero-veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,.7) 0%,rgba(0,0,0,0) 14%),linear-gradient(to top,#0f1011 0%,rgba(15,16,17,0) 24%)}
.lk-top .hero-in{position:relative;width:100%}
.lk-top .hero-col{width:min(720px,100%);text-align:left;padding-top:var(--bar)}
.lk-top .eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:clamp(22px,3.4vh,34px)}
.lk-top .eyebrow .rule{width:36px;height:1px;background:var(--accent);flex:none}
.lk-top h1{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;font-size:clamp(46px,6.4vw,96px);line-height:.98;max-width:11ch;margin:0 0 clamp(22px,3.4vh,32px);color:var(--ink)}
.lk-top .deck{color:var(--ink-2);font-size:clamp(15px,1.2vw,17px);line-height:1.6;max-width:46ch;margin:0 0 30px}
.lk-top .deck strong{color:var(--ink);font-weight:500}
.lk-top .hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.lk-top .rv{opacity:0;transform:translateY(14px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0s)}
.lk-top .rv.in{opacity:1;transform:none}
@media(max-width:760px){.lk-top .hero-shell{align-items:flex-end}.lk-top .leaves{opacity:.55}.lk-top .hero-col{padding:0 0 64px}}
@media(prefers-reduced-motion:reduce){.lk-top .rv{opacity:1;transform:none;transition:none}}

.lk-top #nav{
  position:fixed;top:0;left:0;right:0;z-index:60;height:var(--bar);
  display:flex;align-items:stretch;
  border-bottom:1px solid var(--line-soft);
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(20px) saturate(1.25);-webkit-backdrop-filter:blur(20px) saturate(1.25);
  transition:background .3s ease,border-color .3s ease;
}
.lk-top #nav.stuck{background:rgba(0,0,0,.9);border-bottom-color:var(--line)}
.lk-top .nav-in{
  display:flex;align-items:stretch;width:100%;
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
}
.lk-top .cell{
  display:flex;align-items:center;gap:10px;flex:none;
  padding:0 clamp(14px,1.9vw,24px);
  border-left:1px solid var(--line-soft);
}
.lk-top .cell:first-child{padding-left:0;border-left:0}
.lk-top .cell:last-child{padding-right:0}
.lk-top .cell.grow{flex:1;min-width:0}
.lk-top .brand{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;flex:none}
.lk-top .mark{width:20px;height:20px;flex:none;color:var(--ink);transition:color .3s ease,transform .45s cubic-bezier(.2,.7,.3,1)}
.lk-top .brand:hover .mark{color:var(--accent)}
.lk-top .nav-prog{
  position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  background:var(--accent);transform:scaleX(0);transform-origin:0 50%;
  will-change:transform;
}
.lk-top .nav-idx{display:flex;align-items:center;gap:0;overflow:hidden}
.lk-top .nav-idx a{
  display:flex;align-items:center;gap:0;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);padding:6px 0;transition:color .25s ease;
}
.lk-top .nav-idx a + a{margin-left:14px}
.lk-top .nav-idx a .n{position:relative;padding-right:0;transition:color .25s ease}
.lk-top .nav-idx a .t{
  display:inline-block;white-space:nowrap;overflow:hidden;
  max-width:0;opacity:0;margin-left:0;
  transition:max-width .5s cubic-bezier(.2,.7,.3,1),opacity .3s ease,margin-left .5s cubic-bezier(.2,.7,.3,1);
}
.lk-top .nav-idx a:hover{color:var(--ink-2)}
.lk-top .nav-idx a.on{color:var(--ink)}
.lk-top .nav-idx a.on .n{color:var(--accent)}
.lk-top .nav-idx a.on .t{max-width:200px;opacity:1;margin-left:9px}
.lk-top .nav-slot{position:relative;flex:1;min-width:0;display:flex;align-items:center}
.lk-top .nav-slot > *{transition:opacity .35s ease,transform .35s cubic-bezier(.2,.7,.3,1)}
.lk-top .nav-tag{position:absolute;left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.lk-top #nav.past .nav-tag{opacity:0;transform:translateY(-6px);pointer-events:none}
.lk-top #nav:not(.past) .nav-idx{opacity:0;transform:translateY(6px);pointer-events:none}
.lk-top .social{display:flex;align-items:center;color:var(--ink-3);transition:color .2s ease}
.lk-top .social:hover{color:var(--ink)}
.lk-top .social svg{width:14px;height:14px;fill:currentColor;display:block}
.lk-top .nav-live{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;display:flex;align-items:center;gap:9px}
.lk-top .nav-live b{font-weight:400;color:var(--ink-2);font-variant-numeric:tabular-nums}
.lk-top .nav-live i{width:5px;height:5px;border-radius:50%;background:var(--ink-3);font-style:normal;flex:none}
.lk-top .nav-live.live i{background:var(--accent)}
.lk-top .nav-live .sep{color:#3b3736}
@media(max-width:1100px){.lk-top .nav-live{display:none}
.lk-top .cell.live{display:none}}
@media(max-width:860px){.lk-top .nav-idx a .t{display:none}
.lk-top .nav-idx a + a{margin-left:12px}
.lk-top .nav-tag{font-size:9.5px}}
@media(max-width:600px){.lk-top .nav-tag{display:none}
.lk-top #nav:not(.past) .nav-idx{opacity:1;transform:none;pointer-events:auto}
.lk-top .brand{font-size:11.5px;letter-spacing:.18em}
.lk-top .cell{padding:0 10px}
.lk-top .nav-idx a{font-size:9.5px;letter-spacing:.1em}
.lk-top .nav-idx a + a{margin-left:9px}
.lk-top .btn-sm{padding:8px 11px;font-size:12px}
.lk-top .social svg{width:13px;height:13px}}
.lk-top .btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-size:14px;font-weight:500;
  padding:10px 18px;border-radius:2px;
  background:var(--ink);color:#000;border:1px solid var(--ink);
  transition:background .2s,color .2s,border-color .2s,opacity .2s;cursor:pointer;
}
.lk-top .btn:hover{background:transparent;color:var(--ink)}
.lk-top .btn-sm{padding:8px 14px;font-size:13px}
.lk-top .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.lk-top .btn-ghost:hover{background:var(--ink);color:#000;border-color:var(--ink)}
.lk-top .btn .arw{transition:transform .2s}
.lk-top .btn:hover .arw{transform:translateX(3px)}
.lk-top .btn{text-transform:none;letter-spacing:normal;line-height:1.2}
.lk-top .nav-live,.lk-top .nav-tag,.lk-top .nav-idx a{line-height:1.2}
.lk-top #nav:not(.past) .nav-idx{opacity:1;transform:none;pointer-events:auto}
