/* Shared styles for /careers/ pages. Tokens, nav, buttons and footer match index.html. */
@font-face{font-family:Sohne;src:url(../uploads/Sohne-Buch.otf);font-weight:400;font-display:swap}
@font-face{font-family:Sohne;src:url(../uploads/Sohne-Kraftig.otf);font-weight:500;font-display:swap}
@font-face{font-family:Sohne;src:url(../uploads/Sohne-Fett.otf);font-weight:700;font-display:swap}
:root{--bg:#0A0B0E;--ink:#F4F6FA;--body:#9BA4B0;--dim:#6B7480;--line:rgba(255,255,255,.1);--accent:#107FFF;--ease:cubic-bezier(.22,1,.36,1);--pad:clamp(20px,5.5vw,96px)}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{font-family:Sohne,Inter,system-ui,-apple-system,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}
::selection{background:rgba(16,127,255,.35)}
.grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
main,footer,nav{position:relative;z-index:2}

nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:20px var(--pad);background:var(--bg);border-bottom:1px solid var(--line)}
.wm{font-weight:700;font-size:24px;letter-spacing:-.035em}.wm i{font-style:normal;color:var(--accent)}
.links{display:flex;gap:30px;align-items:center;font-size:15px;color:#C9D0D9}
.links a:not(.btn){position:relative}.links a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.links a:not(.btn):hover,.links a.on{color:#fff}.links a:not(.btn):hover::after,.links a.on::after{transform:scaleX(1)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:999px;font-size:15px;font-weight:500;transition:transform .25s var(--ease),background .25s,box-shadow .25s,border-color .25s;white-space:nowrap}
.btn.pri{background:var(--accent);color:#fff;box-shadow:0 10px 40px rgba(16,127,255,.35)}
.btn.pri:hover{transform:translateY(-2px);box-shadow:0 16px 54px rgba(16,127,255,.55)}
.btn.sec{border:1px solid rgba(255,255,255,.2);color:#E6EAF0;background:rgba(255,255,255,.02)}.btn.sec:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.35)}
.btn .arr{transition:transform .25s var(--ease)}.btn:hover .arr{transform:translateX(3px)}
.links .btn{padding:9px 16px;font-size:14px}

.wrap{flex:1;width:100%;max-width:calc(820px + 2 * var(--pad));padding:clamp(56px,9vh,110px) var(--pad) 110px}
.big{font-size:clamp(44px,6vw,88px);font-weight:500;letter-spacing:-.045em;line-height:1}
.lede{font-size:clamp(18px,1.5vw,22px);color:var(--body);line-height:1.5;margin:22px 0 40px}
.jobs{border-top:1px solid var(--line)}
.job{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;border-bottom:1px solid var(--line);padding:24px 0}
.job .t{flex:1 1 260px;font-size:22px;font-weight:500;letter-spacing:-.015em}.job .m{display:block;font-size:14px;color:var(--body);margin-top:6px;font-weight:400;letter-spacing:0}
.job .v{font-size:14px;color:var(--accent)}.job:hover .t{color:#fff}.job:hover .v{text-decoration:underline}
.note{font-size:15px;color:var(--body);line-height:1.6;margin-top:28px}.note a,.apply p a{color:var(--accent)}

.back{display:inline-block;font-size:14px;color:var(--dim);margin-bottom:28px}.back:hover{color:#fff}
.jd h1{font-size:clamp(36px,4.4vw,60px);font-weight:500;letter-spacing:-.035em;line-height:1.05;margin-bottom:18px}
.jd .meta{font-size:15px;color:var(--body);line-height:1.6}
.jd h2{font-size:20px;font-weight:500;letter-spacing:-.01em;margin:40px 0 12px}
.jd p{font-size:16px;line-height:1.65;color:#C9D0D9;margin-bottom:14px}
.jd ul{list-style:none}
.jd li{font-size:16px;line-height:1.65;color:#C9D0D9;padding-left:24px;position:relative;margin-bottom:10px}.jd li::before{content:"";position:absolute;left:0;top:.8em;width:12px;height:1px;background:var(--accent)}
.apply{margin-top:48px;padding-top:32px;border-top:1px solid var(--line)}.apply p{font-size:14px;color:var(--body);margin-top:16px}

footer{border-top:1px solid var(--line);padding:34px var(--pad);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-size:14px;color:var(--dim);background:rgba(10,11,14,.9)}
footer .links{font-size:14px;gap:24px}

@media (max-width:900px){
  nav .links a:not(.btn),nav .links .btn.sec{display:none}
  footer .links{flex-wrap:wrap;gap:18px}
}