/* Lemmco Studio — the fixed frame.
   Every page has its own style; this bar, the style badge and the footer stay identical on all
   of them so the variety reads as intentional. Everything here is prefixed .ls- and sets its own
   fonts and colours, so page styles can't leak in. */

:root{
  --ls-ink:#16202C; --ls-paper:#FFFFFF; --ls-muted:#5B6675; --ls-line:#E1E5EB;
  --ls-cobalt:#2B55C9; --ls-amber:#E0A526; --ls-green:#1F8A70; --ls-red:#C2453A; --ls-violet:#7A5AC8;
  --ls-display:"Bricolage Grotesque","Avenir Next",system-ui,sans-serif;
  --ls-body:"Source Sans 3","Segoe UI",system-ui,sans-serif;
}

.ls-skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ls-ink);color:#fff;padding:10px 14px;font:600 15px var(--ls-body)}
.ls-skip:focus{left:12px;top:12px}

.ls-bar{position:sticky;top:0;z-index:50;background:var(--ls-paper);border-bottom:1px solid var(--ls-line);
  font:400 15px/1.4 var(--ls-body);color:var(--ls-ink);letter-spacing:0;text-transform:none}
.ls-bar__in{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding-block:10px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.ls-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ls-ink);margin-right:auto}
.ls-logo svg{width:26px;height:18px;flex:none}
.ls-logo span{font:700 19px/1 var(--ls-display);letter-spacing:-.01em}
.ls-logo span b{font-weight:500;color:var(--ls-muted)}
.ls-nav{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.ls-nav a{color:var(--ls-ink);text-decoration:none;padding:8px 10px;border-radius:6px;font-weight:600}
.ls-nav a:hover{background:#F0F3F7}
.ls-nav a[aria-current="page"]{color:var(--ls-cobalt)}
.ls-nav a.ls-cta{background:var(--ls-ink);color:#fff;padding:8px 14px;margin-left:6px}
.ls-nav a.ls-cta:hover{background:var(--ls-cobalt)}
.ls-bar a:focus-visible,.ls-badge a:focus-visible,.ls-foot a:focus-visible{outline:2px solid var(--ls-cobalt);outline-offset:2px}

.ls-badge{background:var(--ls-ink);color:#E7ECF2;font:400 14px/1.4 var(--ls-body);letter-spacing:0;text-transform:none}
.ls-badge__in{max-width:1200px;margin:0 auto;display:flex;gap:6px 14px;align-items:center;flex-wrap:wrap;
  padding-block:8px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.ls-badge__tile{width:10px;height:10px;border-radius:2px;flex:none}
.ls-badge strong{font-weight:600;color:#fff}
.ls-badge a{color:#9DB7FF;font-weight:600;text-decoration:none;margin-left:auto;white-space:nowrap}
.ls-badge a:hover{text-decoration:underline}

.ls-foot{background:var(--ls-ink);color:#C9D1DB;font:400 15px/1.6 var(--ls-body);letter-spacing:0;text-transform:none}
.ls-foot__in{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px;
  padding-block:48px 32px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.ls-foot h2{font:700 15px/1.3 var(--ls-display);color:#fff;margin:0 0 10px;letter-spacing:0;text-transform:none}
.ls-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.ls-foot a{color:#C9D1DB;text-decoration:none}
.ls-foot a:hover{color:#fff;text-decoration:underline}
.ls-foot__tiles{display:flex;gap:3px;margin-bottom:12px}
.ls-foot__tiles i{width:14px;height:14px;border-radius:2px;display:block}
.ls-legal{grid-column:1/-1;border-top:1px solid #2A3542;padding-top:18px;font-size:13px;color:#9AA6B4}

@media (max-width:640px){
  .ls-bar{position:static}
  .ls-bar__in{gap:6px}
  .ls-nav{width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-6px;padding-inline:6px}
  .ls-nav::-webkit-scrollbar{display:none}
  .ls-nav a{padding:8px 8px;white-space:nowrap;flex:none}
  .ls-nav a.ls-cta{margin-left:auto}
  .ls-badge a{margin-left:0}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}