/* Lakely site styles. Tokens and components mirror the Lakely design system (DESIGN.md); page layouts live in pages/*.css. */
/* Self-hosted fonts (SIL Open Font License 1.1, see fonts/LICENSE.txt) */
@font-face { font-family:'Bricolage Grotesque'; font-style:normal; font-weight:600 700; font-display:swap; src:url('fonts/bricolage-grotesque-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Instrument Sans'; font-style:normal; font-weight:400 600; font-display:swap; src:url('fonts/instrument-sans-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:500 600; font-display:swap; src:url('fonts/jetbrains-mono-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root{--surface:#0A0A0B;--surface-raised:#141416;--surface-sunken:#000000;--ink:#F4F1EA;--ink-2:#C8C6C0;--muted:#8E8C87;--line:#232326;--border:#66666C;--deep:#141416;--violet:#8F88FF;--on-violet:#0A0A0B;--violet-soft:#1E1C3A;--spark:#FF6B3D;--on-spark:#0A0A0B;--spark-text:#FF9C7C;--spark-soft:#3A2019;--lilac:#CFC6FF;--sage:#BFDCCB;--apricot:#FFD2BD;--on-tint:#0B1324;--focus:#8F88FF;--success:#7FD1A5;--error:#FF8A80;--font-display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;--font-sans:"Instrument Sans","Helvetica Neue",Arial,sans-serif;--font-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;--space-16:64px;--radius-sm:6px;--radius-md:10px;--radius-lg:18px;--radius-pill:999px;--shadow-card:none;color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--font-sans);font-size:16px;line-height:24px;-webkit-font-smoothing:antialiased;overflow-x:clip}
[hidden]{display:none !important}
a{color:#8F88FF}a:hover{color:#CFC6FF}
a:focus-visible,summary:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.skip{position:absolute;left:16px;top:-100px;z-index:40;background:var(--violet);color:var(--on-violet);padding:12px 16px;border-radius:var(--radius-md);font-weight:600;text-decoration:none}
.skip:focus{top:16px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.wrap{max-width:1280px;margin:0 auto;padding:0 48px}
.d{font-family:var(--font-display);font-weight:700;letter-spacing:-.015em}
.mono{font-family:var(--font-mono)}
.h2{font-family:var(--font-display);font-weight:700;font-size:48px;line-height:52px;letter-spacing:-.015em;margin:16px 0 0}
.body-l{font-size:18px;line-height:28px;color:var(--ink-2);margin:20px 0 0;max-width:600px}
.sec{padding:96px 0;border-top:1px solid var(--line)}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
.cta{text-decoration:none}.cta:hover{color:var(--on-violet)}
a.lk-btn-quiet:hover{color:var(--ink)}
.link{font-weight:600;text-decoration:none;color:var(--violet);display:inline-flex;gap:8px;align-items:center}
.link:hover{color:var(--lilac)}
.card{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-lg)}
.xl{font-family:var(--font-display);font-weight:700;font-size:88px;line-height:86px;letter-spacing:-.035em;margin:24px 0 0}
.xl em{font-style:normal;color:var(--violet)}
.src{font-family:var(--font-mono);font-size:12px;line-height:16px;font-weight:500;color:var(--muted);margin-top:12px}
.deepband{background:var(--deep);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lk-phases-wrap{margin:40px -24px 0}
/* header */
.hdr{position:sticky;top:0;z-index:30;background:rgba(10,10,11,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hdr-in{height:72px;display:flex;align-items:center;gap:40px}
.hdr-logo{display:flex;align-items:center;text-decoration:none}
.nav{display:flex;gap:4px;flex:1}
.nav a{color:var(--ink-2);text-decoration:none;font-size:14px;font-weight:600;padding:10px 14px;border-radius:var(--radius-md)}
.nav a:hover{color:var(--ink);background:var(--surface-raised)}
.nav a.on{color:var(--ink);background:var(--violet-soft)}
.nav .nav-cta{display:none}
.menu-btn{display:none;font:inherit;font-weight:600;height:44px;padding:0 16px;border-radius:var(--radius-md);border:1.5px solid var(--border);background:var(--surface-raised);color:var(--ink);cursor:pointer}
/* footer */
.ftr{background:var(--deep);border-top:1px solid var(--line);padding:80px 0 0}
.ftr-top{display:grid;grid-template-columns:minmax(0,5fr) repeat(3,minmax(0,2fr));gap:48px}
.ftr h2{font-family:var(--font-mono);font-size:12px;line-height:16px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--muted);margin:0 0 18px}
.ftr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.ftr ul a{color:var(--ink-2);text-decoration:none;font-size:15px}
.ftr ul a:hover{color:var(--ink)}
.ftr-big{margin-top:96px;padding-bottom:40px;border-bottom:1px solid var(--line);overflow:hidden}
.sub{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:24px 0 32px;font-size:14px;color:var(--muted)}
.sub nav{display:flex;gap:24px}
.sub a{color:var(--muted);text-decoration:none}.sub a:hover{color:var(--ink)}
@media (max-width:900px){
.wrap{padding:0 16px}
.hdr .cta{display:none}
.menu-btn{display:inline-flex;align-items:center;margin-left:auto}
.nav{display:none}
.hdr.open .nav{display:flex;flex-direction:column;position:absolute;top:72px;left:0;right:0;padding:12px 16px 20px;background:var(--surface);border-bottom:1px solid var(--line)}
.hdr.open .nav a{padding:14px}
.hdr.open .nav .nav-cta{display:block;margin-top:8px;background:var(--violet);color:var(--on-violet);text-align:center}
.split,.ftr-top{grid-template-columns:minmax(0,1fr)}
.xl{font-size:56px;line-height:56px}
.h2{font-size:36px;line-height:40px}
.sec{padding:64px 0}
.ftr-big .lk-logo-word{font-size:56px !important}
.ftr-big .lk-mark{width:128px;height:128px}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;scroll-behavior:auto !important}}

/* design system components (Lakely bundle) */
/* Logo */
.lk-logo { display: inline-flex; align-items: center; gap: 0.6em; color: var(--ink); }
.lk-logo-stacked { gap: 0.55em; }
.lk-mark-band { stroke: var(--violet); }
.lk-mark-inner { stroke: var(--spark); }
.lk-mark-deep .lk-mark-band, .lk-mark-deep .lk-mark-inner { stroke: var(--ink); }
.lk-logo-word { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.015em; line-height: 1; white-space: nowrap; }
.lk-logo-stacked .lk-logo-word { display: flex; flex-direction: column; line-height: 1.02; }

/* Button */
.lk-btn { font-family: var(--font-sans); font-weight: 600; font-size: 14px; line-height: 20px; display: inline-flex; align-items: center; gap: var(--space-2); border-radius: var(--radius-md); border: 1.5px solid transparent; cursor: pointer; transition: transform .12s ease, background-color .12s ease; }
.lk-btn-md { height: 40px; padding: 0 var(--space-4); }
.lk-btn-lg { height: 48px; padding: 0 var(--space-6); font-size: 16px; }
.lk-btn-primary { background: var(--violet); color: var(--on-violet); }
.lk-btn-spark { background: var(--spark); color: var(--on-spark); }
.lk-btn-quiet { background: var(--surface-raised); color: var(--ink); border-color: var(--border); }
.lk-btn-ghost { background: transparent; color: var(--violet); padding-left: var(--space-2); padding-right: var(--space-2); }
.lk-btn:hover { transform: translateY(-1px); }
.lk-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.lk-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* Eyebrow */
.lk-eyebrow { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); display: inline-flex; gap: .5em; }
.lk-eyebrow-num { color: var(--spark-text); }
.lk-eyebrow-violet { color: var(--violet); }
.lk-eyebrow-spark { color: var(--spark-text); }

/* Badge */
.lk-badge { display: inline-flex; align-items: center; font-family: var(--font-sans); font-weight: 600; font-size: 12px; line-height: 16px; padding: 4px 10px; border-radius: var(--radius-pill); }
.lk-badge-neutral { background: var(--surface-sunken); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.lk-badge-violet { background: var(--violet-soft); color: var(--violet); }
.lk-badge-spark { background: var(--spark-soft); color: var(--spark-text); }
.lk-badge-sage { background: var(--sage); color: var(--on-tint); }
.lk-badge-lilac { background: var(--lilac); color: var(--on-tint); }

/* Accent cycling */
.lk-accent-violet { --acc: var(--violet); }
.lk-accent-spark { --acc: var(--spark); }
.lk-accent-lilac { --acc: var(--lilac); }
.lk-accent-sage { --acc: var(--sage); }
.lk-accent-apricot { --acc: var(--apricot); }

/* Card */
.lk-card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.lk-card-stripe { height: 8px; background: var(--acc); }
.lk-card-body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
.lk-card-title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 26px; color: var(--ink); }
.lk-card-rule { width: 32px; height: 3px; border-radius: 3px; background: var(--acc); margin: var(--space-1) 0; }
.lk-card-text { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 23px; }
.lk-card-list { margin: var(--space-1) 0 0; padding-left: 18px; color: var(--ink-2); font-size: 14px; line-height: 22px; }
.lk-card-list li::marker { color: var(--muted); }
.lk-card-meta { margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--muted); }

/* Phase track */
.lk-phases { list-style: none; margin: 0; padding: var(--space-6); display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--space-2); }
.lk-phase { display: flex; align-items: center; gap: var(--space-2); padding: 10px var(--space-4); border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; line-height: 20px; flex-wrap: wrap; }
.lk-phase-num { font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
.lk-phase-label { font-weight: 600; }
.lk-phase-detail { font-size: 12px; margin-left: auto; }
.lk-phase-done { background: var(--violet-soft); color: var(--violet); box-shadow: none; }
.lk-phase-active { background: var(--spark); color: var(--on-spark); box-shadow: none; }

/* Callout */
.lk-callout { position: relative; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); max-width: 420px; box-shadow: var(--shadow-card); }
.lk-callout::after { content: ""; position: absolute; top: var(--space-6); right: var(--space-6); width: 12px; height: 12px; border-radius: 50%; background: var(--acc); }
.lk-callout-head { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 30px; color: var(--ink); letter-spacing: -0.01em; padding-right: var(--space-6); }
.lk-callout-text { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 23px; }
.lk-callout-dark { background: var(--deep); border-color: var(--deep); }
.lk-callout-dark .lk-callout-head { color: #FAF8F3; }
.lk-callout-dark .lk-callout-text { color: #C9CBD6; }
.lk-callout-dark .lk-eyebrow { color: #FF7A4F; }
.lk-eyebrow,.lk-callout-head{margin:0}
/* selects: own chevron so the right inset matches the left */
select{-webkit-appearance:none;appearance:none;padding-left:14px !important;padding-right:42px !important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23C8C6C0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-position:right 14px center !important;background-size:12px 8px !important;cursor:pointer}
select::-ms-expand{display:none}