/* Careers page styles, without on-site job search / company filters /
   listings / pagination: openings live on each company's own careers page, so
   the .job rows here are outbound per-company links reusing the row styling.
   The sub-hero base loads from subpage.css; this sheet sits on top of it. */

/* The 0 inline padding is deliberate (and wins over .container's --pad —
   the template merges the classes and this sheet loads later): the team
   ed-figure spans the near-full band like the other subpages' figures.
   The text columns therefore carry their OWN inline pad, width-compensated
   (max-width + 2*pad, border-box) so desktop content width is unchanged
   while phones keep the standard --pad gutter instead of edge-to-edge. */
.careers{padding:clamp(56px,8vh,104px) 0 var(--sectiony)}
.careers-lead,.openroles{padding-inline:var(--pad)}
.careers-lead{max-width:calc(680px + 2*var(--pad));margin:0 auto;text-align:center;text-wrap:pretty}
.careers-lead p{font-size:clamp(21px,1.7vw,25px) /* type pass 2 */;line-height:1.55;letter-spacing:-.005em;color:var(--grey-body);margin:0}
.careers-lead p + p{margin-top:10px}

/* ---- Company careers links (joblist styling, links out per company) ---- */
.joblist-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding-bottom:22px;margin-bottom:8px;border-bottom:1px solid var(--line);flex-wrap:wrap;margin-top:0}
.joblist-head h2{font-size:clamp(30px,3.4vw,43px)} /* type pass 2 */
.joblist-head .ct{font-family:"Roboto Mono",monospace;font-size:15px; /* mono labels 11 -> 14 -> 15 */letter-spacing:.14em;
  text-transform:uppercase;color:#6f757e} /* AA 4.5:1 on white; --grey-mut hit 2.6:1 */
.openroles{max-width:calc(760px + 2*var(--pad));margin:0 auto;padding-top:clamp(56px,8vh,104px)}
.job{display:flex;align-items:flex-start;gap:28px;padding:30px 4px;border-bottom:1px solid var(--line);
  cursor:pointer}
/* Hover shift via transform on the children, not padding-left on the row —
   compositor-only (no layout work) and the row's border-bottom stays put.
   The arrow carries the row's 14px plus its own 6px nudge. */
.job .jidx,.job .jmain{transition:transform .3s ease}
.job:hover .jidx,.job:hover .jmain{transform:translateX(14px)}
.job .jidx{font-family:"Roboto Mono",monospace;font-size:15px; /* 13 -> 14 -> 15 */color:#6f757e;flex:none;width:30px; /* AA on white */
  padding-top:11px;font-variant-numeric:tabular-nums}
.job .jmain{flex:1;min-width:0}
.job .jtitle{display:inline;font-size:clamp(24px,2.7vw,32px) /* type pass 2 */;font-weight:700;letter-spacing:-.02em;
  line-height:1.1;margin:0;background:linear-gradient(var(--blue),var(--blue)) no-repeat 100% 100%;
  background-size:0% 2px;transition:background-size .3s ease;padding-bottom:2px}
/* origin-aware underline: anchored left while growing (hover), right while
   shrinking (base) — enters from the left, exits to the right. Position
   snaps (only background-size transitions), invisible at size 0. */
.job:hover .jtitle{background-size:100% 2px;background-position:0 100%}
.job .jmeta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:16px /* type pass 2 */;
  color:var(--grey-body);margin-top:12px}
.job .jmeta .firm{font-weight:600;color:var(--ink)}
.job .jmeta .dot{color:var(--line-2)}
.job .jarrow{width:22px;height:22px;color:var(--grey-mut);flex:none;margin-top:9px;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),color .3s} /* arrow-nudge spec, same as .cta svg */
.job:hover .jarrow{transform:translateX(20px);color:var(--blue)}
@media(max-width:620px){.job{gap:16px}.job .jidx{width:22px}}

/* ---- Team figure ---- */
/* Inline pad on the figure too (client decision 21.7.2026): the team photo
   keeps the standard gutter at every width so it never touches the screen
   edge, aligned with how the imagery reads on the other pages. */
.careers .ed-figure{padding:0 var(--pad);margin:clamp(64px,9vh,112px) auto}

/* Mono labels 12px on phone/tablet, 14px desktop. */
@media (max-width: 920px) {
  .joblist-head .ct { font-size: 13px; }
}