/* Layout: quiet professional — cool paper ground, white surfaces with 1px rules, serif headlines over a clean sans; each company keeps a muted signature colour used only as a small mark */
:root{
  --bg:#F5F6F8; --surface:#FFFFFF; --surface-2:#F0F2F5; --ink:#131A2C; --ink-2:#38415A; --muted:#5D667C; --faint:#868EA3;
  --line:#E2E5EB; --line-2:#ECEEF2; --focus:#3D4BC7;
  --btn:#131A2C; --btn-fg:#FFFFFF; --btn-hover:#262F4A;
  --sc:#3D4BC7; --sc-soft:#EDEFFC; --lab:#0B8468; --lab-soft:#E2F3EE; --ss:#B4620B; --ss-soft:#FBEFE0;
  --ok:#0B7A5B; --ok-bg:#E2F3EC; --bad:#B42318; --bad-bg:#FCE8E6; --info-bg:#EEF1F8;
  --st-new:#C7CCD8; --st-short:#3D4BC7; --st-iv:#D9A21B; --st-offer:#0B8468; --st-hired:#131A2C;
  --shadow:0 1px 2px rgba(19,26,44,.04), 0 6px 20px rgba(19,26,44,.06);
  --f-serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --f-sans:'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0D111C; --surface:#151A28; --surface-2:#1C2233; --ink:#ECEEF5; --ink-2:#C5CADA; --muted:#9AA1B6; --faint:#737B92;
  --line:#262D40; --line-2:#20263A; --focus:#9AA5FF;
  --btn:#ECEEF5; --btn-fg:#0D111C; --btn-hover:#FFFFFF;
  --sc:#9AA5FF; --sc-soft:#1F2548; --lab:#4ECDAA; --lab-soft:#112F28; --ss:#EFA65A; --ss-soft:#352512;
  --ok:#5CD6A8; --ok-bg:#12302A; --bad:#FF8F84; --bad-bg:#3A1A18; --info-bg:#1C2233;
  --st-new:#3A4258; --st-short:#9AA5FF; --st-iv:#E9B949; --st-offer:#4ECDAA; --st-hired:#ECEEF5;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25); color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#0D111C; --surface:#151A28; --surface-2:#1C2233; --ink:#ECEEF5; --ink-2:#C5CADA; --muted:#9AA1B6; --faint:#737B92;
  --line:#262D40; --line-2:#20263A; --focus:#9AA5FF;
  --btn:#ECEEF5; --btn-fg:#0D111C; --btn-hover:#FFFFFF;
  --sc:#9AA5FF; --sc-soft:#1F2548; --lab:#4ECDAA; --lab-soft:#112F28; --ss:#EFA65A; --ss-soft:#352512;
  --ok:#5CD6A8; --ok-bg:#12302A; --bad:#FF8F84; --bad-bg:#3A1A18; --info-bg:#1C2233;
  --st-new:#3A4258; --st-short:#9AA5FF; --st-iv:#E9B949; --st-offer:#4ECDAA; --st-hired:#ECEEF5;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25); color-scheme:dark }

*{box-sizing:border-box}
body{background:var(--bg); color:var(--ink); font-family:var(--f-sans); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:6px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
h1,h2,h3{margin:0; text-wrap:balance}
.serif{font-family:var(--f-serif); font-weight:500; letter-spacing:-0.01em; font-variation-settings:'opsz' 72}
.muted{color:var(--muted)}
.wrap{max-width:1180px; margin:0 auto; padding-inline:28px}


/* controls */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:46px; padding:0 22px; border-radius:10px; border:1px solid transparent; background:var(--btn); color:var(--btn-fg); font-weight:600; font-size:15px; text-decoration:none; transition:background .15s ease}
.btn:hover:not(:disabled){background:var(--btn-hover)}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn-line{background:var(--surface); color:var(--ink); border-color:var(--line)}
.btn-line:hover:not(:disabled){background:var(--surface-2)}
.btn-sm{height:38px; padding:0 14px; font-size:14px; border-radius:8px}
.link{border:none; background:none; padding:0; font-weight:600; color:var(--ink); text-decoration:underline; text-decoration-color:var(--faint); text-underline-offset:3px}
.link:hover{text-decoration-color:var(--ink)}
.tag{display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:6px; font-size:13px; font-weight:500; background:var(--surface-2); color:var(--ink-2); white-space:nowrap}
.co-sc{--c:var(--sc); --c-soft:var(--sc-soft)} .co-lab{--c:var(--lab); --c-soft:var(--lab-soft)} .co-ss{--c:var(--ss); --c-soft:var(--ss-soft)}
.co{display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--ink-2)}
.co i{width:8px; height:8px; border-radius:2px; background:var(--c); display:inline-block; flex-shrink:0}
.kind{font-size:12px; font-weight:700; padding:3px 8px; border-radius:6px; background:var(--c-soft, var(--surface-2)); color:var(--c, var(--ink-2))}
.kind-intern{background:var(--info-bg); color:var(--ink-2)}
.theme{display:flex; gap:2px; padding:2px; border:1px solid var(--line); border-radius:9px; background:var(--surface)}
.theme button{width:32px; height:30px; border:none; border-radius:7px; background:transparent; color:var(--muted); display:grid; place-items:center}
.theme button[aria-pressed="true"]{background:var(--surface-2); color:var(--ink)}

/* ============ PUBLIC ============ */
.top{position:sticky; top:env(safe-area-inset-top, 0px); z-index:20; background:color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.top .wrap{height:66px; display:flex; align-items:center; justify-content:space-between; gap:12px}
.brand{display:flex; align-items:center; gap:12px; border:none; background:none; padding:0; text-align:left; white-space:nowrap}
.mono{width:36px; height:36px; border-radius:9px; background:var(--btn); color:var(--btn-fg); display:grid; place-items:center; font-family:var(--f-serif); font-weight:600; font-size:18px}
.brand b{font-weight:700; font-size:16px; display:block; line-height:1.2}
.brand span span{font-size:13px; color:var(--muted)}
.top-right{display:flex; align-items:center; gap:10px}

.hero{padding-block:64px 40px}
.hero .wrap{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:56px; align-items:end}
.hero h1{font-size:clamp(36px, 4.8vw, 60px); line-height:1.06; max-width:15ch}
.hero p{font-size:18px; color:var(--ink-2); max-width:52ch; margin:18px 0 28px}
.search{display:flex; align-items:center; gap:12px; height:56px; padding:0 18px; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); max-width:560px; color:var(--faint)}
.search input{flex:1; min-width:0; border:none; outline:none; background:transparent; font-size:16px; color:var(--ink)}
.search:focus-within{border-color:var(--focus); box-shadow:0 0 0 3px color-mix(in srgb, var(--focus) 18%, transparent)}
.cos{background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); overflow:hidden}
.cos-h{padding:16px 20px 12px; font-size:14px; color:var(--muted); border-bottom:1px solid var(--line-2)}
.cos-row{width:100%; display:grid; grid-template-columns:4px minmax(0,1fr) auto; gap:16px; align-items:center; padding:16px 20px 16px 0; border:none; border-top:1px solid var(--line-2); background:transparent; text-align:left}
.cos-row:first-of-type{border-top:none}
.cos-row:before{content:''; align-self:stretch; background:transparent; border-radius:0 3px 3px 0}
.cos-row:hover{background:var(--surface-2)}
.cos-row[aria-pressed="true"]{background:var(--c-soft)}
.cos-row[aria-pressed="true"]:before{background:var(--c)}
.cos-name{font-family:var(--f-serif); font-weight:500; font-size:19px; font-variation-settings:'opsz' 30; display:block}
.cos-about{font-size:14px; color:var(--muted)}
.cos-n{text-align:right; font-size:13px; color:var(--muted); white-space:nowrap}
.cos-n b{display:block; font-size:15px; color:var(--ink)}

.kinds{display:flex; gap:28px; border-bottom:1px solid var(--line); margin-bottom:22px; overflow-x:auto}
.kinds button{position:relative; height:52px; border:none; background:none; padding:0; font-weight:600; font-size:16px; color:var(--muted); white-space:nowrap; display:inline-flex; align-items:center; gap:8px}
.kinds button[aria-selected="true"]{color:var(--ink)}
.kinds button[aria-selected="true"]:after{content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--ink)}
.kinds button:disabled{cursor:not-allowed; color:var(--faint)}
.kinds .n{font-size:13px; font-weight:600; background:var(--surface-2); color:var(--ink-2); padding:1px 8px; border-radius:10px; font-variant-numeric:tabular-nums}
.soon{font-size:12px; font-weight:700; padding:2px 8px; border-radius:10px; border:1px dashed var(--line); color:var(--faint)}

.bar{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px}
.count{margin:0; font-size:15px; color:var(--muted)}
.count b{color:var(--ink)}
.sels{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.sel select{height:40px; padding:0 34px 0 14px; border-radius:9px; border:1px solid var(--line); background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23868EA3' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; -webkit-appearance:none; appearance:none; font-size:14px; font-weight:500}

.list{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; padding-bottom:72px}
.role{text-align:left; display:flex; flex-direction:column; gap:10px; padding:22px 24px; border:1px solid var(--line); border-radius:14px; background:var(--surface); transition:border-color .15s ease, box-shadow .15s ease}
.role:hover{border-color:color-mix(in srgb, var(--ink) 30%, var(--line)); box-shadow:var(--shadow)}
.role-top{display:flex; justify-content:space-between; align-items:center; gap:10px}
.role h3{font-family:var(--f-serif); font-weight:500; font-size:22px; line-height:1.2; font-variation-settings:'opsz' 36}
.role-tags{display:flex; flex-wrap:wrap; gap:6px}
.role-foot{display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding-top:12px; margin-top:auto; border-top:1px solid var(--line-2); font-size:14px}
.role-foot b{font-weight:600}
.age{color:var(--faint); font-size:13px; white-space:nowrap}
.empty{grid-column:1/-1; border:1px dashed var(--line); border-radius:14px; padding:36px 28px; display:flex; flex-direction:column; gap:10px; align-items:flex-start; background:var(--surface)}
.empty h3{font-family:var(--f-serif); font-weight:500; font-size:22px}
.foot{border-top:1px solid var(--line); padding-block:24px 32px; font-size:14px; color:var(--muted); background:var(--surface)}
.foot .wrap{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}

/* drawer */
.scrim{position:fixed; inset:0; z-index:50; background:rgba(8,11,20,.45); display:flex; justify-content:flex-end; animation:fade .15s ease}
.drawer{width:min(640px, 100%); height:100%; overflow-y:auto; background:var(--surface); border-left:1px solid var(--line); padding:24px 36px 44px; padding-top:calc(24px + env(safe-area-inset-top, 0px)); display:flex; flex-direction:column; gap:22px; animation:slide .22s cubic-bezier(.2,.8,.2,1)}
@keyframes fade{from{opacity:0}} @keyframes slide{from{transform:translateX(32px); opacity:0}}
.d-top{display:flex; justify-content:space-between; align-items:center; gap:12px}
.x{width:40px; height:40px; border-radius:10px; border:1px solid var(--line); background:var(--surface); display:grid; place-items:center; color:var(--ink-2)}
.x:hover{background:var(--surface-2)}
.d-title{font-family:var(--f-serif); font-weight:500; font-size:clamp(28px, 3.4vw, 38px); line-height:1.1; font-variation-settings:'opsz' 72}
.facts{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); border:1px solid var(--line); border-radius:12px; overflow:hidden; margin:0}
.facts div{padding:12px 16px; border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2)}
.facts dt{font-size:13px; color:var(--muted)}
.facts dd{margin:2px 0 0; font-weight:600}
.facts .wide{grid-column:1/-1; border-right:none; border-bottom:none; background:var(--surface-2)}
.lede{font-size:17px; line-height:1.65; color:var(--ink-2); margin:0; max-width:64ch}
.sec{display:flex; flex-direction:column; gap:10px; padding-top:20px; border-top:1px solid var(--line-2)}
.sec h3{font-family:var(--f-serif); font-weight:500; font-size:20px; font-variation-settings:'opsz' 30}
.ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px}
.ul li{position:relative; padding-left:20px}
.ul li:before{content:''; position:absolute; left:3px; top:10px; width:6px; height:6px; border-radius:50%; background:var(--c, var(--ink))}
.how{margin:0; padding:0; list-style:none; counter-reset:h; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:0; border:1px solid var(--line); border-radius:12px; overflow:hidden}
.how li{counter-increment:h; padding:14px 14px 16px; border-right:1px solid var(--line-2); display:flex; flex-direction:column; gap:2px; font-size:14px}
.how li:last-child{border-right:none}
.how li:before{content:counter(h); font-family:var(--f-serif); font-size:22px; color:var(--faint); line-height:1; margin-bottom:6px}
.how span{color:var(--muted)}
.acts{display:flex; gap:10px; flex-wrap:wrap; align-items:center}

.steps{display:flex; gap:0; margin:0; padding:0; list-style:none; border:1px solid var(--line); border-radius:10px; overflow:hidden}
.steps li{flex:1; padding:9px 12px; font-size:13px; font-weight:600; color:var(--faint); border-right:1px solid var(--line-2); text-align:center}
.steps li:last-child{border-right:none}
.steps li.now{color:var(--ink); background:var(--surface-2)}
.steps li.done{color:var(--ok)}

.form{display:flex; flex-direction:column; gap:16px}
.grid2{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px}
.field{display:flex; flex-direction:column; gap:6px; min-width:0}
.field label,.field .lbl{font-weight:600; font-size:14px}
.field .opt{font-weight:400; color:var(--faint)}
.field input,.field select,.field textarea{min-height:46px; padding:10px 13px; border-radius:10px; border:1px solid var(--line); background:var(--surface); font-size:16px}
.field textarea{resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--focus); box-shadow:0 0 0 3px color-mix(in srgb, var(--focus) 18%, transparent)}
.code-in{font-size:24px !important; letter-spacing:10px; max-width:240px; font-variant-numeric:tabular-nums}
.file{position:relative; padding:16px; border:1px dashed color-mix(in srgb, var(--ink) 25%, var(--line)); border-radius:10px; background:var(--surface-2); display:flex; flex-direction:column; gap:2px}
.file input{position:absolute; inset:0; opacity:0; cursor:pointer}
.file:focus-within{border-color:var(--focus)}
.consent{display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--ink-2)}
.consent input{width:18px; height:18px; margin-top:2px; accent-color:var(--btn); flex-shrink:0}
.note{padding:12px 14px; border-radius:10px; font-size:14px}
.note.err{background:var(--bad-bg); color:var(--bad)}
.note.ok{background:var(--ok-bg); color:var(--ok)}
.note.info{background:var(--info-bg); color:var(--ink-2)}
.hint{font-size:13px; color:var(--faint); margin:0}

.track{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); margin:0; padding:0; list-style:none}
.track li{display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; position:relative}
.track li:not(:last-child):after{content:''; position:absolute; top:15px; left:calc(50% + 19px); right:calc(-50% + 19px); height:2px; background:var(--line)}
.track li.done:not(:last-child):after{background:var(--ok)}
.tdot{width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font-weight:600; font-size:13px; background:var(--surface); border:1.5px solid var(--line); color:var(--faint)}
.track li.done .tdot{background:var(--ok); border-color:var(--ok); color:var(--surface)}
.track li.now .tdot{border-color:var(--ink); color:var(--ink); box-shadow:0 0 0 4px var(--surface-2)}
.tlbl{font-size:13px; font-weight:600; color:var(--faint)}
.track li.done .tlbl,.track li.now .tlbl{color:var(--ink)}
.done-mark{width:52px; height:52px; border-radius:50%; background:var(--ok-bg); color:var(--ok); display:grid; place-items:center}

.mine{padding-block:44px 72px; display:flex; flex-direction:column; gap:18px; max-width:860px}
.app{border:1px solid var(--line); border-radius:14px; background:var(--surface); padding:24px 26px; display:flex; flex-direction:column; gap:18px}
.app-head{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
.app-meta{display:flex; gap:24px; margin:0}
.app-meta dt{font-size:13px; color:var(--muted)}
.app-meta dd{margin:2px 0 0; font-weight:600; font-variant-numeric:tabular-nums}
.status{padding:14px 16px; border-radius:10px; background:var(--surface-2); font-size:15px; display:flex; flex-direction:column; gap:2px; margin:0}
.status.good{background:var(--ok-bg); color:var(--ok)}
.hist{list-style:none; margin:0; padding:0 0 0 18px; border-left:2px solid var(--line); display:flex; flex-direction:column; gap:12px}
.hist li{position:relative; display:flex; flex-direction:column; font-size:15px}
.hist li:before{content:''; position:absolute; left:-24px; top:6px; width:10px; height:10px; border-radius:50%; background:var(--ink); border:2px solid var(--surface)}
.hist span{font-size:13px; color:var(--faint)}

/* ============ DASHBOARD ============ */
.dash{display:grid; grid-template-columns:236px minmax(0,1fr); min-height:100vh}
.side{background:var(--surface); border-right:1px solid var(--line); padding:22px 14px; display:flex; flex-direction:column; gap:24px; position:sticky; top:0; height:100vh}
.side nav{display:flex; flex-direction:column; gap:2px}
.side nav button{display:flex; justify-content:space-between; align-items:center; height:42px; padding:0 12px; border:none; border-radius:8px; background:transparent; font-weight:600; font-size:15px; color:var(--muted); text-align:left}
.side nav button:hover{background:var(--surface-2); color:var(--ink)}
.side nav button[aria-current="page"]{background:var(--surface-2); color:var(--ink)}
.badge{min-width:22px; height:22px; padding:0 7px; border-radius:11px; background:var(--btn); color:var(--btn-fg); font-size:12px; display:grid; place-items:center}
.side-foot{margin-top:auto; display:flex; flex-direction:column; gap:14px; font-size:14px}
.me{display:flex; align-items:center; gap:10px}
.av{width:34px; height:34px; border-radius:50%; background:var(--surface-2); display:grid; place-items:center; font-weight:700; font-size:13px; flex-shrink:0}
.main{padding:30px 36px 56px; display:flex; flex-direction:column; gap:22px; min-width:0}
.mhead{display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap}
.mhead h1{font-family:var(--f-serif); font-weight:500; font-size:32px; font-variation-settings:'opsz' 72}
.mhead p{margin:6px 0 0; color:var(--muted)}
.tiles{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); border:1px solid var(--line); border-radius:14px; background:var(--surface); overflow:hidden}
.tile{padding:18px 20px; border:none; border-right:1px solid var(--line-2); background:transparent; text-align:left; display:flex; flex-direction:column; gap:4px}
.tile:last-child{border-right:none}
button.tile:hover{background:var(--surface-2)}
.tile .l{font-size:14px; color:var(--muted)}
.tile .n{font-family:var(--f-serif); font-size:36px; line-height:1.1; font-variant-numeric:tabular-nums}
.tile .s{font-size:13px; color:var(--faint)}
.tile.attn .s{color:var(--ink); font-weight:600}
.card{border:1px solid var(--line); border-radius:14px; background:var(--surface); padding:20px 22px; display:flex; flex-direction:column; gap:14px; min-width:0}
.card h2{font-family:var(--f-serif); font-weight:500; font-size:20px; font-variation-settings:'opsz' 30}
.two{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px}
.pipe{display:flex; height:12px; border-radius:6px; overflow:hidden; gap:2px}
.pipe span{display:block; height:100%}
.legend{display:flex; flex-wrap:wrap; gap:8px 20px; font-size:14px; color:var(--ink-2)}
.legend span{display:inline-flex; align-items:center; gap:7px}
.legend i{width:10px; height:10px; border-radius:3px; display:inline-block}
.legend b{font-variant-numeric:tabular-nums; color:var(--ink)}
.st-new{background:var(--st-new)} .st-short{background:var(--st-short)} .st-iv{background:var(--st-iv)} .st-offer{background:var(--st-offer)} .st-hired{background:var(--st-hired)}
.rows{display:flex; flex-direction:column}
.row{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 6px; border:none; border-top:1px solid var(--line-2); background:none; text-align:left; width:100%}
.row:first-child{border-top:none}
.row:hover{background:var(--surface-2)}
.row b{display:block; font-weight:600}
.row small{color:var(--muted); font-size:13px}
.when{font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right; font-size:14px}
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:14px; background:var(--surface)}
table{width:100%; border-collapse:collapse; font-size:15px}
th{text-align:left; font-size:13px; color:var(--muted); font-weight:600; padding:12px 16px; border-bottom:1px solid var(--line)}
td{padding:14px 16px; border-top:1px solid var(--line-2); vertical-align:middle}
tbody tr:first-child td{border-top:none}
td.num{font-variant-numeric:tabular-nums; font-weight:600}
.toggle{position:relative; width:42px; height:24px; border-radius:12px; border:none; background:var(--line); padding:0; flex-shrink:0}
.toggle:after{content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--surface); box-shadow:0 1px 2px rgba(0,0,0,.2); transition:left .15s ease}
.toggle[aria-checked="true"]{background:var(--ok)}
.toggle[aria-checked="true"]:after{left:21px}
.tog-row{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink-2)}
.board-wrap{overflow-x:auto; padding-bottom:8px}
.board{display:grid; grid-template-columns:repeat(5, minmax(210px, 1fr)); gap:12px; min-width:1080px}
.col{background:var(--surface-2); border-radius:12px; padding:10px; display:flex; flex-direction:column; gap:8px; min-height:280px}
.col-h{display:flex; justify-content:space-between; align-items:center; padding:4px 6px 6px; font-weight:600; font-size:14px}
.col-h span{display:inline-flex; align-items:center; gap:8px}
.col-h i{width:8px; height:8px; border-radius:2px; display:inline-block}
.cand{text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:12px 13px; display:flex; flex-direction:column; gap:5px}
.cand:hover{border-color:color-mix(in srgb, var(--ink) 30%, var(--line))}
.cand b{font-size:15px; font-weight:600}
.cand small{color:var(--muted); font-size:13px}
.cand .iv{font-size:13px; font-weight:600; color:var(--ink)}
.stars{display:flex; gap:6px}
.stars button{width:38px; height:38px; border-radius:8px; border:1px solid var(--line); background:var(--surface); font-weight:600}
.stars button[aria-pressed="true"]{background:var(--btn); border-color:var(--btn); color:var(--btn-fg)}
.seg{display:flex; gap:6px; flex-wrap:wrap}
.seg button{height:38px; padding:0 14px; border-radius:8px; border:1px solid var(--line); background:var(--surface); font-weight:500; font-size:14px}
.seg button[aria-pressed="true"]{background:var(--btn); border-color:var(--btn); color:var(--btn-fg)}
.seg button:disabled{opacity:.55; cursor:not-allowed}
.toast{position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%); z-index:80; background:var(--btn); color:var(--btn-fg); padding:12px 18px; border-radius:10px; font-weight:600; font-size:14px; box-shadow:var(--shadow); max-width:calc(100% - 32px); animation:fade .2s ease}
.login{min-height:100vh; display:grid; place-items:center; padding:24px 16px}
.login-card{width:100%; max-width:420px; border:1px solid var(--line); border-radius:16px; background:var(--surface); box-shadow:var(--shadow); padding:32px; display:flex; flex-direction:column; gap:16px}
.mtabs{display:none}

@media (max-width: 1000px){
  .hero .wrap{grid-template-columns:1fr; gap:32px}
  .tiles{grid-template-columns:repeat(2, minmax(0,1fr))}
  .tile:nth-child(2){border-right:none}
  .tile:nth-child(-n+2){border-bottom:1px solid var(--line-2)}
  .two{grid-template-columns:1fr}
  .list{grid-template-columns:1fr}
}
@media (max-width: 760px){
  .wrap{padding-inline:16px}
  .brand span span{display:none}
  .hero{padding-block:36px 24px}
  .hero p{font-size:16px}
  .kinds{gap:22px}
  .drawer{padding:16px 16px 32px; padding-top:calc(16px + env(safe-area-inset-top, 0px)); border-left:none}
  .grid2{grid-template-columns:1fr}
  .facts{grid-template-columns:repeat(2, minmax(0,1fr))}
  .how{grid-template-columns:1fr 1fr}
  .how li:nth-child(2){border-right:none}
  .how li:nth-child(-n+2){border-bottom:1px solid var(--line-2)}
  .dash{grid-template-columns:1fr}
  .side{display:none}
  .mtabs{display:flex; gap:6px; align-items:center; overflow-x:auto; padding:10px 16px; background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:env(safe-area-inset-top, 0px); z-index:10}
  .mtabs button{flex-shrink:0; height:38px; padding:0 14px; border-radius:8px; border:1px solid var(--line); background:var(--surface); font-weight:600; font-size:14px}
  .mtabs button[aria-current="page"]{background:var(--btn); color:var(--btn-fg); border-color:var(--btn)}
  .main{padding:22px 16px 48px}
  .mhead h1{font-size:26px}
  .tile .n{font-size:30px}
  .top-right .btn{display:none}
}
@media (prefers-reduced-motion: reduce){ *,*:before,*:after{animation:none !important; transition:none !important} }

/* real-site additions */
html{scroll-behavior:smooth}
body{margin:0; min-height:100vh}
#app{min-height:100vh; display:flex; flex-direction:column}
#app > main, .grow{flex:1}
.boot{min-height:100vh; display:grid; place-items:center; color:var(--muted)}
.modal-bg{position:fixed; inset:0; z-index:70; background:rgba(8,11,20,.5); display:flex; align-items:center; justify-content:center; padding:16px}
.modal{background:var(--surface); border:1px solid var(--line); border-radius:16px; max-width:600px; width:100%; max-height:86vh; overflow-y:auto; padding:28px; display:flex; flex-direction:column; gap:12px; font-size:15px}
.modal h2{font-family:var(--f-serif); font-weight:500; font-size:24px}
.modal ul{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:6px}
.skeleton{background:var(--surface); border:1px solid var(--line); border-radius:14px; min-height:170px; opacity:.6}
.dt-input{max-width:280px}

/* ---------- header nav ---------- */
.top .wrap{gap:20px}
.top-nav{display:flex; gap:2px; margin-left:auto}
.top-nav button{height:38px; padding:0 14px; border:none; border-radius:9px; background:transparent; color:var(--muted); font-weight:600; font-size:14px; white-space:nowrap}
.top-nav button:hover{color:var(--ink)}
.top-nav button[aria-current="page"]{background:var(--surface-2); color:var(--ink)}
.top-right{flex-shrink:0}
.cos-h{display:flex; justify-content:space-between; align-items:center; gap:10px}
.cos-h .link{font-size:13px}

/* ---------- our companies ---------- */
.cos-page{padding-block:48px 72px; display:flex; flex-direction:column; gap:28px}
.cos-intro h1{font-size:clamp(32px, 4.6vw, 54px); line-height:1.05}
.cos-intro p{font-size:18px; max-width:56ch; margin:14px 0 0}
.slides{min-width:0; max-width:100%; display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; padding:8px 4px 20px; scrollbar-width:none; outline:none}
.slides::-webkit-scrollbar{display:none}
.slides:focus-visible{outline:2px solid var(--focus); outline-offset:4px; border-radius:16px}
.slide{flex:0 0 min(1000px, 92%); scroll-snap-align:center; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:36px; align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:28px; box-shadow:var(--shadow)}
.shot{display:block; min-width:0; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:var(--surface-2); transform:rotate(-1.5deg); transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; box-shadow:0 18px 40px -18px color-mix(in srgb, var(--c) 55%, transparent)}
.slide:nth-child(even) .shot{transform:rotate(1.5deg)}
.shot:hover,.shot:focus-visible{transform:rotate(0) scale(1.02)}
.shot-bar{display:flex; align-items:center; gap:6px; height:30px; padding:0 12px; background:var(--surface-2); border-bottom:1px solid var(--line); font-size:12px; color:var(--muted)}
.shot-bar i{width:9px; height:9px; border-radius:50%; background:var(--line)}
.shot-bar i:first-child{background:var(--c)}
.shot-bar span{margin-left:10px; padding:2px 10px; border-radius:6px; background:var(--surface); font-family:var(--f-sans)}
.shot img{display:block; width:100%; height:auto; aspect-ratio:8/5; object-fit:cover; object-position:top}
.slide-txt{display:flex; flex-direction:column; gap:10px}
.slide-txt h2{font-size:clamp(26px, 3vw, 34px); line-height:1.1}
.slide-line{margin:0; font-size:20px; font-weight:600; color:var(--c)}
.slide-txt .muted{margin:0; font-size:16px; max-width:42ch}
.slide-txt .acts{margin-top:8px}
.slide-nav{display:flex; justify-content:center; align-items:center; gap:16px}
.dots{display:flex; gap:8px}
.dot{width:10px; height:10px; padding:0; border-radius:5px; border:none; background:var(--line); transition:width .25s ease, background .25s ease}
.dot[aria-selected="true"]{width:30px; background:var(--c)}
@media (max-width: 1000px){
  .top-nav{order:3; width:100%; margin:0; overflow-x:auto}
  .top .wrap{flex-wrap:wrap; height:auto; padding-block:10px}
}
@media (max-width: 760px){
  .slide{grid-template-columns:minmax(0,1fr); gap:22px; padding:18px; flex-basis:88%}
  .top-nav button{padding:0 10px; font-size:13px}
  .shot,.slide:nth-child(even) .shot{transform:none}
  .slide-line{font-size:18px}
  .cos-page{padding-block:32px 56px}
}
@media (prefers-reduced-motion: reduce){ .shot,.dot{transition:none} .shot,.slide:nth-child(even) .shot{transform:none} }

/* Single role page (job.php), the page Google reads */
.job-page{max-width:760px;padding-top:32px;padding-bottom:56px}
.job-page article{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.job-page .facts{width:100%}
.job-page .acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.job-page .sec{width:100%}

/* ---------- October 2026: livelier careers page ---------- */
.stats{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; margin-top:22px}
.stats div{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:12px 14px; display:flex; flex-direction:column; animation:pop-in .5s ease both}
.stats div:nth-child(2){animation-delay:.08s} .stats div:nth-child(3){animation-delay:.16s} .stats div:nth-child(4){animation-delay:.24s}
.stats b{font-size:24px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.1}
.stats span{font-size:13px; color:var(--muted)}
.quick{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.quick button{border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:8px 14px; font-weight:600; font-size:14px; color:var(--ink-2); transition:transform .15s ease, background .15s ease, border-color .15s ease}
.quick button:hover{transform:translateY(-2px); border-color:var(--ink-2)}
.quick button[aria-pressed="true"]{background:var(--ink); color:var(--surface); border-color:var(--ink)}
.role{animation:rise .45s ease both; animation-delay:calc(var(--i, 0) * 45ms); position:relative; overflow:hidden}
.role:before{content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--c, var(--line)); transform:scaleY(0); transform-origin:top; transition:transform .25s ease}
.role:hover:before, .role:focus-visible:before{transform:scaleY(1)}
.role:hover{transform:translateY(-3px)}
.role{transition:border-color .15s ease, box-shadow .15s ease, transform .2s ease}
.role-badges{display:inline-flex; gap:6px; align-items:center}
.new-badge{font-size:12px; font-weight:700; color:#fff; background:#E3262B; padding:2px 8px; border-radius:999px; letter-spacing:.02em; animation:pulse-badge 2.4s ease-in-out infinite}
.role-go{display:inline-block; margin-left:8px; font-weight:600; color:var(--c, var(--ink)); opacity:0; transform:translateX(-6px); transition:opacity .2s ease, transform .2s ease}
.role:hover .role-go, .role:focus-visible .role-go{opacity:1; transform:none}
.perks{margin:56px 0 24px}
.perks h2{font-size:clamp(26px, 3vw, 34px); margin-bottom:18px}
.perks-grid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px}
.perk{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px; display:flex; flex-direction:column; gap:6px; transition:transform .2s ease, box-shadow .2s ease}
.perk:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.perk-ic{font-size:26px}
.perk span:last-child{color:var(--muted); font-size:14px}
.perks-cta{margin-top:16px}
@keyframes rise{from{opacity:0; transform:translateY(12px)}}
@keyframes pop-in{from{opacity:0; transform:scale(.92)}}
@keyframes pulse-badge{0%,100%{box-shadow:0 0 0 0 rgba(227,38,43,.45)} 50%{box-shadow:0 0 0 6px rgba(227,38,43,0)}}
@media (max-width:860px){ .perks-grid{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:560px){ .stats{grid-template-columns:repeat(2, minmax(0,1fr))} .role-go{display:none} }
@media (prefers-reduced-motion:reduce){ .role, .stats div, .new-badge{animation:none} .role:hover, .perk:hover, .quick button:hover{transform:none} }