.hiring-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.hiring-card { padding:clamp(24px,4vw,36px); border:1px solid var(--rule); border-radius:14px; background:var(--paper); overflow-wrap:anywhere; }
.hiring-card h3 { margin-top:0; }
.hiring-card p:last-child { margin-bottom:0; }
.hiring-list { padding-left:24px; }
.hiring-list li { padding-left:4px; margin-bottom:14px; }
.hiring-terms { margin:0; }
.hiring-terms > div { display:grid; grid-template-columns:180px minmax(0,1fr); gap:28px; padding:24px 0; border-top:1px solid var(--rule); }
.hiring-terms dt { font-weight:700; }
.hiring-terms dd { margin:0; max-width:760px; }
#apply { scroll-margin-top:100px; }
@media(max-width:760px) { .hiring-grid { grid-template-columns:1fr; } .hiring-terms > div { grid-template-columns:1fr; gap:8px; } }

.hiring-hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:56px;align-items:center}
.hiring-hero h1{font-size:clamp(2.5rem,4.4vw,4.3rem)}
.hiring-slate{min-width:0;border:1px solid #49616b;border-radius:16px;padding:20px;background:#122630;box-shadow:14px 14px 0 #0b1d27;color:#f3f7f8}
.slate-bar,.slate-corner,.slate-time,.slate-tracks{font-family:'JetBrains Mono',monospace;font-size:14px}
.slate-bar{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid #49616b;padding-bottom:16px;color:#80e5d3}
.slate-frame{position:relative;aspect-ratio:4/3;margin:20px 0;background:linear-gradient(135deg,#183b43,#0a1925);padding:20px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid #49616b}
.slate-frame p{font-size:clamp(1.5rem,2.6vw,2.3rem);font-weight:600;line-height:1.2;margin:24px 0}.slate-play{align-self:flex-end;border:1px solid #80e5d3;border-radius:50%;width:48px;height:48px;display:grid;place-items:center;color:#80e5d3}.slate-time{color:#c4d6dd}
.slate-tracks>div{display:flex;gap:6px;margin-top:8px;align-items:stretch}.slate-tracks span{width:48px;flex-shrink:0;align-self:center}.slate-tracks i{font-style:normal;padding:8px;background:#29534f;border-left:3px solid #80e5d3;flex:1;min-width:0;font-size:14px}.slate-tracks>div:nth-child(2) i{background:#283f5c;border-color:#a5c4ee}.slate-tracks>div:nth-child(3) i{background:#4c4031;border-color:#ead2ac}
.hiring-application{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start}.hiring-form{background:white;border:1px solid var(--rule);border-radius:16px;padding:clamp(20px,4vw,40px);min-width:0}.hiring-fields{display:grid;grid-template-columns:1fr 1fr;gap:20px}.hiring-check{display:flex;gap:12px;align-items:flex-start;margin:24px 0}.hiring-check input{width:20px;height:20px;flex-shrink:0}.hiring-form input[type=file]{width:100%;font:inherit;font-size:14px}.hiring-form select{width:100%;font:inherit;padding:12px;border:1px solid var(--rule);border-radius:6px;background:white;color:var(--ink)}
@media(max-width:960px){.hiring-hero,.hiring-application{grid-template-columns:1fr;gap:40px}.hiring-slate{max-width:560px}.hiring-fields{grid-template-columns:1fr;gap:0}.hiring-hero h1{font-size:clamp(2.5rem,7vw,4rem)}}
.dark .hiring-slate p{color:#f3f7f8}

/* Header background: a faint editing timeline that cuts itself (12 s loop, decorative, aria-hidden).
   0–30% playhead travels to the razor; 30–42% one clip is cut out and the rest ripple left (jump cut);
   52–64% playhead holds and the audio goes quiet; ~64% one dim frame flash (smash cut, max 30% opacity);
   then the playhead finishes and the edit resets. Pauses off screen via main.js; static with reduced motion.
   Desktop: a band along the header bottom, with the cut/hold/flash in the gap left of the brief card.
   Under 960px the brief card fills the bottom, so the band moves to the top, faded toward the text. */
.pc-hiring{top:auto;height:240px;width:100%;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 35%);mask-image:linear-gradient(to right,transparent 0,#000 35%)}
.pc-hiring .pc-tick{stroke:rgba(232,240,246,.18);stroke-width:1.5}
.pc-hiring .pc-lane{stroke:rgba(232,240,246,.07);stroke-width:1}
.pc-hiring .pc-clip{fill:rgba(34,229,200,.08);stroke:rgba(34,229,200,.24);stroke-width:1.5}
.pc-hiring .pc-cap{fill:rgba(165,196,238,.08);stroke:rgba(165,196,238,.22);stroke-width:1.5}
.pc-hiring .pc-wave{stroke:rgba(234,210,172,.22);stroke-width:4;stroke-linecap:round;transform-box:fill-box;transform-origin:50% 50%;animation:pch-wave 12s linear infinite}
.pc-hiring .pc-drop{animation:pch-drop 12s ease-in-out infinite}
.pc-hiring .pc-after{animation:pch-ripple 12s ease-in-out infinite}
.pc-hiring .pc-razor{stroke:rgba(232,240,246,.3);stroke-width:2;stroke-dasharray:4 4;opacity:0;animation:pch-razor 12s linear infinite}
.pc-hiring .pc-flash{fill:#e8f0f6;opacity:0;animation:pch-flash 12s linear infinite}
.pc-hiring .pc-head{stroke:rgba(34,229,200,.3);stroke-width:2;fill:rgba(34,229,200,.3);transform:translateX(600px);animation:pch-head 12s linear infinite}
@keyframes pch-head{0%{transform:translateX(0);opacity:1}30%{transform:translateX(410px)}36%{transform:translateX(410px)}52%{transform:translateX(600px)}64%{transform:translateX(600px)}92%{transform:translateX(1200px);opacity:1}93%,100%{transform:translateX(1200px);opacity:0}}
@keyframes pch-razor{0%,29%{opacity:0}30%,34%{opacity:1}36%,100%{opacity:0}}
@keyframes pch-drop{0%,32%{transform:none;opacity:1}38%{transform:translateY(16px);opacity:0}93%{transform:translateY(16px);opacity:0}100%{transform:none;opacity:1}}
@keyframes pch-ripple{0%,37%{transform:none}43%,93%{transform:translateX(-154px)}100%{transform:none}}
@keyframes pch-wave{0%,52%{transform:none}54%,63%{transform:scaleY(.12)}64.5%,100%{transform:none}}
@keyframes pch-flash{0%,63.9%{opacity:0}64%{opacity:.3}66%,100%{opacity:0}}
@media(max-width:960px){.pc-hiring{top:0;bottom:auto;height:260px;opacity:.75;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 75%);mask-image:linear-gradient(to right,transparent 0,#000 75%)}}
@media(prefers-reduced-motion:reduce){.pc-hiring *{animation:none!important}.pc-hiring .pc-razor,.pc-hiring .pc-flash{opacity:0}}

/* Put actionable role details beside the introduction. */
.hiring-hero{grid-template-columns:minmax(0,1.4fr) minmax(0,.85fr);align-items:start}
.hiring-role-summary{background:#122630;border:1px solid #49616b;border-radius:14px;padding:28px;position:relative;z-index:1;min-width:0}
.hiring-role-summary .chips{margin:0 0 24px;display:flex;flex-wrap:wrap;gap:12px}
.hiring-role-summary .chips li{white-space:normal}
.hiring-role-summary .btn-row{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin:0}
.hiring-role-summary .btn{justify-content:center;text-align:center}
@media(max-width:960px){.hiring-hero{grid-template-columns:1fr}.hiring-role-summary{max-width:560px;width:100%;padding:24px}}