@font-face{font-family:"Space Grotesk";font-weight:500;font-display:swap;src:url(fonts/space-grotesk-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:600;font-display:swap;src:url(fonts/space-grotesk-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:700;font-display:swap;src:url(fonts/space-grotesk-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2")}

:root{--ink:#0B1220;--text:#3A4252;--muted:#4A5263;--line:#E3E6EC;--soft:#F2F4F8;--accent:#1E3FD8;--accent-light:#9DB0FF;--winerz:#B412E1;--dark-line:#2A3245;--dark-text:#C3C9D6;--display:"Space Grotesk",system-ui,sans-serif;--body:"IBM Plex Sans",system-ui,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3,blockquote{font-family:var(--display);margin:0}
p{margin:0}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.m{display:none}

/* header */
.top{border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:18px;padding-bottom:18px}
.logo{display:block;white-space:nowrap;font-family:var(--display);font-size:26px;text-decoration:none}
.logo b{letter-spacing:-.02em}
.logo span{font-weight:500;color:#4A5263}
.nav{display:flex;align-items:center;gap:28px;font-size:15px}
.nav a{text-decoration:none}
.nav a:hover{color:var(--accent)}

/* buttons */
.btn{display:inline-block;text-decoration:none;font-weight:600;border-radius:999px;padding:15px 28px;border:1.5px solid transparent;text-align:center}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:#1733B5}
.btn-ghost{border-color:var(--ink)}
.btn-ghost:hover{background:var(--soft)}
.btn-white{background:#fff;color:var(--ink)}
.btn-sm{padding:11px 20px;font-size:15px}
.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}

/* type */
.eyebrow{font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:20px}
h1{font-weight:700;font-size:clamp(40px,5.6vw,72px);line-height:1.04;letter-spacing:-.03em;max-width:960px;text-wrap:balance}
h2{font-size:clamp(32px,4vw,48px);line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
.lead{margin-top:28px;max-width:760px;font-size:20px;color:var(--text);text-wrap:pretty}
.sub{margin-top:16px;max-width:620px;color:var(--text)}

/* sections */
.hero{padding:104px 0 96px}
section{padding:104px 0}
.dark{background:var(--ink);color:#fff}
.dark .eyebrow{color:var(--accent-light)}
.story{display:flex;flex-wrap:wrap;gap:48px}
.story>div:first-child{flex:1 1 320px}
.story-body{flex:2 1 520px;display:flex;flex-direction:column;gap:20px;font-size:19px;color:var(--dark-text)}
.aim{margin-top:12px;padding-top:28px;border-top:1px solid var(--dark-line);font-family:var(--display);font-weight:600;font-size:clamp(22px,2.4vw,28px);line-height:1.3;color:#fff}

.cards{margin-top:48px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.card{background:var(--soft);border-radius:16px;padding:32px}
.card h3{font-size:22px;line-height:1.2;margin-bottom:12px}
.card p{color:var(--text)}

/* what founders get: desktop two-column layout */
@media (min-width:761px){
  #founders .wrap{display:grid;grid-template-columns:minmax(0,35fr) minmax(0,65fr);column-gap:clamp(40px,6vw,96px);align-items:start}
  #founders .founders-head{position:sticky;top:40px}
  #founders .cards{margin-top:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px clamp(32px,4vw,56px)}
  #founders .card{background:transparent;border-radius:0;border-top:2px solid #1E3FD8;padding:28px 0 0;transition:transform .2s ease}
  #founders .card:hover{transform:translateY(-4px)}
  /* jobs: why join us, columns with dividers (2x2 below 1100px) */
  .why .cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
  .why .card{background:transparent;border-radius:0;padding:0 32px;border-left:1px solid #E3E6EC}
  .why .card:first-child{border-left:0;padding-left:0}
  .why .card:last-child{padding-right:0}
  .why .card::before{content:"";display:block;width:8px;height:8px;margin-bottom:16px;background:#1E3FD8}
}
@media (min-width:761px) and (max-width:1100px){
  .why .cards{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
  .why .card:nth-child(odd){border-left:0;padding-left:0}
  .why .card:nth-child(even){padding-right:0}
}
.why{border-top:1px solid #E3E6EC}

.soft{background:var(--soft)}
.soft .card{background:#fff}
.quotes{margin-top:48px;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px}
figure{margin:0;background:#fff;border-radius:16px;padding:40px;display:flex;flex-direction:column;justify-content:space-between;gap:32px}
blockquote{font-weight:500;font-size:22px;line-height:1.4}
figcaption{font-size:15px;color:var(--muted)}
figcaption b{color:var(--ink)}

.cta{background:var(--accent);color:#fff;padding:88px 0}
.cta .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px}
.cta h2{max-width:680px;font-size:clamp(30px,4vw,46px);line-height:1.1}

footer{padding:48px 0 40px}
.pe{max-width:none;font-family:var(--display);font-weight:600;font-size:22px;line-height:1.3}
.legal{margin-top:24px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;font-size:14px;color:var(--muted)}

/* jobs */
.roles{margin:48px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.roles li{border-bottom:1px solid var(--line)}
.roles a{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:28px 0;text-decoration:none}
.roles strong{display:block;font-family:var(--display);font-weight:600;font-size:22px}
.roles small{display:block;margin-top:4px;font-size:15px;color:var(--muted)}
.roles em{font-style:normal;font-weight:600;color:var(--accent)}
.roles a{--co:var(--accent);border-left:3px solid var(--co);padding-left:20px;padding-right:20px;transition:background .15s}
.roles .co-winerz{--co:var(--winerz)}
.roles .co-portfolio{--co:#4A5263}
.roles .tag{display:inline-block;margin-bottom:8px;padding:3px 10px;border-radius:999px;font-style:normal;font-size:13px;font-weight:600;line-height:1.4;color:var(--co);background:color-mix(in srgb,var(--co) 10%,transparent)}
.roles .tag+.tag{margin-left:6px}
.roles .tag-neutral{color:#4A5263;background:#EEF0F4}
h3.roles-sub,.jobs-page h3.roles-sub{margin-top:56px;font-family:var(--body);font-size:14px;line-height:1.4;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#4A5263}
.roles.roles-closed{margin-top:16px}
.roles .closed{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:28px 20px;border-left:3px solid #C9CED8;cursor:default}
.roles .closed strong,.roles .closed small{opacity:.6}
.roles .closed em{font-weight:400;color:#4A5263}
.notice{margin-top:28px;background:#F2F4F8;border-radius:16px;padding:20px 24px}
.job+.notice{margin-top:64px}
.notice p{margin:0;color:var(--text)}
.notice a{color:var(--accent);font-weight:600}
@media (min-width:761px){
  .roles a:hover{background:color-mix(in srgb,var(--co) 5%,transparent)}
  .roles a:hover strong{color:var(--co)}
}
.co{color:var(--accent);font-weight:600;text-decoration:none}
.co:hover{text-decoration:underline}
.box{margin-top:64px;background:var(--soft);border-radius:20px;padding:40px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.box h3{font-size:26px}
.box p{margin-top:10px;color:var(--text);max-width:620px}
.dark .card{background:transparent;border:1px solid var(--dark-line)}
.dark .card p{color:var(--dark-text)}

/* carousel dots: mobile only */
.dots{display:none}

/* mobile: deliberately simple */
@media (max-width:760px){
  body{font-size:16px}
  .d{display:none!important}
  .m{display:block}
  .top .wrap{padding-top:14px;padding-bottom:14px}
  .logo{display:flex;flex-direction:column;align-items:flex-end;font-size:24px;line-height:1.05}
  .logo span{display:block;margin-top:0;margin-right:-.3px;font-size:11px;font-weight:500;color:#4A5263;letter-spacing:.08em;text-transform:uppercase;line-height:1.1}
  .nav .link{display:none}
  .nav{gap:12px}
  .nav .mlink{display:inline;white-space:nowrap}
  .nav .btn{white-space:nowrap}
  .hero{padding:56px 0 64px}
  section{padding:64px 0}
  .eyebrow{font-size:12px;margin-bottom:14px}
  h1{font-size:38px;line-height:1.08}
  h2{font-size:30px;line-height:1.12}
  .lead{margin-top:20px;font-size:17px}
  .sub{margin-top:10px}
  .btns{margin-top:32px}
  .btns .btn{width:100%}
  .story{gap:24px}
  .story-body{font-size:17px;gap:16px}
  .aim{font-size:21px}
  .cards{margin-top:28px;gap:12px}
  .card{padding:22px 24px}
  .card h3{font-size:20px;margin-bottom:4px}
  .quotes{margin-top:28px;grid-template-columns:1fr}
  figure{padding:28px 24px;gap:20px}
  blockquote{font-size:19px}
  .cta{padding:56px 0}
  .cta h2{font-size:28px}
  .cta .btn{width:100%}
  footer{padding:40px 0 32px}
  .pe{display:none}
  .legal{margin-top:0;padding-top:0;border-top:0}
  .legal{flex-direction:column;gap:6px;font-size:13px}
  .roles strong{font-size:20px}
  .box{padding:28px 24px}
  .box .btn{width:100%}
  /* swipe carousels */
  .carousel{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-left:-24px;margin-right:-24px;padding:0 24px;scroll-padding:0 24px}
  .carousel::-webkit-scrollbar{display:none}
  .carousel>*{flex:0 0 84%;scroll-snap-align:start}
  .dots{display:flex;justify-content:center;gap:8px;margin-top:20px}
  .dots button{position:relative;width:8px;height:8px;padding:0;border:0;border-radius:999px;background:#C9CED8;cursor:pointer;transition:width .2s,background .2s}
  .dots button[aria-current="true"]{width:22px;background:var(--accent)}
  .dots button::before{content:"";position:absolute;inset:-18px -8px}
}
.pe span{display:block;text-wrap:pretty}

/* job pages: smaller headings */
.jobs-page h1{font-size:48px;line-height:1.1}
.jobs-page h2{font-size:28px;line-height:1.2}
.jobs-page h3,.jobs-page .card h3,.jobs-page .box h3,.jobs-page .job h3{font-size:18px;line-height:1.3}
@media (min-width:761px){
  .jobs-page .hero{padding:64px 0 24px}
  .jobs-page section{padding-top:72px}
  .jobs-page .hero+section{padding-top:24px}
}
@media (max-width:760px){
  .jobs-page .hero{padding:40px 0 16px}
  .jobs-page .hero+section{padding-top:16px}
  .jobs-page h1{font-size:34px;line-height:1.12}
  .jobs-page h2{font-size:22px;line-height:1.25}
  .roles a,.roles .closed{padding-left:16px;padding-right:16px}
}