/* Haste — red/black retune of Nocturne tokens + page layout. */
:root{
  --color-bg:#0a0a0c;--color-surface:#131317;--color-text:#ececed;
  --color-accent:#d8383f;--color-accent-2:#d8383f;--accent-deep:#8e1f26;
  --color-divider:color-mix(in srgb,#ececed 14%,transparent);
  --color-accent-100:#fdeeef;--color-accent-200:#f9d6d8;--color-accent-300:#f0b1b5;
  --color-accent-400:#e4797f;--color-accent-500:#d8383f;--color-accent-600:#b02a31;
  --color-accent-700:#8e1f26;--color-accent-800:#5c151a;--color-accent-900:#310e11;
  --color-accent-2-800:#5c151a;--color-accent-2-100:#fdeeef;
  --color-neutral-900:#17171b;--color-neutral-800:#26262d;
  --shadow-sm:0 0 0 1px #26262d;
  --shadow-md:0 0 0 1px #35353d,0 6px 18px rgba(0,0,0,.6);
  --shadow-lg:0 0 0 1px #55555f,0 16px 40px rgba(0,0,0,.7);
  --font-mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono","DejaVu Sans Mono",Menlo,Consolas,monospace;
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue","Liberation Sans",system-ui,sans-serif;
  --font-heading:var(--font-body);
  --gutter:clamp(20px,6vw,120px);--maxw:1320px;
}
html{scroll-behavior:smooth}
body{background:var(--color-bg);font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(color-mix(in srgb,#ececed 3%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,#ececed 3%,transparent) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(120% 90% at 50% 0%,#000 20%,transparent 75%)}
main,header,footer{position:relative;z-index:1}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
a{color:var(--color-accent-400);text-decoration-color:color-mix(in srgb,var(--color-accent) 50%,transparent)}
a:hover{color:var(--color-accent-300)}
.mono{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.eyebrow{display:flex;align-items:center;gap:10px;color:var(--color-accent);font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:var(--space-6)}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--color-accent)}
/* nav */
.sitenav{position:sticky;top:0;z-index:20;backdrop-filter:blur(14px);background:color-mix(in srgb,var(--color-bg) 80%,transparent);border-bottom:1px solid color-mix(in srgb,#ececed 8%,transparent)}
.sitenav .wrap{display:flex;align-items:center;gap:var(--space-8);height:64px}
.brand{display:flex;align-items:center;gap:11px;margin-right:auto;text-decoration:none;color:var(--color-text)}
.brand .mark{width:24px;height:24px;color:var(--color-accent);transition:transform .35s cubic-bezier(.2,1.6,.3,1)}
.brand:hover .mark{transform:translateY(-5px) rotate(-6deg)}
.brand b{font-weight:500;font-size:17px;letter-spacing:.3em;text-transform:uppercase}
.navlinks{display:flex;align-items:center;gap:var(--space-8)}
.navlinks a{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--color-text) 65%,transparent);text-decoration:none}
.navlinks a:hover,.navlinks a[aria-current=page]{color:var(--color-accent)}
.lang{display:flex;border:1px solid color-mix(in srgb,#ececed 12%,transparent);border-radius:var(--radius-sm);overflow:hidden}
.lang button{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;background:none;border:0;color:color-mix(in srgb,var(--color-text) 50%,transparent);padding:5px 8px;cursor:pointer}
.lang button+button{border-left:1px solid color-mix(in srgb,#ececed 12%,transparent)}
.lang button[aria-pressed=true]{color:var(--color-accent);background:color-mix(in srgb,var(--color-accent) 12%,transparent)}
.lang button:hover{color:var(--color-accent-300)}
/* hero */
.hero{padding:clamp(72px,13vh,150px) 0 clamp(64px,11vh,120px);position:relative}
.hero::after{content:"";position:absolute;left:calc(var(--gutter) * -1);top:14%;width:min(760px,90vw);height:440px;background:radial-gradient(60% 60% at 20% 50%,color-mix(in srgb,var(--color-accent) 14%,transparent),transparent 70%);filter:blur(20px);pointer-events:none;z-index:-1}
h1.big{font-size:clamp(38px,6.4vw,80px);line-height:1.02;letter-spacing:-.03em;max-width:19ch;margin-bottom:var(--space-8)}
h1.big em{font-style:normal;color:var(--color-accent)}
.lede{font-size:clamp(16px,1.55vw,20px);line-height:1.6;max-width:62ch;color:color-mix(in srgb,var(--color-text) 76%,transparent);text-wrap:pretty}
.actions{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-8)}
.btn{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:12px 20px;transition:background .18s,border-color .18s,color .18s}
.btn-primary{box-shadow:0 0 24px -8px color-mix(in srgb,var(--color-accent) 55%,transparent)}
/* strip — a graphic band, no text */
.strip{border-block:1px solid color-mix(in srgb,#ececed 8%,transparent);overflow:hidden;background:color-mix(in srgb,#ececed 2%,transparent)}
.strip .band{position:relative;height:64px;display:block;overflow:hidden}
.strip .ticks{position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,color-mix(in srgb,var(--color-accent) 40%,transparent) 0 1px,transparent 1px 18px);mask-image:repeating-linear-gradient(90deg,#000 0 1px,#000 1px 18px),linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-composite:intersect;opacity:.5}
.strip .ticks::after{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,transparent 0 90px,color-mix(in srgb,var(--color-accent) 90%,transparent) 90px 91px,transparent 91px 108px);opacity:.8}
.strip .pulse{position:absolute;top:0;bottom:0;width:26%;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--color-accent) 22%,transparent) 45%,color-mix(in srgb,var(--color-accent) 70%,transparent) 50%,color-mix(in srgb,var(--color-accent) 22%,transparent) 55%,transparent);animation:drift 6s linear infinite}
@keyframes drift{from{transform:translateX(-120%)}to{transform:translateX(480%)}}
@media(prefers-reduced-motion:reduce){.strip .pulse{animation:none;left:30%}}
/* sections */
section{padding-block:clamp(64px,10vh,120px)}
.two{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,6vw,90px);align-items:start}
h2.sec{font-size:clamp(26px,3.4vw,42px);line-height:1.08;letter-spacing:-.02em;max-width:22ch}
.prose p{font-size:17px;line-height:1.7;color:color-mix(in srgb,var(--color-text) 74%,transparent);max-width:64ch;margin-bottom:var(--space-6);text-wrap:pretty}
.claim{font-size:clamp(20px,2.4vw,30px);line-height:1.25;letter-spacing:-.01em;color:var(--color-text);border-left:2px solid var(--color-accent);padding-left:var(--space-6);max-width:34ch}
/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:color-mix(in srgb,#ececed 9%,transparent);border:1px solid color-mix(in srgb,#ececed 9%,transparent);border-radius:var(--radius-md);overflow:hidden;margin-top:var(--space-8)}
.step{background:var(--color-bg);padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-4);transition:background .25s}
.step:hover{background:color-mix(in srgb,var(--color-accent) 5%,var(--color-bg))}
.step .n{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;color:var(--color-accent)}
.step h3{font-size:20px;letter-spacing:-.01em}
.step p{font-size:14px;line-height:1.65;color:color-mix(in srgb,var(--color-text) 66%,transparent);margin:0}
.step .bar{margin-top:auto;height:2px;width:100%;background:color-mix(in srgb,#ececed 10%,transparent);position:relative;overflow:hidden}
.step .bar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--color-accent);transition:width .6s ease}
.step:hover .bar i{width:100%}
/* brand lockup — the logo on a cyber ground */
.herogrid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(32px,6vw,80px);align-items:center}
.lockup{position:relative;aspect-ratio:1;width:100%;max-width:460px;justify-self:end;display:grid;place-items:center;isolation:isolate}
.lockup img{position:relative;z-index:3;width:82%;height:82%;object-fit:contain;mix-blend-mode:screen;filter:brightness(.7) contrast(2.6) saturate(1.1) drop-shadow(0 0 30px color-mix(in srgb,var(--color-accent) 35%,transparent));background:transparent;-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 52%,transparent 80%);mask-image:radial-gradient(circle at 50% 50%,#000 52%,transparent 80%)}
/* grid + vignette */
.lockup::before{content:"";position:absolute;inset:0;z-index:0;background-image:linear-gradient(color-mix(in srgb,var(--color-accent) 12%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--color-accent) 12%,transparent) 1px,transparent 1px);background-size:34px 34px;mask-image:radial-gradient(circle at 50% 50%,#000 30%,transparent 72%)}
/* rings + radar sweep */
.lockup::after{content:"";position:absolute;inset:6%;z-index:1;border-radius:50%;background:conic-gradient(from 0deg,color-mix(in srgb,var(--color-accent) 30%,transparent),transparent 28%);mask-image:radial-gradient(circle,transparent 26%,#000 27%,#000 99%,transparent);animation:sweep 7s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}
.rings{position:absolute;inset:0;z-index:2;pointer-events:none}
.rings i{position:absolute;inset:0;margin:auto;border-radius:50%;border:1px solid color-mix(in srgb,var(--color-accent) 22%,transparent)}
.rings i:nth-child(1){width:96%;height:96%}
.rings i:nth-child(2){width:70%;height:70%;border-style:dashed;animation:spin 26s linear infinite}
.rings i:nth-child(3){width:44%;height:44%;border-color:color-mix(in srgb,var(--color-accent) 34%,transparent)}
@keyframes spin{to{transform:rotate(-360deg)}}
.rings b{position:absolute;width:14px;height:14px;border:1px solid var(--color-accent);opacity:.65}
.rings b:nth-child(4){top:0;left:0;border-right:0;border-bottom:0}
.rings b:nth-child(5){top:0;right:0;border-left:0;border-bottom:0}
.rings b:nth-child(6){bottom:0;left:0;border-right:0;border-top:0}
.rings b:nth-child(7){bottom:0;right:0;border-left:0;border-top:0}
.rings s{position:absolute;left:4%;right:4%;height:1px;top:0;background:linear-gradient(90deg,transparent,var(--color-accent),transparent);opacity:.5;animation:scan 4.5s cubic-bezier(.5,0,.5,1) infinite}
@keyframes scan{0%{top:6%}50%{top:94%}100%{top:6%}}
.lockup .tick{position:absolute;z-index:4;font-family:var(--font-mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:color-mix(in srgb,var(--color-accent) 70%,transparent)}
.lockup .tick.tl{top:22px;left:22px}
.lockup .tick.br{bottom:22px;right:22px}
@media(prefers-reduced-motion:reduce){.lockup::after,.rings i,.rings s{animation:none}}
/* roles / careers */
.roles{display:flex;flex-direction:column;margin-top:var(--space-8);border-top:1px solid color-mix(in srgb,#ececed 10%,transparent)}
.role{display:grid;grid-template-columns:1fr auto auto;gap:var(--space-6);align-items:center;padding:var(--space-6) var(--space-2);border-bottom:1px solid color-mix(in srgb,#ececed 10%,transparent);text-decoration:none;color:inherit;transition:background .2s,padding-left .2s}
.role:hover{background:color-mix(in srgb,#ececed 3%,transparent);padding-left:var(--space-6)}
.role h3{font-size:19px;margin:0;letter-spacing:-.01em}
.role .meta{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--color-text) 50%,transparent)}
.role .arrow{color:var(--color-accent);opacity:0;transform:translateX(-6px);transition:.2s}
.role:hover .arrow{opacity:1;transform:none}
.rolehead{font-size:clamp(30px,4.6vw,58px);line-height:1.04;letter-spacing:-.025em;max-width:20ch}
.jd{border-top:1px solid color-mix(in srgb,#ececed 10%,transparent);padding-block:clamp(32px,6vh,64px);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,80px)}
.jd h3{font-size:clamp(22px,2.6vw,30px);letter-spacing:-.02em}
.metaline{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--color-text) 48%,transparent);margin-top:var(--space-4)}
.jd .metaline{margin-top:var(--space-3)}
.jd p{font-size:16px;line-height:1.7;color:color-mix(in srgb,var(--color-text) 74%,transparent);max-width:62ch}
.jd ul{margin:0 0 var(--space-6);padding-left:1.1em;font-size:15px;line-height:1.7;color:color-mix(in srgb,var(--color-text) 70%,transparent)}
.jd li{margin-bottom:var(--space-2)}
.awaiting{border:1px dashed color-mix(in srgb,var(--color-accent) 40%,transparent);border-radius:var(--radius-md);padding:var(--space-6);font-family:var(--font-mono);font-size:11px;line-height:1.8;letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent-300);background:color-mix(in srgb,var(--color-accent) 6%,transparent)}
.note{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--color-accent-400);margin-top:var(--space-6)}
/* footer */
footer{border-top:1px solid color-mix(in srgb,#ececed 8%,transparent);padding-block:var(--space-8)}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--space-8);padding-block:var(--space-8)}
.foot h6{color:color-mix(in srgb,var(--color-text) 45%,transparent);margin-bottom:var(--space-4)}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.foot a,.foot button.linklike{font-size:14px;color:color-mix(in srgb,var(--color-text) 70%,transparent);text-decoration:none;background:none;border:0;padding:0;font-family:inherit;cursor:pointer;text-align:left}
.foot a:hover,.foot button.linklike:hover{color:var(--color-accent)}
.legalbar{display:flex;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap;padding-top:var(--space-6);border-top:1px solid color-mix(in srgb,#ececed 7%,transparent);font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--color-text) 38%,transparent)}
/* consent banner */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:40;background:color-mix(in srgb,var(--color-surface) 96%,transparent);border-top:1px solid color-mix(in srgb,var(--color-accent) 35%,transparent);backdrop-filter:blur(10px)}
.consent .wrap{display:flex;align-items:center;gap:var(--space-8);padding-block:var(--space-6);flex-wrap:wrap}
.consent p{font-size:13px;line-height:1.6;color:color-mix(in srgb,var(--color-text) 74%,transparent);margin:0;max-width:74ch;flex:1 1 340px}
.consent .actions{margin:0;gap:var(--space-3)}
/* the spider */
#spider{position:fixed;left:0;bottom:10px;z-index:35;width:34px;height:34px;color:var(--accent-deep);background:none;border:0;padding:0;cursor:pointer;opacity:0;transition:transform .55s cubic-bezier(.2,1.5,.35,1),color .3s,opacity .4s;will-change:transform}
#spider.alert{color:var(--color-accent)}
#spider.walk svg{animation:skitter .28s steps(2,end) infinite}
#spider:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}
@keyframes skitter{from{transform:translateY(0) rotate(0)}to{transform:translateY(-2px) rotate(3deg)}}
/* legal pages */
.legal{max-width:74ch;padding-block:clamp(48px,8vh,96px)}
.legal h1{font-size:clamp(30px,4vw,44px);margin-bottom:var(--space-8)}
.legal h2{font-size:22px;margin-top:var(--space-8);margin-bottom:var(--space-3)}
.legal p,.legal li{font-size:15px;line-height:1.7;color:color-mix(in srgb,var(--color-text) 76%,transparent);text-align:justify;hyphens:auto}
@media(max-width:700px){.legal p,.legal li{text-align:left;hyphens:manual}}
.legal ul{padding-left:1.1em}
.legal dl{display:grid;grid-template-columns:auto 1fr;gap:var(--space-3) var(--space-8);font-size:15px;margin:0 0 var(--space-6)}
.legal dt{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--color-text) 45%,transparent);padding-top:3px}
.legal dd{margin:0;color:color-mix(in srgb,var(--color-text) 82%,transparent)}
.mailimg{display:inline-block;vertical-align:-5px;height:23px;width:auto;user-select:none;-webkit-user-drag:none}
.mailimg.sm{height:21px;vertical-align:-4px}
.datimg{display:inline-block;vertical-align:-5px;max-width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.datimg.block{display:block;vertical-align:baseline}
.telimg{display:block;height:22px;width:auto;image-rendering:auto;user-select:none;-webkit-user-drag:none}
.tbd{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--color-accent);background:color-mix(in srgb,var(--color-accent) 12%,transparent);border:1px dashed color-mix(in srgb,var(--color-accent) 45%,transparent);border-radius:4px;padding:1px 6px}
@media(max-width:1080px){.herogrid{grid-template-columns:1fr}.lockup{justify-self:start;max-width:340px;margin-top:var(--space-8)}}
@media(max-width:900px){
 .sitenav .wrap{height:auto;flex-wrap:wrap;gap:var(--space-4);padding-block:var(--space-4)}
 .brand{margin-right:0;flex:1 1 100%}
 .navlinks{flex:1 1 100%;gap:var(--space-6);flex-wrap:wrap;justify-content:flex-start}
 .navlinks a{display:inline!important;font-size:10px}
 .legal dl{grid-template-columns:1fr;gap:var(--space-1) 0}
 .legal dd{margin-bottom:var(--space-4)}
 .consent .wrap{gap:var(--space-4)}
 .consent .actions{width:100%}
 .consent .btn{flex:1 1 140px}
}
@media(max-width:900px){
 .two,.steps,.foot,.jd{grid-template-columns:1fr}
 .role{grid-template-columns:1fr auto}.role .arrow{display:none}
 #spider{display:none}
}

/* careers intro */
.worklabel{font-size:20px;margin-top:var(--space-8);margin-bottom:var(--space-4)}
.perks{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-4);max-width:70ch}
.perks li{font-size:16px;line-height:1.65;color:color-mix(in srgb,var(--color-text) 74%,transparent);padding-left:var(--space-6);border-left:2px solid color-mix(in srgb,var(--color-accent) 45%,transparent)}
.perks b{font-weight:500;color:var(--color-text)}
/* role intro — full measure, justified */
.roleintro{margin-top:var(--space-8);max-width:none}
.roleintro p{max-width:none;text-align:justify;hyphens:auto}
.rolejust{max-width:none}
.justwide{max-width:none;text-align:justify;hyphens:auto}
.rolejust li{text-align:justify;hyphens:auto}
@media(max-width:700px){.roleintro p{text-align:left;hyphens:manual}.rolejust li{text-align:left;hyphens:manual}.justwide{text-align:left;hyphens:manual}}

/* culture list — cards, distinct from the responsibility bullets */
.culturelabel{margin-top:clamp(40px,6vh,72px)}
.culture{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);max-width:none;counter-reset:cu}
.culture li{counter-increment:cu;position:relative;border:1px solid color-mix(in srgb,#ececed 10%,transparent);border-left-width:1px;border-radius:var(--radius-md);background:color-mix(in srgb,#ececed 3%,transparent);padding:var(--space-6);padding-top:calc(var(--space-6) + 18px);font-size:15px;transition:border-color .25s,background .25s}
.culture li::before{content:"0" counter(cu);position:absolute;top:var(--space-6);left:var(--space-6);font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;color:var(--color-accent)}
.culture li:hover{border-color:color-mix(in srgb,var(--color-accent) 45%,transparent);background:color-mix(in srgb,var(--color-accent) 6%,transparent)}
.culture b{display:block;margin-bottom:var(--space-2)}
.culture li>b+br{display:none}
@media(max-width:820px){.culture{grid-template-columns:1fr}}
.loc{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent);margin-top:var(--space-8)}

.hww{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:color-mix(in srgb,#ececed 9%,transparent);border:1px solid color-mix(in srgb,#ececed 9%,transparent);border-radius:var(--radius-md);overflow:hidden;margin-top:var(--space-8)}
.spidercell{align-items:center;justify-content:center;padding:var(--space-8);color:var(--color-accent);transition:color .4s}
.spidercell:hover{color:var(--color-accent-400)}
.spidercell svg{width:56px;height:56px;transition:transform .4s cubic-bezier(.2,1.6,.3,1)}
.spidercell:hover svg{transform:translateY(-8px) rotate(-8deg) scale(1.08)}
@media(max-width:900px){.hww{grid-template-columns:1fr}.spidercell{display:none}}

.jdtext p{font-size:16px;line-height:1.7;color:color-mix(in srgb,var(--color-text) 76%,transparent);max-width:62ch;margin-bottom:var(--space-6)}