/* KEO COLLECTIVE — design pack skin (loads after site.css on every page) */

@font-face{font-family:"Black Future";src:url(/fonts/black-future.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Lisandra";src:url(/fonts/lisandra-italic.woff2) format("woff2");font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(/fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
:root{
  /* frame */
  --bg: #000000;
  --panel: #08090D;
  --raise: #10131B;
  --line: #1B1F2B;
  --hair: rgba(255,255,255,.14);
  --hair-2: rgba(255,255,255,.32);
  /* text */
  --ink: #FFFFFF;
  --ink-2: #B9BDC9;
  --ink-3: #8E94A6;
  /* blue */
  --blue: #3B7BFF;
  --cobalt: #2F5BFF;
  --blue-soft: rgba(59,123,255,.14);
  --blue-line: rgba(124,151,255,.18);
  --blue-deep: #0B1E73;
  --glass: linear-gradient(160deg,rgba(24,40,110,.34),rgba(6,8,20,.92) 55%,rgba(0,0,0,.96));
  --glow: linear-gradient(135deg,#0B1E73 0%,#050712 55%,#000 80%);
  /* type */
  --font-display: "Black Future", "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Lisandra", Georgia, "Times New Roman", serif;
  --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 40px;
  --space-7: 72px;
  --max: 1180px;
  /* shape */
  --radius-0: 0px;
  --radius-round: 50%;
  /* motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --shadow-float: 0 20px 60px rgba(0,0,0,.35);
  --shadow-glow: 0 0 46px rgba(47,107,255,.38);
  --focus: 0 0 0 3px rgba(59,123,255,.45);
}

/* ---------- site-wide mapping: old names now point at the design pack ---------- */
:root{--display:var(--font-body);--body:var(--font-body);--mono:var(--font-mono);--cobalt-2:var(--blue)}
body{font-family:var(--font-body)}


/* ---------- values tokens.json cannot hold ---------- */
:root{--glass:linear-gradient(160deg,rgba(24,40,110,.34),rgba(6,8,20,.92) 55%,rgba(0,0,0,.96));--glow:linear-gradient(135deg,#0B1E73 0%,#050712 55%,#000 80%);--ease:cubic-bezier(.2,.7,.2,1)}

/* ---------- base ---------- */
body{font:16px/1.6 var(--font-body);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--ink)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
::selection{background:var(--blue);color:#fff}

/* ---------- headings: Black Future capitals ---------- */
h1,h2{font-family:var(--font-display);font-weight:400;text-transform:uppercase;letter-spacing:.005em;color:var(--ink)}
h1{font-size:clamp(40px,5.2vw,72px);line-height:1}
h2{font-size:clamp(28px,3.6vw,46px);line-height:1.02}
h1 em,h2 em{font-style:normal;color:var(--blue)}
h3{font-family:var(--font-body);font-weight:600;font-size:clamp(19px,2vw,22px);letter-spacing:-.01em;line-height:1.2;color:var(--ink)}

/* ---------- the duo: Lisandra Italic lead-in + Black Future ---------- */
.lead,.h-a{display:block;font-family:var(--font-serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.01em;color:var(--ink);line-height:1.05}
h1 .h-a{font-size:.8em;margin-bottom:.12em}
.shead .lead{font-size:clamp(24px,2.6vw,34px);margin:10px 0 2px}
.fquote blockquote{font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:clamp(26px,2.8vw,38px);line-height:1.2;letter-spacing:-.01em}

/* ---------- labels ---------- */
.label{font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin:0}
.label b{color:var(--blue);font-weight:500}
.kicker{display:flex;gap:10px;align-items:center}
.kicker::before{content:"";width:22px;height:2px;background:var(--blue)}

/* ---------- buttons: square, mono capitals ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:15px 22px;border-radius:0;border:1px solid var(--hair-2);background:transparent;color:var(--ink);font:500 12.5px/1 var(--font-mono);letter-spacing:.13em;text-transform:uppercase;text-decoration:none;cursor:pointer}
.btn::after{content:"→";transition:transform .3s var(--ease)}
.btn:hover{border-color:var(--ink)}
.btn:hover::after{transform:translateX(4px)}
.btn.solid{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.btn.solid:hover{background:#fff;border-color:#fff;color:#000}
.rs-hero .acts .btn{border-radius:0}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:80;background:#000;border-bottom:1px solid var(--hair)}
.nav .wrap{display:flex;align-items:center;gap:18px;height:62px}
.nav .mark img{height:30px;width:auto;display:block}
.nav nav a{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--ink-2);padding:9px 12px;border-bottom:2px solid transparent}
.nav nav a:hover{color:#fff}
.nav nav a[aria-current="page"]{color:#fff;border-bottom-color:var(--blue)}
.nav nav a.cta{background:var(--cobalt);color:#fff;border-bottom:0;padding:10px 16px;margin-left:10px}

/* ---------- sections ---------- */
section{padding-block:60px;border-bottom:1px solid var(--hair);position:relative}
.shead{display:flex;align-items:flex-end;gap:18px 40px;flex-wrap:wrap;margin-bottom:28px}
.shead > div{flex:1 1 420px}
.shead .right{flex:0 1 420px;color:var(--ink-2);font-size:16px}

/* ---------- hero ---------- */
.rs-hero::before{display:none}
.rs-hero .swap{display:grid}
.rs-hero .swap em{grid-area:1/1;font-family:var(--font-display);font-style:normal;text-transform:uppercase;color:var(--blue);line-height:1;opacity:0;transform:translateY(.28em);filter:blur(8px);transition:opacity .6s var(--ease),transform .6s var(--ease),filter .6s}
.rs-hero .swap em.on{opacity:1;transform:none;filter:none}
.rs-hero .swap em.out{opacity:0;transform:translateY(-.28em);filter:blur(8px)}
.rs-hero .lede{font-size:18px;color:var(--ink-2);max-width:38ch}

/* ---------- glass cards (focus cards, founder quote) ---------- */
.fcard,.fquote{border:1px solid var(--blue-line);border-radius:0;background:var(--glass);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.fcard{position:relative;padding:30px 26px}
.fcard .n{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin-bottom:14px}
.fcard li{padding:10px 0;border-top:1px solid var(--hair);color:var(--ink-2);font-size:15px;list-style:none}
.fquote{padding:clamp(24px,3vw,40px);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--shadow-float),inset 0 1px 0 rgba(255,255,255,.06)}
.fquote .who{margin-top:18px;font-family:var(--font-mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.fquote .who b{color:#fff;font-weight:500}

/* ---------- how we work: step tabs ---------- */
.steps{display:grid;grid-template-columns:320px 1fr;border:1px solid var(--hair)}
.steps li button{color:var(--ink-3);border-bottom:1px solid var(--hair)}
.steps li button .n{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em}
.steps li button .t{font-family:var(--font-display);font-size:17px;font-weight:400;text-transform:uppercase;letter-spacing:.01em}
.steps li button .prog{height:2px;background:var(--blue)}
.steps li button[aria-selected="true"]{background:var(--raise);color:#fff}
.steps li button[aria-selected="true"] .n{color:var(--blue)}
.steps .panel{background:var(--glow)}
.steps .panel h3{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:clamp(22px,2.6vw,30px);line-height:1.05}
.steps canvas.steps3d{border:0;background:transparent}

/* ---------- work cards ---------- */
.work{padding:28px 26px 24px;background:var(--bg)}
.work::before{background:var(--blue)}
.work:hover{background:var(--raise)}
.work .ind-l{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.work .q{color:var(--ink-2)}
.work .scope b{font-family:var(--font-display);font-weight:400;font-size:34px;letter-spacing:0;color:#fff}

/* ---------- prices ---------- */
.price .v{font-family:var(--font-display);font-weight:400;letter-spacing:0}
.price.hi{border-color:var(--blue)}

/* ---------- big moving words ---------- */
.bw-row{white-space:nowrap;overflow:hidden;line-height:1}
.bw-track{display:inline-flex;align-items:center;font-family:var(--font-display);font-weight:400;font-size:clamp(90px,11vw,210px);text-transform:uppercase;color:rgba(255,255,255,.10)}
.bw-track span{padding:0 .28em}
.bw-track i{width:.14em;height:.14em;border-radius:0;background:rgba(59,123,255,.5);flex:none}
.bw-row.r .bw-track{color:transparent;-webkit-text-stroke:1.4px rgba(255,255,255,.22)}
.bw-row.r .bw-track i{background:transparent;border:2px solid var(--blue)}

/* ---------- blue call band ---------- */
.band{background:var(--cobalt)}
.band h2{max-width:20ch}
.band p{color:#fff;max-width:56ch;font-size:17px}
.band .btn{border-color:#fff;color:#fff}
.band .btn.solid{background:#fff;color:#000;border-color:#fff}
.band .btn.solid:hover{background:#000;color:#fff;border-color:#000}

/* ---------- footer ---------- */
footer.site{padding-block:56px 64px;background:#000;border-top:1px solid var(--hair)}
footer.site .mark img{height:90px;width:auto;display:block}
footer.site .h{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
footer.site a{color:var(--ink-2);text-decoration:none}
footer.site a:hover{color:#fff}

/* Mobile fix (2026-09-25): "How we work" steps stack; tabs scroll across, panel text full width, 3D below */
@media(max-width:900px){
  .steps{grid-template-columns:minmax(0,1fr)}
  .steps ol{min-width:0;border-right:0;border-bottom:1px solid var(--hair)}
  .steps li button{border-bottom:0}
  .steps .panel{grid-template-columns:minmax(0,1fr);padding:24px 18px;min-height:0;gap:20px}
  .steps .panel > *{min-width:0}
  .steps .panel canvas{max-height:240px;margin-inline:auto}
}