/* Careers (B5): The work as type; the introduction form as the study. Tokens and the six type roles only. */

/* ---------- The work: the heading, annotated; each practice is a note on the words it unpacks ---------- */
.cr-work .cr-eye{margin-bottom:0}
.cr-anat{position:relative;padding-top:clamp(48px,5vw,72px);margin-left:max(0px,min(calc((100% + var(--gap)) / 12 * 3),calc(100% - 920px)))}
.cr-head{color:var(--ink);position:relative;z-index:1}
.cr-ln{display:block}
.cr-tg{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.16em;text-decoration-color:rgba(14,15,15,.82);text-decoration-skip-ink:none}
.cr-p h3{color:var(--ink)}
.cr-p p{font:400 var(--s-body)/1.55 var(--f);color:var(--ink2);margin-top:8px;max-width:26em}
.cr-p p b{font-weight:600;color:var(--ink)}
.cr-p{padding-top:16px;border-top:1px solid rgba(14,15,15,.3);margin-top:40px;max-width:30em}
.cr-p1{padding-top:0;padding-bottom:16px;border-top:0;border-bottom:1px solid rgba(14,15,15,.3)}
.cr-lead{display:none}
/* placed by the script: notes sit on the words, leaders drop straight to them */
.cr-anat.cr-set .cr-p{position:absolute;margin:0;max-width:none}
.cr-anat.cr-set .cr-lead{display:block;position:absolute;width:1px;background:rgba(14,15,15,.42);transform-origin:var(--o,top)}
.cr-anat.cr-set .cr-lead::after{content:'';position:absolute;left:-3px;width:7px;height:7px;border-radius:50%;background:var(--ink)}
.cr-anat.cr-set .cr-lead[data-for="p1"]::after{bottom:-3px}
.cr-anat.cr-set .cr-lead:not([data-for="p1"])::after{top:-3px}
.js .cr-anat.cr-set .cr-p{opacity:0;transform:translateY(var(--dy,12px));transition:opacity .7s var(--ease),transform .9s var(--spring)}
.js .cr-anat.cr-set .cr-lead{transform:scaleY(0);transition:transform .6s var(--ease)}
.js .cr-anat.cr-in .cr-p{opacity:1;transform:none}
.js .cr-anat.cr-in .cr-lead{transform:none}
.js .cr-anat.cr-in [data-for="p1"]{transition-delay:0s} .js .cr-anat.cr-in .cr-p1{transition-delay:.3s}
.js .cr-anat.cr-in [data-for="p2"]{transition-delay:.55s} .js .cr-anat.cr-in .cr-p2{transition-delay:.85s}
.js .cr-anat.cr-in [data-for="p3"]{transition-delay:1.1s} .js .cr-anat.cr-in .cr-p3{transition-delay:1.4s}

/* ---------- Expressions of interest: the form is the study ---------- */
.cr-fsec{grid-template-rows:auto 1fr}
.cr-fsec .fs-text{grid-row:1}
.cr-fsec .cr-form{grid-column:7 / 13;grid-row:1 / span 2}
.cr-card{grid-column:1 / 6;grid-row:2;align-self:end;margin-top:36px}
.cr-areas{border:0;margin:0 0 24px;padding:0;min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cr-leg{grid-column:1 / -1;float:left;width:100%;padding:0;margin-bottom:10px;font:500 var(--s-small)/1.3 var(--f);color:rgba(255,255,255,.72)}
.cr-area{position:relative;display:flex;align-items:flex-end;min-height:104px;padding:16px 18px 16px;border-radius:14px;cursor:pointer;
  background:rgba(255,255,255,.055);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transition:background-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease)}
.cr-area:hover{background:rgba(255,255,255,.09)}
.cr-area input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.cr-an{font:var(--w-h3) var(--s-lede)/1.2 var(--f);letter-spacing:-.012em;color:rgba(255,255,255,.78);transition:color .25s}
.cr-mk{position:absolute;right:18px;top:18px;width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4);transition:box-shadow .25s,background-color .25s}
.cr-area:has(input:checked){background:rgba(255,255,255,.15);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.88),0 14px 34px rgba(0,0,0,.28)}
.cr-area:has(input:checked) .cr-an{color:#fff}
.cr-area:has(input:checked) .cr-mk{background:var(--verm);box-shadow:0 0 0 4px rgba(226,70,42,.22)}
.cr-area:has(input:focus-visible){outline:2px solid #fff;outline-offset:3px}

/* the introduction card: an outline of what an introduction holds (dark glass) until "Preview introduction" composes it into a light
   card on the black, so the composed card reads as the result */
.cr-card{--c-ink:#fff;--c-ink2:rgba(255,255,255,.6);--c-line:rgba(255,255,255,.16);
  background:rgba(255,255,255,.035);color:var(--c-ink);border-radius:18px;padding:22px 26px 24px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  transition:background-color .7s var(--ease),box-shadow .7s var(--ease),transform .6s var(--spring)}
.cr-card.cr-composed{--c-ink:var(--ink);--c-ink2:var(--ink2);--c-line:var(--iline);background:rgba(243,244,244,.95);
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(255,255,255,.5),0 44px 90px rgba(0,0,0,.5)}
.cr-c-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--c-line);transition:border-color .7s}
.cr-c-area{position:relative;padding-left:20px;font:var(--w-h3) var(--s-lede)/1.3 var(--f);letter-spacing:-.012em;color:var(--c-ink);transition:color .7s}
.cr-c-area::before{content:'';position:absolute;left:0;top:.42em;width:10px;height:10px;border-radius:50%;background:var(--verm)}
.cr-c-lab{display:block;font:500 var(--s-small)/1.4 var(--f);color:var(--c-ink2);transition:color .7s}
.cr-c-row{padding-top:14px}
.cr-c-row .cr-c-v{display:block;margin-top:4px;border-bottom:1px dashed var(--c-line);color:var(--c-ink);overflow-wrap:anywhere;transition:color .7s,border-color .7s}
.cr-c-name .cr-c-v{min-height:calc(var(--s-h2) * 1.04 + 8px);font:var(--w-h2) var(--s-h2)/1.04 var(--f);letter-spacing:-.032em;padding-bottom:8px}
.cr-c-mail .cr-c-v{min-height:28px;font:500 var(--s-body)/1.5 var(--f);padding-bottom:4px}
.cr-c-msg .cr-c-v{min-height:calc(var(--s-lede) * 1.45 * 2 + 4px);font:400 var(--s-lede)/1.45 var(--f);letter-spacing:-.008em;white-space:pre-line;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.cr-composed .cr-c-v.cr-has{border-bottom-color:transparent}
.cr-c-v.cr-go{opacity:0;transform:translateY(10px)}
.cr-c-v.cr-in{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .7s var(--spring),color .7s}
.cr-card.cr-composed.cr-lift{transform:translateY(-6px);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(255,255,255,.6),0 56px 110px rgba(0,0,0,.56)}
.cr-c-area.cr-swap{animation:cr-swap .5s var(--ease)}
@keyframes cr-swap{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .js .cr-anat.cr-set .cr-p,.js .cr-anat.cr-set .cr-lead{opacity:1;transform:none;transition:none}
  .cr-c-v.cr-go{opacity:1;transform:none} .cr-c-area.cr-swap{animation:none} .cr-card{transition:none}
}
@media (max-width:760px){
  /* the phone reads down: each line of the heading, then the notes on it, each tied to the line above by a short leader */
  .cr-anat{display:flex;flex-direction:column;padding-top:28px;margin-left:0}
  .cr-head{display:contents}
  .cr-l1{order:1} .cr-p1{order:2} .cr-l2{order:3} .cr-p2{order:4} .cr-p3{order:5}
  .cr-ln{color:var(--ink);font:var(--w-h2) var(--s-h2)/1 var(--f);letter-spacing:-.038em}
  .cr-p,.cr-p1{position:relative;margin:34px 0 0;padding:16px 0 0 0;border-top:1px solid rgba(14,15,15,.3);border-bottom:0}
  .cr-p::before{content:'';position:absolute;left:0;top:-22px;width:1px;height:22px;background:rgba(14,15,15,.42)}
  .cr-p1{margin-bottom:56px}
  .cr-p3{margin-top:40px}
  .cr-fsec{display:block}
  .cr-form{margin-top:40px}
  .cr-areas{gap:10px}
  .cr-area{min-height:84px;padding:14px 16px}
  .cr-mk{right:16px;top:16px}
  .cr-card{margin-top:20px;padding:22px 22px 24px}
}
/* the same stacked reading when the heading lines wrap (narrow desktop and tablet; set by the script) */
.cr-anat.cr-flow{display:flex;flex-direction:column;padding-top:28px;margin-left:0}
.cr-anat.cr-flow .cr-head{display:contents}
.cr-anat.cr-flow .cr-l1{order:1}
.cr-anat.cr-flow .cr-p1{order:2}
.cr-anat.cr-flow .cr-l2{order:3}
.cr-anat.cr-flow .cr-p2{order:4}
.cr-anat.cr-flow .cr-p3{order:5}
.cr-anat.cr-flow .cr-ln{color:var(--ink);font:var(--w-h2) var(--s-h2)/1 var(--f);letter-spacing:-.038em}
.cr-anat.cr-flow .cr-p,.cr-anat.cr-flow .cr-p1{position:relative;margin:34px 0 0;padding:16px 0 0 0;border-top:1px solid rgba(14,15,15,.3);border-bottom:0}
.cr-anat.cr-flow .cr-p::before{content:'';position:absolute;left:0;top:-22px;width:1px;height:22px;background:rgba(14,15,15,.42)}
.cr-anat.cr-flow .cr-p1{margin-bottom:56px}
.cr-anat.cr-flow .cr-p3{margin-top:40px}

/* r17 (client: "required the original 3 line restoration"): The work is version A, as built at 16:56 on 16 Oct. This section only
   undoes the later site-wide changes so it renders as it did then: heading weights, the section label's dash and colour, the head layout. */
[aria-label="The work"]{--w-h2:580;--w-h3:560}
[aria-label="The work"] .eyebrow{color:var(--ink2)}
[aria-label="The work"] .eyebrow::before{content:none}
@media (min-width:761px){
  [aria-label="The work"] .head{align-items:end}
  [aria-label="The work"] .head-main{grid-column:1 / 8}
}