/* SEM Talent — shared stylesheet
   Layout: engineering datasheet discipline applied to a recruitment site.
   Ruled bands, a monospace spec voice for labels. Palette taken from the logo: navy #051C38,
   gold #FDBE05, slate #566881. Gold is too light for text on white, so --copper carries a
   deepened gold in light mode and the true gold in dark, where it has the contrast for it. */

:root{
  --paper:#F5F7FA; --surface:#FFFFFF; --sunk:#EDF1F6; --deep:#051C38;
  --ink:#0A1E33; --ink-2:#566881; --ink-3:#7D8DA3; --on-deep:#E9EEF5; --on-deep-2:#9FB2C9;
  --line:#DCE2EA; --line-2:#C4CEDA; --line-deep:#1A3454;
  --copper:#8A6A05; --copper-soft:#FCF3DC; --gold-display:#B8860B;
  --signal:#14498A; --signal-soft:#E7EEF8;
  --font-display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --font-body:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --measure:64ch; --radius:3px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#081425; --surface:#0E1F36; --sunk:#0B1A2E; --deep:#03101F;
  --ink:#E9EEF5; --ink-2:#9FB2C9; --ink-3:#7489A3; --on-deep:#E9EEF5; --on-deep-2:#93A8C2;
  --line:#1C3049; --line-2:#28405C; --line-deep:#132742;
  --copper:#FDBE05; --copper-soft:#2A2008; --gold-display:#FDBE05;
  --signal:#7FB0E8; --signal-soft:#122A47;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --paper:#081425; --surface:#0E1F36; --sunk:#0B1A2E; --deep:#03101F;
  --ink:#E9EEF5; --ink-2:#9FB2C9; --ink-3:#7489A3; --on-deep:#E9EEF5; --on-deep-2:#93A8C2;
  --line:#1C3049; --line-2:#28405C; --line-deep:#132742;
  --copper:#FDBE05; --copper-soft:#2A2008; --gold-display:#FDBE05;
  --signal:#7FB0E8; --signal-soft:#122A47;
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;line-height:1.12;
  text-wrap:balance;margin:0}
p{margin:0}
img{max-width:100%}
a{color:var(--signal)}
a:focus-visible,button:focus-visible{outline:2px solid var(--copper);outline-offset:3px;border-radius:2px}
.wrap{width:100%;max-width:1120px;margin:0 auto;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.band{border-bottom:1px solid var(--line)}
.band>.wrap{padding-block:clamp(44px,6.5vw,80px)}
.band.tight>.wrap{padding-block:clamp(30px,4vw,48px)}
.band.sunk{background:var(--sunk)}
.band.surface{background:var(--surface)}
.band.deep{background:var(--deep);border-bottom-color:var(--line-deep);color:var(--on-deep)}
.band.deep h1,.band.deep h2,.band.deep h3{color:var(--on-deep)}
.band.deep p,.band.deep li{color:var(--on-deep-2)}
.band.deep .spec{color:var(--on-deep-2)}

.spec{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.sub{color:var(--ink-2);max-width:var(--measure);margin-top:14px}
.rule{height:1px;background:var(--line);margin:26px 0}

/* ---------- utility bar + header ---------- */
.utility{background:var(--deep);color:var(--on-deep-2);font-size:13px}
.utility>.wrap{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding-block:7px}
.utility a{color:var(--on-deep-2);text-decoration:none}
.utility a:hover{color:var(--on-deep)}
.utility .sep{margin-left:auto;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em}

header{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:var(--surface);
  border-bottom:1px solid var(--line)}
header>.wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding-block:13px}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto;text-decoration:none;color:inherit;min-width:0}
/* Two marks, one per theme. The artwork is navy on white: knocked out it vanishes on a dark
   header, and left on its white background it shows as a rectangle. So dark mode gets the
   reversed mark (navy lifted to white, gold kept) and both sit directly on the header with no
   plate behind them. Selectors mirror the theme pattern the rest of this file uses. */
.brand .mark{height:62px;width:auto;flex:0 0 auto;display:block}
.brand .mark.dark{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand .mark.light{display:none}
  :root:not([data-theme="light"]) .brand .mark.dark{display:block}}
:root[data-theme="dark"] .brand .mark.light{display:none}
:root[data-theme="dark"] .brand .mark.dark{display:block}
.brand span{font-family:var(--font-mono);font-size:10px;letter-spacing:.13em;color:var(--ink-3);text-transform:uppercase}
nav.main{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
nav.main a{font-size:14.5px;color:var(--ink-2);text-decoration:none;padding-block:2px;
  border-bottom:2px solid transparent}
nav.main a:hover{color:var(--ink)}
nav.main a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--copper);font-weight:500}

.btn{display:inline-block;background:var(--ink);color:var(--paper);font-size:14.5px;font-weight:500;
  padding:10px 18px;border-radius:var(--radius);text-decoration:none;border:1px solid var(--ink);cursor:pointer;
  font-family:var(--font-body)}
.btn:hover{background:transparent;color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{border-color:var(--ink)}
.btn.on-deep{background:var(--on-deep);color:var(--deep);border-color:var(--on-deep)}
.btn.on-deep:hover{background:transparent;color:var(--on-deep)}
.btn.ghost-deep{background:transparent;color:var(--on-deep);border-color:var(--line-deep)}
.btn.ghost-deep:hover{border-color:var(--on-deep)}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* ---------- hero ---------- */
.hero>.wrap{padding-block:clamp(48px,8vw,96px);display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(28px,5vw,60px);align-items:start}
.hero h1{font-size:clamp(33px,5.2vw,56px)}
.hero h1 em{font-style:normal;color:var(--gold-display)}
.lede{font-size:clamp(17px,1.9vw,20px);color:var(--ink-2);max-width:var(--measure);margin-top:20px}
.band.deep .lede{color:var(--on-deep-2)}

/* spec sheet block */
.specsheet{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  overflow:hidden;min-width:0}
.band.deep .specsheet{border-color:var(--line-deep);background:transparent}
.specsheet .row{display:flex;gap:14px;padding:11px 16px;border-bottom:1px solid var(--line);font-size:14px}
.band.deep .specsheet .row{border-bottom-color:var(--line-deep)}
.specsheet .row:last-child{border-bottom:0}
.specsheet dt{flex:0 0 92px;margin:0;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);padding-top:3px}
.specsheet dd{margin:0;min-width:0;color:var(--ink)}
.band.deep .specsheet dd{color:var(--on-deep)}

/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.chip{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;padding:5px 12px;
  border:1px solid var(--line-2);border-radius:20px;color:var(--ink-2);text-decoration:none}
.chip:hover{border-color:var(--copper);color:var(--copper)}
.band.deep .chip{border-color:var(--line-deep);color:var(--on-deep-2)}
.band.deep .chip:hover{border-color:var(--copper);color:var(--copper)}

/* ---------- section heads ---------- */
.sechead{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.sechead h2{font-size:clamp(24px,3.2vw,34px)}
h3.sub-h{font-size:19px;margin-bottom:8px}

/* ---------- audience split ---------- */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin-top:34px}
.panel{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  padding:clamp(20px,2.6vw,30px);display:flex;flex-direction:column;min-width:0}
.panel .spec{display:block;margin-bottom:12px}
.panel h3{font-size:clamp(20px,2.4vw,25px)}
.panel p{color:var(--ink-2);margin-top:12px;font-size:15.5px}
.panel ul{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:9px}
.panel li{font-size:14.5px;color:var(--ink-2);padding-left:17px;position:relative;min-width:0}
.panel li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;
  background:var(--signal);border-radius:1px}
.panel .cta{margin-top:auto;padding-top:24px}

/* ---------- discipline table ---------- */
.tablewrap{overflow-x:auto;margin-top:30px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface)}
table{width:100%;border-collapse:collapse;min-width:560px}
th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
th{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);font-weight:500;background:var(--sunk)}
td.ref{font-family:var(--font-mono);font-size:12px;color:var(--copper);width:54px;
  font-variant-numeric:tabular-nums}
td.disc{font-weight:600;width:220px}
td.roles{color:var(--ink-2);font-size:15px}

/* ---------- cards grid ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:16px;margin-top:32px}
.card{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  padding:22px;min-width:0}
.card .spec{display:block;margin-bottom:10px}
.card h3{font-size:17px}
.card p{color:var(--ink-2);font-size:14.5px;margin-top:10px}
.card ul{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px}
.card li{font-size:14px;color:var(--ink-2);padding-left:16px;position:relative;min-width:0}
.card li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;
  background:var(--copper);border-radius:1px}

/* ---------- numbered steps (a real sequence) ---------- */
.steps{counter-reset:s;display:grid;gap:0;margin-top:32px;border-top:1px solid var(--line)}
.step{counter-increment:s;display:grid;grid-template-columns:54px minmax(0,232px) minmax(0,1fr);gap:20px;
  padding:19px 0;border-bottom:1px solid var(--line);align-items:baseline}
.step::before{content:counter(s,decimal-leading-zero);font-family:var(--font-mono);font-size:12px;
  color:var(--copper);font-variant-numeric:tabular-nums}
.step h3{font-size:17px}
.step p{color:var(--ink-2);font-size:15px;min-width:0}

/* ---------- question list ---------- */
.asks{list-style:none;padding:0;margin:24px 0 0;display:grid;border-top:1px solid var(--line)}
.asks li{padding:13px 0;border-bottom:1px solid var(--line);display:flex;gap:14px;align-items:baseline;min-width:0}
.asks li code{font-family:var(--font-mono);font-size:11px;color:var(--signal);background:var(--signal-soft);
  padding:2px 7px;border-radius:2px;flex:0 0 auto;letter-spacing:.04em}
.asks li span{color:var(--ink-2);font-size:15px;min-width:0}
.quote{border-left:2px solid var(--copper);padding-left:20px;font-size:clamp(18px,2.2vw,22px);
  font-family:var(--font-display);font-weight:600;letter-spacing:-.015em;line-height:1.35}

/* ---------- two column ---------- */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,56px);align-items:start}

/* ---------- contact fields ---------- */
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:14px;margin-top:28px}
.field{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;min-width:0}
.band.deep .field{background:transparent;border-color:var(--line-deep)}
.field .spec{display:block;margin-bottom:8px}
.field .val{font-family:var(--font-mono);font-size:14.5px;word-break:break-all;color:var(--ink);display:block}
.band.deep .field .val{color:var(--on-deep)}
.copy{margin-top:12px;font-family:var(--font-body);font-size:12.5px;background:transparent;color:var(--ink-2);
  border:1px solid var(--line-2);border-radius:2px;padding:5px 11px;cursor:pointer}
.copy:hover{color:var(--ink);border-color:var(--ink)}
.copy[data-done="1"]{color:var(--signal);border-color:var(--signal)}
.band.deep .copy{color:var(--on-deep-2);border-color:var(--line-deep)}
.band.deep .copy:hover{color:var(--on-deep);border-color:var(--on-deep)}

/* ---------- brief form ---------- */
form.brief{margin-top:28px;display:grid;gap:16px;max-width:720px}
.frow{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.fgroup{display:flex;flex-direction:column;gap:6px;min-width:0}
.fgroup label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3)}
.fgroup input,.fgroup select,.fgroup textarea{background:var(--surface);color:var(--ink);
  border:1px solid var(--line-2);border-radius:var(--radius);padding:10px 12px;font:inherit;font-size:15px;
  width:100%;min-width:0}
.fgroup textarea{min-height:130px;resize:vertical}
.formnote{font-size:13.5px;color:var(--ink-3);max-width:var(--measure)}
.sent{display:none;border:1px solid var(--signal);background:var(--signal-soft);color:var(--ink);
  border-radius:var(--radius);padding:16px;font-size:15px}
.sent[data-on="1"]{display:block}

/* ---------- footer ---------- */
footer{background:var(--deep);color:var(--on-deep-2)}
footer>.wrap{padding-block:44px}
.fcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:28px}
footer h4{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-deep-2);font-weight:500;margin-bottom:12px}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
footer a{color:var(--on-deep);text-decoration:none;font-size:14.5px}
footer a:hover{color:var(--copper)}
footer .legal{margin-top:36px;padding-top:22px;border-top:1px solid var(--line-deep);
  display:grid;gap:10px;font-size:13px;color:var(--on-deep-2)}
footer .legal p{max-width:78ch;color:var(--on-deep-2)}

@media (max-width:880px){
  .brand .mark{height:48px}
  .brand span{display:none}
  .hero>.wrap,.two{grid-template-columns:1fr}
  .step{grid-template-columns:34px 1fr;gap:12px}
  .step p{grid-column:2}
  nav.main{gap:14px}
  nav.main a{font-size:14px}
}
@media (prefers-reduced-motion:no-preference){
  .btn,nav.main a,.copy,.chip,footer a{transition:color .15s ease,background .15s ease,border-color .15s ease}
}

/* ---------- jobs ---------- */
.cards.jobs{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.card.job h3{font-size:19px;margin-top:2px}
.card.job h3 a{color:var(--ink);text-decoration:none}
.card.job h3 a:hover{color:var(--copper)}
.card.job .chips{margin-top:16px}
.card.job .chip{font-size:10.5px;padding:3px 9px;cursor:default}
.card.job .chip:hover{border-color:var(--line-2);color:var(--ink-2)}
.card.job .cta{margin-top:18px}
.jobmeta{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px;margin:14px 0 0;
  padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.jobmeta div{min-width:0}
.jobmeta dt{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 3px}
.jobmeta dd{margin:0;font-size:14px;font-weight:600;color:var(--ink)}

/* ---------- form states ---------- */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.mutelabel{color:var(--ink-3);letter-spacing:0;text-transform:none;font-family:var(--font-body);font-size:12px}
.fgroup input[type=file]{padding:9px 12px;font-size:14px;cursor:pointer}
.fgroup input[type=file]::file-selector-button{font:inherit;font-size:13px;margin-right:12px;cursor:pointer;
  background:var(--sunk);color:var(--ink);border:1px solid var(--line-2);border-radius:2px;padding:5px 11px}
.filenote{font-family:var(--font-mono);font-size:12px;color:var(--signal);margin-top:2px}
.formerror{display:none;border-left:2px solid var(--copper);background:var(--copper-soft);color:var(--ink);
  padding:11px 14px;font-size:14.5px;border-radius:2px}
.formerror[data-on="1"]{display:block}
button[type=submit]:disabled{opacity:.6;cursor:default}