/* /careers v2 (2026-10-04) · the careers composition from ElevenLabs, sized to Hawcx (user: "Why using the same layout for all pages?",
   "we don't need all of theirs we aren't as big as them"): a centred hero with one pill and an honest open-roles count, a full-width
   card under it holding the four areas as icon columns (user: "these assets are not that great, just have those square boxes"), the FAQ,
   and a centred close carrying Riya's own line. Shared parts: calm.css (cl-elev, cl-icols). */

/* hero: centred, sized to Hawcx (one line, one pill, an honest count), then the film card on the elevated surface */
body.elv .car-hero{padding:88px 0 104px}
body.elv .car-centre{display:flex;flex-direction:column;align-items:center;text-align:center}
body.elv .car-h1{max-width:none;font-size:56px;line-height:62px}
body.elv .car-lede{max-width:560px;margin-top:20px}
body.elv .car-ctas{display:flex;justify-content:center;gap:8px;margin-top:28px}
body.elv .car-count{display:inline-flex;align-items:center;gap:10px;margin:18px 0 0;font-size:14px;line-height:20px;color:rgba(255,255,255,.55)}
body.elv .car-count-n{display:inline-grid;place-items:center;min-width:28px;height:24px;padding:0 8px;border-radius:999px;background:rgba(255,255,255,.1);color:#fff;font-size:13px}
body.elv .car-work{margin-top:72px;padding:0;overflow:hidden}
body.elv .car-work-hd{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:26px 32px}
body.elv .car-work-hd h2{margin:0;font-size:20px;line-height:28px;font-weight:300;letter-spacing:-.01em;color:#fff}
body.elv .car-work-hd p{margin:0;font-size:14px;line-height:20px;color:rgba(255,255,255,.55)}

/* v3 (2026-10-04): each area's icon box is now a minimal Hairline figure drawn for its own line (user: "Spin up a hairline illustration
   agent to work on illustrations for our career page ... keep them minimal"). The figure's plates take the card's colour (#262628, the
   cl-elev surface) so they hide what is drawn behind them; the strokes are /security's white ramp. The figure spans its cell, reaching
   20px into the cell's side padding, and the four share one floor line, so the H3s under them stay level. */
body.elv .car-fig{--hairline-plate:#262628;--hairline-hi:#ffffff;--hairline-edge:rgba(255,255,255,.6);--hairline-mid:rgba(255,255,255,.3);--hairline-lo:rgba(255,255,255,.13);
  position:relative;width:calc(100% + 40px);max-width:340px;aspect-ratio:5/4;margin:-20px -20px 0}
body.elv .car-fig>img{display:block;width:100%;height:auto}
body.elv .car-areas .cl-icol h3{margin-top:0}

/* close: centred, Riya's line set large, then the one action */
body.elv .car-close{padding:96px 0 104px}
body.elv .car-quote{max-width:900px;margin:0 auto;text-align:center}
body.elv .car-quote blockquote{margin:0}
body.elv .car-quote p{margin:0;font-size:34px;line-height:46px;font-weight:300;letter-spacing:-.022em;color:#fff}
body.elv .car-quote figcaption{margin-top:24px;font-size:16px;line-height:24px;color:#fff}
body.elv .car-quote figcaption span{margin-left:8px;color:rgba(255,255,255,.55)}
body.elv .car-close .car-ctas{margin-top:36px}

@media (max-width:1100px){
  body.elv .car-quote p{font-size:30px;line-height:40px}
}
@media (max-width:760px){
  body.elv .car-hero{padding:48px 0 64px}
  body.elv .car-h1{font-size:40px;line-height:46px}
  body.elv .car-work{margin-top:48px}
  body.elv .car-work-hd{padding:20px 22px}
  body.elv .car-work-hd p{display:none}
  body.elv .car-close{padding:64px 0 72px}
  body.elv .car-quote p{font-size:24px;line-height:33px}
}