/* Automation Republic — Careers
   Design system extracted from the AR landing page:
   "technical paper" light theme, charcoal ink + signal orange. */

:root{
  --bg:#f6f5f1;
  --ink:#16171b;
  --ink-2:#62636a;
  --rule:#dedcd4;
  --rule-2:#cbc9c0;
  --surface:#efede7;
  --surface-2:#e8e5dd;
  --signal:#ff5a1f;
  --signal-soft:rgba(255,90,31,.12);
  --hazard:#d99a06;
  --safe:#2e9e57;
  --display:"Big Shoulders Display","Arial Narrow",sans-serif;
  --body:"Instrument Sans",ui-sans-serif,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background-image:
    linear-gradient(var(--rule) 1px,transparent 1px),
    linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  background-size:48px 48px;
  background-position:center;
  background-blend-mode:normal;
}
body::before{content:"";position:fixed;inset:0;background:var(--bg);opacity:.86;z-index:-1}

a{color:inherit;text-decoration:none}
::selection{background:var(--signal);color:var(--bg)}
img{max-width:100%}

.wrap{max-width:1100px;margin:0 auto;padding:0 28px}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.signal{color:var(--signal)}
.rule{height:1px;background:var(--rule);width:100%}

/* ---- top bar -------------------------------------------------------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(246,245,241,.86);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule);
}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:14px;font-family:var(--display);font-weight:800;font-size:21px;letter-spacing:.01em}
.brand img{height:30px;width:auto;display:block}
.brand small{font-family:var(--mono);font-size:10px;font-weight:400;color:var(--ink-2);letter-spacing:.14em;text-transform:uppercase;padding-left:12px;border-left:1px solid var(--rule)}
nav.primary{display:flex;gap:22px}
nav.primary a{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);transition:color .2s}
nav.primary a:hover{color:var(--ink)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--safe);box-shadow:0 0 8px var(--safe);display:inline-block;margin-right:7px;animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---- buttons -------------------------------------------------------- */
.cta{
  display:inline-block;padding:11px 20px;border:1px solid var(--ink);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  transition:background .2s,color .2s,border-color .2s;cursor:pointer;background:none;
}
.cta:hover{background:var(--ink);color:var(--bg)}
.cta.sig{background:var(--signal);border-color:var(--signal);color:#fff}
.cta.sig:hover{background:var(--ink);border-color:var(--ink)}
.cta.ghost{border-color:var(--rule-2);color:var(--ink-2)}
.cta.ghost:hover{border-color:var(--ink);color:var(--ink);background:none}

/* ---- hero ----------------------------------------------------------- */
.hero{padding:84px 0 64px;position:relative;overflow:hidden}
.hero .label{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);margin-bottom:22px}
.hero h1{
  font-family:var(--display);font-weight:900;
  font-size:clamp(52px,9vw,116px);line-height:.9;letter-spacing:-.02em;margin:0 0 24px;
}
.hero h1 em{font-style:normal;color:var(--signal)}
.hero p.lead{font-size:clamp(17px,2vw,21px);max-width:60ch;color:var(--ink-2);margin:0 0 34px}
.hero .actions{display:flex;gap:14px;flex-wrap:wrap}
.hero .glow{position:absolute;inset:0;background:radial-gradient(ellipse at 78% 25%,rgba(255,90,31,.10) 0%,transparent 55%);pointer-events:none}
.hero-aim{font-family:var(--display);font-weight:900;font-size:clamp(38px,6.6vw,90px);line-height:.9;letter-spacing:-.02em;text-align:right;margin:46px 0 0;color:var(--ink)}
.hero-aim em{font-style:normal;color:var(--signal)}
@media(max-width:760px){.hero-aim{text-align:left;margin-top:34px}}

/* ---- stats strip ---------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.stats div{padding:26px 22px;border-right:1px solid var(--rule)}
.stats div:last-child{border-right:none}
.stats .n{font-family:var(--display);font-weight:800;font-size:40px;line-height:1;color:var(--ink)}
.stats .k{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-top:10px}

/* ---- sections ------------------------------------------------------- */
section{border-top:1px solid var(--rule);padding:64px 0}
.section-head{margin-bottom:40px}
.section-head .label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.section-head h2{font-family:var(--display);font-weight:800;font-size:clamp(34px,5vw,64px);line-height:.95;letter-spacing:-.01em;margin:12px 0 0;max-width:18ch}
.section-head h2 em{font-style:normal;color:var(--signal)}

/* ---- value cards ---------------------------------------------------- */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule)}
.values .card{background:var(--bg);padding:28px 24px}
.values .card .ix{font-family:var(--mono);font-size:11px;color:var(--signal);letter-spacing:.1em}
.values .card h3{font-family:var(--display);font-weight:700;font-size:23px;margin:14px 0 8px}
.values .card p{color:var(--ink-2);font-size:15px;margin:0}

/* ---- role groups ---------------------------------------------------- */
.group-label{display:flex;align-items:baseline;gap:14px;margin:14px 0 18px}
.group-label h3{font-family:var(--display);font-weight:800;font-size:30px;margin:0;letter-spacing:-.01em}
.group-label .count{font-family:var(--mono);font-size:11px;color:var(--ink-2);letter-spacing:.1em}

.role{
  display:grid;grid-template-columns:1fr auto;gap:18px;align-items:start;
  background:var(--bg);border:1px solid var(--rule);padding:24px 26px;margin-bottom:-1px;
  transition:border-color .2s,background .2s;position:relative;
}
.role:hover{border-color:var(--signal);background:#fff}
.role .meta{display:flex;flex-wrap:wrap;gap:10px 18px;margin:0 0 10px}
.role .meta span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.role .meta .sen{color:var(--signal)}
.role h4{font-family:var(--display);font-weight:700;font-size:25px;margin:0 0 8px;letter-spacing:-.01em}
.role p{margin:0 0 12px;color:var(--ink-2);font-size:15px;max-width:64ch}
.role .req{font-size:13px;color:var(--ink-2)}
.role .req b{color:var(--ink);font-weight:600}
.role .apply-col{display:flex;flex-direction:column;gap:10px;align-items:flex-end;white-space:nowrap}

/* ---- forms ---------------------------------------------------------- */
.formwrap{max-width:760px;margin:0 auto}
.field{margin-bottom:20px}
.field label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-bottom:8px}
.field label .req-star{color:var(--signal)}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;background:#fff;border:1px solid var(--rule-2);
  font-family:var(--body);font-size:15px;color:var(--ink);border-radius:0;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--signal);box-shadow:0 0 0 3px var(--signal-soft)}
.field textarea{resize:vertical;min-height:110px}
.field .hint{font-size:12px;color:var(--ink-2);margin-top:6px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.filebox{border:1px dashed var(--rule-2);padding:16px;background:var(--surface)}

.flash{padding:12px 16px;margin-bottom:20px;font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase}
.flash.error{background:var(--signal-soft);border-left:3px solid var(--signal);color:#a23200}
.flash.ok{background:rgba(46,158,87,.12);border-left:3px solid var(--safe);color:#1d6e3c}

/* ====================================================================== */
/* LIVE LINE — animated line-art machines                                 */
/* ====================================================================== */
.line-band{border-top:1px solid var(--rule);background:
  linear-gradient(var(--rule) 1px,transparent 1px),
  linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  background-size:32px 32px;background-color:var(--surface)}
.line-band .wrap{padding-top:30px;padding-bottom:42px}
.line-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.line-head .label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.line-head .label .dot{background:var(--signal);box-shadow:0 0 8px var(--signal)}
.line-head h2{font-family:var(--display);font-weight:800;font-size:clamp(26px,4vw,44px);margin:0;letter-spacing:-.01em}
.line-head h2 em{font-style:normal;color:var(--signal)}

.machines{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media(max-width:1100px){.machines{grid-template-columns:repeat(2,1fr)}}
.machine{background:var(--bg);padding:18px 18px 16px;position:relative;display:flex;flex-direction:column}
.machine svg{display:block;width:100%;height:122px}            /* fixed height → even tiles */
.machine .cap{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:12px}
.machine .cap b{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.01em}
.machine .cap .st{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--signal)}
.machine .cap .st::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--signal);margin-right:6px;vertical-align:middle;animation:pulse 1.6s infinite}
@media(max-width:820px){.machines{grid-template-columns:1fr}}

/* shared SVG strokes */
.mc-l{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mc-thin{fill:none;stroke:var(--ink-2);stroke-width:1.4;stroke-linecap:round}
.mc-f{fill:var(--ink)}
.mc-bg{fill:var(--surface-2)}
.mc-a{stroke:var(--signal)}
.mc-af{fill:var(--signal)}
.joint{transform-box:fill-box}

/* ---- injection molding cycle (loop 5s) ---- */
.imm-move{animation:immClamp 5s ease-in-out infinite}
@keyframes immClamp{0%,12%{transform:translateX(0)}24%,68%{transform:translateX(28px)}82%,100%{transform:translateX(0)}}
.imm-shot{transform-box:fill-box;transform-origin:right center;opacity:0}
.imm-shot{animation:immShot 5s ease-in-out infinite}
@keyframes immShot{0%,26%{opacity:0;transform:scaleX(.05)}32%{opacity:1}40%{opacity:1;transform:scaleX(1)}48%,100%{opacity:0;transform:scaleX(1)}}
.imm-glow{opacity:0;animation:immGlow 5s ease-in-out infinite}
@keyframes immGlow{0%,30%{opacity:0}38%,60%{opacity:.9}70%,100%{opacity:0}}
.imm-part{opacity:0;animation:immPart 5s ease-in-out infinite}
@keyframes immPart{0%,80%{opacity:0;transform:translateY(0)}82%{opacity:1}92%{opacity:1;transform:translateY(26px)}96%,100%{opacity:0;transform:translateY(26px)}}

/* ---- wire bender (loop 4.2s): rollers spin, wire end rotates up at the die ---- */
.wb-roll{transform-box:view-box;animation:spin 1.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.wb-feed{stroke-dasharray:7 7;animation:wbFeed 1.1s linear infinite}   /* moving stock */
@keyframes wbFeed{to{stroke-dashoffset:-28}}
.wb-wire{stroke-dasharray:180;stroke-dashoffset:180;animation:wbForm 4.5s ease-in-out infinite}
@keyframes wbForm{0%,8%{stroke-dashoffset:180}46%{stroke-dashoffset:0}74%{stroke-dashoffset:0}90%,100%{stroke-dashoffset:180}}
.wb-head{transform-box:view-box;animation:wbHead 4.5s ease-in-out infinite}
@keyframes wbHead{0%,10%{transform:rotate(0deg)}30%{transform:rotate(-42deg)}48%{transform:rotate(0deg)}66%{transform:rotate(-42deg)}82%,100%{transform:rotate(0deg)}}

/* ---- pick & place robot (loop 4.8s) ---- */
/* 3-link arm. Rest pose = PICK (left); PLACE adds θ1=144°, θ2=116°, θ3=40°. */
.mc-arm{fill:none;stroke:var(--ink);stroke-width:9;stroke-linecap:round}
/* PICK(0,0,0) → LIFT(108,20,-116) → PLACE(144,116,40); both transits go via the lift so the arm folds up, never whips straight. */
.rb-upper{transform-box:view-box;transform-origin:130px 82px;animation:rbUpper 5s ease-in-out infinite}
@keyframes rbUpper{0%,12%{transform:rotate(0deg)}32%{transform:rotate(108deg)}52%,66%{transform:rotate(144deg)}86%{transform:rotate(108deg)}100%{transform:rotate(0deg)}}
.rb-fore{transform-box:view-box;transform-origin:98px 70px;animation:rbFore 5s ease-in-out infinite}
@keyframes rbFore{0%,12%{transform:rotate(0deg)}32%{transform:rotate(20deg)}52%,66%{transform:rotate(116deg)}86%{transform:rotate(20deg)}100%{transform:rotate(0deg)}}
.rb-wrist{transform-box:view-box;transform-origin:74px 92px;animation:rbWrist 5s ease-in-out infinite}
@keyframes rbWrist{0%,12%{transform:rotate(0deg)}32%{transform:rotate(-116deg)}52%,66%{transform:rotate(40deg)}86%{transform:rotate(-116deg)}100%{transform:rotate(0deg)}}
.rb-hold{opacity:0;animation:rbHold 5s ease-in-out infinite}        /* part carried gripper, pick→lift→place */
@keyframes rbHold{0%,12%{opacity:0}16%,56%{opacity:1}60%,100%{opacity:0}}
.rb-src{opacity:1;animation:rbSrc 5s ease-in-out infinite}          /* part waiting on LEFT infeed */
@keyframes rbSrc{0%,10%{opacity:1}14%,100%{opacity:0}}
.rb-dst{opacity:0;animation:rbDst 5s ease-in-out infinite}          /* part placed on RIGHT outfeed */
@keyframes rbDst{0%,58%{opacity:0}62%,100%{opacity:1}}

/* ---- 3-axis gantry pick & place (loop 5s) ---- */
.ga-x{animation:gaX 5s ease-in-out infinite}
@keyframes gaX{0%,30%{transform:translateX(0)}50%{transform:translateX(116px)}74%{transform:translateX(116px)}95%,100%{transform:translateX(0)}}
.ga-z{animation:gaZ 5s ease-in-out infinite}
@keyframes gaZ{0%,6%{transform:translateY(0)}16%,24%{transform:translateY(40px)}32%,50%{transform:translateY(0)}60%,66%{transform:translateY(40px)}74%,100%{transform:translateY(0)}}
.ga-src{animation:gaSrc 5s ease-in-out infinite}
@keyframes gaSrc{0%,18%{opacity:1}22%,100%{opacity:0}}
.ga-hold{opacity:0;animation:gaHold 5s ease-in-out infinite}
@keyframes gaHold{0%,20%{opacity:0}24%,60%{opacity:1}64%,100%{opacity:0}}
.ga-dst{opacity:0;animation:gaDst 5s ease-in-out infinite}
@keyframes gaDst{0%,64%{opacity:0}68%,100%{opacity:1}}

/* ---- bulldozer / heavy machinery ---- */
.dz-wheel{transform-box:view-box;animation:spin 1.4s linear infinite}
.dz-belt{stroke-dasharray:7 6;animation:dzBelt .9s linear infinite}
@keyframes dzBelt{to{stroke-dashoffset:-26}}
.dz-blade{animation:dzBlade 3.6s ease-in-out infinite}
@keyframes dzBlade{0%,100%{transform:translateY(0)}34%{transform:translateY(-9px)}66%{transform:translateY(3px)}}
.dz-body{animation:dzBob 0.5s ease-in-out infinite}
@keyframes dzBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-0.8px)}}
.dz-smoke{transform-box:fill-box;transform-origin:center;animation:dzSmoke 2.2s ease-out infinite}
@keyframes dzSmoke{0%{opacity:.55;transform:translateY(0) scale(.5)}100%{opacity:0;transform:translateY(-16px) scale(1.2)}}

/* ---- conveyor / sortation ---- */
.cv-roll{transform-box:view-box;animation:spin 1.5s linear infinite}
.cv-belt{stroke-dasharray:8 7;animation:dzBelt 1s linear infinite}
.cv-box{animation:cvBox 3s linear infinite}
@keyframes cvBox{0%{transform:translateX(0);opacity:0}7%{opacity:1}92%{opacity:1}100%{transform:translateX(168px);opacity:0}}

/* ---- SCADA / HMI screen ---- */
.sc-trend{animation:scScroll 3s linear infinite}
@keyframes scScroll{from{transform:translateX(0)}to{transform:translateX(-60px)}}
.sc-bar{transform-box:fill-box;transform-origin:center bottom;animation:scBar 2.4s ease-in-out infinite}
.sc-bar.b2{animation-delay:-.8s}.sc-bar.b3{animation-delay:-1.5s}
@keyframes scBar{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.sc-led{animation:pulse 1.3s infinite}

/* ---- software / code ---- */
.sd-line{opacity:0;animation:sdLine 4.5s ease-in-out infinite}
@keyframes sdLine{0%,4%{opacity:0}9%,93%{opacity:1}100%{opacity:0}}
.sd-cursor{animation:sdBlink 1s steps(1) infinite}
@keyframes sdBlink{0%,50%{opacity:1}50.01%,100%{opacity:0}}
.sd-bar{transform-box:fill-box;transform-origin:left center;animation:sdBar 4.5s ease-in-out infinite}
@keyframes sdBar{0%,8%{transform:scaleX(0)}82%,100%{transform:scaleX(1)}}

/* ---- coding / date marking (printhead pulses, product passes) ---- */
.cd-spray{animation:pulse 0.7s infinite}

/* ---- rotary labeling table (top view): indexes one bottle per cycle, label applied during the dwell ---- */
.rt-table{transform-box:view-box;animation:rtIndex 2s ease-in-out infinite}
@keyframes rtIndex{0%,10%{transform:rotate(0deg)}34%,100%{transform:rotate(45deg)}}   /* index 45°, then dwell (45°≡0° for 8 bottles → seamless) */
.lb-tamp{animation:lbTamp 2s ease-in-out infinite}        /* applies during the dwell, bottle parked at station */
@keyframes lbTamp{0%,46%{transform:translateX(0)}62%{transform:translateX(-9px)}78%,100%{transform:translateX(0)}}

/* ---- laser marking (beam flickers, mark engraves) ---- */
.lm-beam{animation:pulse .5s infinite}
.lm-mark{stroke-dasharray:120;stroke-dashoffset:120;animation:lmMark 3.2s ease-in-out infinite}
@keyframes lmMark{0%,8%{stroke-dashoffset:120}58%{stroke-dashoffset:0}80%{stroke-dashoffset:0}92%,100%{stroke-dashoffset:120}}
.lm-dot{animation:lmDot 3.2s ease-in-out infinite}
@keyframes lmDot{0%,8%{transform:translateX(0);opacity:0}12%{opacity:1}58%{transform:translateX(56px);opacity:1}66%,100%{opacity:0}}

/* ---- VFFS bagger (product drops, jaws seal, filled bag drops) ---- */
.vf-prod{animation:vfProd 3.4s ease-in infinite}
@keyframes vfProd{0%{transform:translateY(-16px);opacity:0}9%{opacity:1}30%{transform:translateY(24px);opacity:1}40%,100%{opacity:0}}
.vf-jaw-l{animation:vfJawL 3.4s ease-in-out infinite}
@keyframes vfJawL{0%,40%{transform:translateX(0)}50%,64%{transform:translateX(13px)}74%,100%{transform:translateX(0)}}
.vf-jaw-r{animation:vfJawR 3.4s ease-in-out infinite}
@keyframes vfJawR{0%,40%{transform:translateX(0)}50%,64%{transform:translateX(-13px)}74%,100%{transform:translateX(0)}}
.vf-bag{opacity:0;animation:vfBag 3.4s ease-in infinite}
@keyframes vfBag{0%,64%{transform:translateY(0);opacity:0}70%{opacity:1}94%{transform:translateY(32px);opacity:0}100%{opacity:0}}
.vf-film{stroke-dasharray:6 6;animation:vfFilm 1s linear infinite}
@keyframes vfFilm{to{stroke-dashoffset:28}}

@media(prefers-reduced-motion:reduce){
  .imm-move,.imm-shot,.imm-glow,.imm-part,.wb-roll,.wb-wire,.wb-head,.wb-feed,
  .rb-upper,.rb-fore,.rb-wrist,.rb-hold,.rb-src,.rb-dst,
  .ga-x,.ga-z,.ga-src,.ga-hold,.ga-dst,
  .dz-wheel,.dz-belt,.dz-blade,.dz-body,.dz-smoke,
  .cv-roll,.cv-belt,.cv-box,.sc-trend,.sc-bar,.sc-led,.sd-line,.sd-cursor,.sd-bar,
  .cd-spray,.lb-tamp,.rt-table,.lm-beam,.lm-mark,.lm-dot,.vf-prod,.vf-jaw-l,.vf-jaw-r,.vf-bag,.vf-film,
  .marquee .track,.machine .cap .st::before{animation:none}
  .imm-move{transform:translateX(28px)}.wb-wire{stroke-dashoffset:0}.sd-line{opacity:1}
}

/* ====================================================================== */
/* BRANDS marquee                                                         */
/* ====================================================================== */
.brands{border-top:1px solid var(--rule);background:var(--bg)}
.brands .wrap{padding:26px 28px}
.brands .lab{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:18px;display:flex;align-items:center}
.marquee{display:flex;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee .track{display:flex;align-items:center;gap:52px;padding-right:52px;white-space:nowrap;animation:marq 28s linear infinite}
@keyframes marq{to{transform:translateX(-50%)}}
.brand-mark{font-family:var(--display);font-weight:800;font-size:25px;letter-spacing:.01em;color:var(--ink-2);opacity:.65}
.brand-mark .o{color:var(--signal);opacity:1}

/* ====================================================================== */
/* SITE FOOTER (signal-orange)                                            */
/* ====================================================================== */
.site-footer{background:var(--signal);color:#fff;border-top:none;padding:56px 0 30px;margin-top:0}
.site-footer .wrap{display:block}
.foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:36px}
.foot-cols h4{font-family:var(--display);font-weight:700;font-size:23px;letter-spacing:-.01em;margin:0 0 14px;color:#fff}
.foot-cols p{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.92);margin:0 0 10px}
.foot-cols a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.foot-cols a:hover{color:var(--ink)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  margin-top:42px;padding-top:22px;border-top:1px solid rgba(255,255,255,.28)}
.foot-bottom .copy{font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:rgba(255,255,255,.92);max-width:78ch;line-height:1.7}
.socials{display:flex;gap:18px}
.socials a{color:#fff;display:inline-flex;opacity:.9;transition:opacity .2s,transform .2s}
.socials a:hover{opacity:1;transform:translateY(-2px)}
.socials svg{width:21px;height:21px;fill:currentColor}
@media(max-width:820px){.foot-cols{grid-template-columns:1fr 1fr}.foot-bottom{flex-direction:column;align-items:flex-start}}
@media(max-width:480px){.foot-cols{grid-template-columns:1fr}}

/* larger hero call-to-action buttons */
.cta.lg{padding:16px 34px;font-size:13px;letter-spacing:.16em}

/* ====================================================================== */
/* LEGAL / TERMS page                                                     */
/* ====================================================================== */
.legal{max-width:880px;margin:0 auto;padding:46px 0 50px}
.legal .backbar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:30px}
.legal .label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.legal h1{font-family:var(--display);font-weight:900;font-size:clamp(40px,7vw,76px);line-height:.92;letter-spacing:-.02em;margin:6px 0 10px}
.legal h1 em{font-style:normal;color:var(--signal)}
.legal .intro{font-size:16px;line-height:1.7;color:var(--ink);margin:0 0 18px}
.legal h2{font-family:var(--display);font-weight:800;font-size:clamp(24px,3.4vw,34px);letter-spacing:-.01em;margin:44px 0 14px;padding-top:20px;border-top:1px solid var(--rule)}
.legal h2 .n{color:var(--signal);font-size:.7em;margin-right:8px}
.legal h3{font-family:var(--body);font-weight:600;font-size:17px;color:var(--ink);margin:22px 0 8px}
.legal p{font-size:14.5px;line-height:1.75;color:var(--ink-2);margin:0 0 14px}
.legal ul{margin:0 0 16px;padding-left:20px}
.legal li{font-size:14.5px;line-height:1.7;color:var(--ink-2);margin-bottom:10px}
.legal strong{color:var(--ink);font-weight:600}
.legal .caps{text-transform:uppercase;font-size:13.5px;letter-spacing:.01em}

/* ---- footer --------------------------------------------------------- */
footer{border-top:1px solid var(--rule);padding:40px 0;margin-top:40px}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;align-items:center}
footer .mono{font-size:11px}

/* ---- admin ---------------------------------------------------------- */
.admin-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px;align-items:center}
.pill{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:7px 13px;border:1px solid var(--rule-2);color:var(--ink-2)}
.pill.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.pill .c{color:var(--signal);margin-left:6px}
table.apps{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--rule)}
table.apps th{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);text-align:left;padding:12px 14px;border-bottom:1px solid var(--rule);background:var(--surface)}
table.apps td{padding:12px 14px;border-bottom:1px solid var(--rule);font-size:14px;vertical-align:top}
table.apps tr:hover td{background:var(--surface)}
.tag{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border:1px solid var(--rule-2)}
.tag.technical{color:#1d6e3c;border-color:#2e9e57}
.tag.sales{color:#a23200;border-color:var(--signal)}
.status-new{color:var(--signal)} .status-hired{color:var(--safe)} .status-rejected{color:var(--ink-2);text-decoration:line-through}

.detail{max-width:820px;margin:0 auto;background:#fff;border:1px solid var(--rule);padding:34px}
.detail dl{display:grid;grid-template-columns:160px 1fr;gap:14px 24px;margin:0}
.detail dt{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.detail dd{margin:0;font-size:15px}

@media(max-width:760px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats div:nth-child(2){border-right:none}
  .values{grid-template-columns:1fr}
  .role{grid-template-columns:1fr}
  .role .apply-col{align-items:flex-start;flex-direction:row}
  .grid2{grid-template-columns:1fr}
  .detail dl{grid-template-columns:1fr}
}


/* ===== theme toggle button (both themes) ===== */
nav.primary{align-items:center}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--rule-2);background:none;color:var(--ink-2);cursor:pointer;transition:color .2s,border-color .2s;padding:0}
.theme-toggle:hover{color:var(--ink);border-color:var(--ink)}
.theme-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .ic-sun{display:none}
[data-theme="dark"] .theme-toggle .ic-sun{display:block}
[data-theme="dark"] .theme-toggle .ic-moon{display:none}

/* ===== DARK THEME (via <html data-theme="dark">) ===== */
[data-theme="dark"]{
  --bg:#121317; --ink:#f3f2ec; --ink-2:#969ba6;
  --rule:#262931; --rule-2:#373b44; --surface:#191b21; --surface-2:#212530;
  --signal:#ff5a1f; --signal-soft:rgba(255,90,31,.18); --hazard:#e0a93b; --safe:#36b368;
}
[data-theme="dark"] .topbar{background:rgba(18,19,23,.82)}
[data-theme="dark"] .brand img{background:#f4f3ee;padding:5px 9px;border-radius:7px}
[data-theme="dark"] .role:hover{background:var(--surface)}
[data-theme="dark"] .field input,[data-theme="dark"] .field select,[data-theme="dark"] .field textarea{background:#1b1d23;color:var(--ink)}
[data-theme="dark"] .field input::placeholder,[data-theme="dark"] .field textarea::placeholder{color:#6c707a}
[data-theme="dark"] table.apps{background:var(--surface)}
[data-theme="dark"] .detail{background:var(--surface)}
[data-theme="dark"] select{background:#1b1d23 !important;color:var(--ink) !important;border-color:var(--rule-2) !important}
[data-theme="dark"] .flash.error{color:#ffb59a}
[data-theme="dark"] .flash.ok{color:#7fe0a6}
[data-theme="dark"] .foot-cols a:hover{color:#16171b}