/* Careers in the People style (14 Oct 2026): photo-led and warm, on paper. The team photo leads across the page with
   its caption; each chapter is a large picture beside a few plain words, the side swapping down the page; the principles,
   perks and the interview steps are words on paper rather than boxes. The roles list keeps its rows (each opens the form
   with its area chosen), "Meet the team" keeps the page's one ink band, and the form keeps REKA's orange tray.
   REKA's own call, so orange; a role tied to a division wears that division's tone. Scoped to main.pg-careers;
   overrides the cr-* rules in company.css without editing it. Copy unchanged. */

/* ---------- People vocabulary: left titles, large pictures with captions, quiet words ---------- */
main.pg-careers .blk.chap.pp-sec{padding-top:120px}
main.pg-careers .pp-head{max-width:none;margin:0 0 48px;display:flex;flex-direction:row;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 56px;text-align:left}
main.pg-careers .pp-head h2{font:600 56px/1.04 var(--sans);letter-spacing:-.035em;color:var(--ink);text-align:left;text-wrap:balance;max-width:16ch}
main.pg-careers .pp-head p{margin:0;max-width:46ch;font-size:18px;line-height:27px;color:var(--muted);text-align:left}
main.pg-careers .pp-head p a{color:var(--brand-text);text-decoration:underline;text-underline-offset:3px}
main.pg-careers .pp-fig{margin:0;min-width:0}
main.pg-careers .pp-fig>img{display:block}
main.pg-careers .pp-fig>img,main.pg-careers .pp-fig>.ph{width:100%;border-radius:28px}
main.pg-careers .pp-cap{margin-top:14px;font:500 14px/20px var(--sans);color:var(--muted);text-wrap:pretty}

/* ---------- hero: the headline beside the words, then the team photo across the page ---------- */
main.pg-careers .cr-hero{padding:168px 0 0}
main.pg-careers .cr-hero .cw{max-width:1280px;display:block}
main.pg-careers .cr-hero-txt{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto 1fr;column-gap:64px;align-items:start}
main.pg-careers .cr-hero h1{grid-row:1/3;font:600 84px/1 var(--sans);letter-spacing:-.045em;text-wrap:balance}
main.pg-careers .cr-hero p{grid-column:2;margin:8px 0 0;max-width:none;font-size:20px;line-height:1.5;color:var(--ink)}
main.pg-careers .cr-hero .btn{grid-column:2;justify-self:start;align-self:start;margin-top:28px}
main.pg-careers .cr-hero-img{margin-top:56px;border-radius:0;overflow:visible;aspect-ratio:auto;background:none}
main.pg-careers .cr-hero-img img{aspect-ratio:2/1;height:auto;object-fit:cover;object-position:50% 26%;background:var(--oat)}

/* ---------- what we're all about: a big picture beside the two principles, then the perks as words ---------- */
main.pg-careers .crx-two{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px 72px;align-items:center}
main.pg-careers .crx-two.crx-flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
main.pg-careers .crx-two.crx-flip>.pp-fig{order:-1}
main.pg-careers .crx-two .ph{aspect-ratio:4/3}
main.pg-careers .crx-pair{display:grid;gap:36px}
main.pg-careers .crx-pair .card{padding:0;gap:10px;background:none;box-shadow:none;border-radius:0}
main.pg-careers .crx-pair .tt{font:600 30px/1.15 var(--sans);letter-spacing:-.02em;color:var(--brand-text)}
main.pg-careers .crx-pair .card p{font-size:18px;line-height:28px;color:var(--ink)}
main.pg-careers .crx-gap{margin-top:36px;font-size:17px;line-height:27px;color:var(--muted);max-width:52ch}
main.pg-careers .crx-perks{list-style:none;margin:72px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 56px}
main.pg-careers .crx-perks .card{display:block;padding:0;background:none;box-shadow:none;border-radius:0;font-size:18px;line-height:28px}
main.pg-careers .crx-perks .tt{font:600 22px/1.3 var(--sans);letter-spacing:-.3px;color:var(--brand-text)}
main.pg-careers .crx-perks .sub{font-size:18px;line-height:28px;color:var(--ink)}

/* ---------- meet the team: the page's one ink band, a short pointer on ---------- */
main.pg-careers .crx-meet{padding-top:96px}
main.pg-careers .crx-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;padding:40px 48px}
main.pg-careers .crx-band-t{display:flex;align-items:flex-start;gap:16px}
main.pg-careers .crx-band .hi{color:var(--brand);margin-top:5px}
main.pg-careers .crx-band h2{font:500 32px/38px var(--sans);letter-spacing:-.8px;color:#fff;text-wrap:balance}
main.pg-careers .crx-band p{margin-top:6px;font-size:17px;line-height:25px;color:rgba(255,255,255,.75)}

/* ---------- open roles: each role is a row and the whole row opens the form with its area chosen ---------- */
main.pg-careers .crx-rh,main.pg-careers .crx-list a.card{display:grid;grid-template-columns:minmax(0,2.2fr) repeat(3,minmax(0,1fr)) minmax(150px,auto);align-items:center;column-gap:20px}
main.pg-careers .crx-rh{padding:0 24px 12px;font:500 13px/18px var(--sans);color:var(--muted)}
main.pg-careers .crx-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
main.pg-careers .crx-list li{display:flex}
main.pg-careers .crx-list a.card{flex:1;padding:20px 16px 20px 24px}
main.pg-careers .crx-list .tt{font-size:20px}
main.pg-careers .crx-list .k{font-size:15px;line-height:22px;color:var(--muted)}
main.pg-careers .crx-list .k.na::after{content:"\2013";color:var(--line-2,#C9C5BC)}
main.pg-careers .crx-list .card-foot{margin:0;padding:0;justify-content:flex-end}
main.pg-careers .crx-list .code{color:var(--t-ink)}

/* ---------- apprenticeships: the apprentice's story leads, the words beside it ---------- */
main.pg-careers .crx-pool h2{font:600 44px/1.08 var(--sans);letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
main.pg-careers .crx-pool p{max-width:52ch;margin-top:20px;font-size:18px;line-height:28px;color:var(--ink)}
main.pg-careers .crx-pool p+p{color:var(--muted)}
main.pg-careers .crx-pool .ph{aspect-ratio:16/9}

/* ---------- interview process: four steps as words, read left to right; then the form in REKA's tray ---------- */
main.pg-careers .cr-int{border-top:0;padding-bottom:0}
main.pg-careers .cr-int .cr-flow{margin:0;gap:40px}
main.pg-careers .cr-int .cr-flow li{padding:0;border:0;border-radius:0;background:none;box-shadow:none}
main.pg-careers .cr-int .cr-flow li+li::before{left:-30px;top:4px;width:20px;transform:none;font-size:20px}
main.pg-careers .cr-int .cr-flow b{font:600 24px/1.25 var(--sans);letter-spacing:-.4px;color:var(--brand-text)}
main.pg-careers .cr-int .cr-flow li>span{margin-top:10px;font-size:17px;line-height:26px;color:var(--ink)}
main.pg-careers .cr-int .apwrap{max-width:none;margin:72px 0 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);gap:32px 48px;align-items:start}
main.pg-careers .cr-int .aph{font:600 44px/1.08 var(--sans);letter-spacing:-.03em}
main.pg-careers .cr-int .apl{margin:12px 0 0;font-size:17px;line-height:25px;color:var(--ink)}
main.pg-careers .cr-int .apwrap .rkf{border-color:transparent}
main.pg-careers .cr-int .apwrap .rf-done{padding:32px;border-radius:24px;background:#fff}
main.pg-careers .cr-int .apwrap .rf-done h3{margin-top:0}
main.pg-careers .crx-appic{margin-top:28px}
main.pg-careers .crx-appic .ph{width:100%;aspect-ratio:4/3;border-radius:20px}
main.pg-careers .crx-appic img{display:block;width:100%;aspect-ratio:4/3;border-radius:20px;object-fit:cover}

@media (max-width:1100px){
  main.pg-careers .crx-rh{display:none}
  main.pg-careers .crx-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  main.pg-careers .crx-list a.card{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:8px;row-gap:4px;padding:20px}
  main.pg-careers .crx-list .tt{flex:1 0 100%;margin-bottom:2px}
  main.pg-careers .crx-list .k.na{display:none}
  main.pg-careers .crx-list .k:not(.na)~.k:not(.na)::before{content:"\00B7";margin-right:8px}
  main.pg-careers .crx-list .card-foot{flex:1 0 100%;justify-content:space-between;margin-top:auto;padding-top:14px}
  main.pg-careers .cr-int .apwrap{grid-template-columns:minmax(0,1fr)}
  main.pg-careers .crx-appic{margin-top:20px}
  main.pg-careers .crx-appic .ph,main.pg-careers .crx-appic img{aspect-ratio:16/9}
  main.pg-careers .cr-hero h1{font-size:64px}
}
@media (max-width:900px){
  main.pg-careers .blk.chap.pp-sec,main.pg-careers .crx-meet{padding-top:72px}
  main.pg-careers .pp-head{margin-bottom:28px;flex-direction:column;align-items:stretch;gap:14px}
  main.pg-careers .pp-head h2{font-size:38px;line-height:1.08;max-width:none}
  main.pg-careers .pp-head p{font-size:16px;line-height:24px}
  main.pg-careers .pp-fig>img,main.pg-careers .pp-fig>.ph{border-radius:20px}
  main.pg-careers .pp-cap{margin-top:10px;font-size:13px;line-height:18px}
  main.pg-careers .cr-hero{padding:120px 0 0}
  main.pg-careers .cr-hero-txt{display:block}
  main.pg-careers .cr-hero h1{font-size:46px;line-height:1.02;letter-spacing:-1.6px}
  main.pg-careers .cr-hero p{margin-top:18px;font-size:17px}
  main.pg-careers .cr-hero .btn{margin-top:24px}
  main.pg-careers .cr-hero-img{margin-top:32px}
  main.pg-careers .cr-hero-img img{aspect-ratio:4/3;object-position:50% 30%}
  main.pg-careers .crx-two,main.pg-careers .crx-two.crx-flip{grid-template-columns:minmax(0,1fr);gap:28px}
  main.pg-careers .crx-pair{gap:24px}
  main.pg-careers .crx-pair .tt{font-size:24px}
  main.pg-careers .crx-pair .card p{font-size:16px;line-height:25px}
  main.pg-careers .crx-gap{margin-top:24px;font-size:16px;line-height:25px}
  /* the perks two to a row on a phone, so the words stay short */
  main.pg-careers .crx-perks{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 20px;margin-top:40px}
  main.pg-careers .crx-perks .tt{font-size:17px}
  main.pg-careers .crx-perks .sub,main.pg-careers .crx-perks .card{font-size:15px;line-height:22px}
  main.pg-careers .crx-pool h2{font-size:32px;line-height:1.1}
  main.pg-careers .crx-pool p{font-size:16px;line-height:25px}
  main.pg-careers .cr-int .cr-flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}
  main.pg-careers .cr-int .cr-flow li+li::before{display:none}
  main.pg-careers .cr-int .cr-flow b{font-size:19px}
  main.pg-careers .cr-int .cr-flow li>span{font-size:15px;line-height:22px}
  main.pg-careers .cr-int .apwrap{margin-top:48px}
}
@media (max-width:760px){
  main.pg-careers .crx-band{padding:24px}
  main.pg-careers .crx-band h2{font-size:24px;line-height:30px}
  main.pg-careers .crx-list{grid-template-columns:minmax(0,1fr);gap:8px}
  main.pg-careers .crx-list a.card{padding:14px 14px 14px 18px;row-gap:2px}
  main.pg-careers .crx-list .tt{margin-bottom:0;font-size:18px}
  main.pg-careers .crx-list .k{font-size:14px}
  main.pg-careers .crx-list .card-foot{flex:0 0 auto;margin-left:auto;padding-top:0;gap:10px}
  main.pg-careers .cr-int .aph{font-size:30px;line-height:1.1}
  main.pg-careers .cr-int .apwrap .rkf{padding:20px 16px}
  main.pg-careers .cr-int .apwrap .rf-done{padding:24px 20px}
}
@media (max-width:480px){
  main.pg-careers .cr-int .cr-flow{grid-template-columns:minmax(0,1fr);gap:22px}
}

/* What we're all about, laid out so the picture reaches down beside the perks (one picture-free run from here to the
   apprentice's story, not two screens of words): the picture on the left, the principles and then the perks on the
   right. On phones the picture follows the perks, between them and "Meet the team". */
main.pg-careers .crx-about .crx-body{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:72px;align-items:end}
main.pg-careers .crx-about .crx-two{display:contents}
main.pg-careers .crx-about .crx-two>.pp-fig{grid-column:1;grid-row:1/3;align-self:end}
main.pg-careers .crx-about .crx-principles{grid-column:2;grid-row:1}
main.pg-careers .crx-about .crx-perks{grid-column:2;grid-row:2;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:40px}
main.pg-careers .crx-about .crx-perks .card,main.pg-careers .crx-about .crx-perks .sub{font-size:16px;line-height:24px}
main.pg-careers .crx-about .crx-perks .tt{font-size:18px}
main.pg-careers .crx-about .crx-gap{margin-top:28px;font-size:16px;line-height:25px}
main.pg-careers .crx-about .crx-pair{gap:28px}
@media (max-width:900px){
  main.pg-careers .crx-about .crx-body{display:flex;flex-direction:column}
  main.pg-careers .crx-about .crx-two>.pp-fig{order:2;margin-top:32px}
  main.pg-careers .crx-about .crx-perks{order:1;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:32px}
  main.pg-careers .crx-about .crx-perks .card,main.pg-careers .crx-about .crx-perks .sub{font-size:15px;line-height:22px}
  main.pg-careers .crx-about .crx-perks .tt{font-size:17px}
}