/* dept13.css: Lane C (departments, roles, ladders, Careers A–Z), r6, 12 Nov 2026. Option 13 "Clean Cut plus".
   Ladder stepper (DESIGN_SYSTEM §9) and the Careers A–Z shell (§8). One data source: src/_data/ladders.json.
   Tokens are local copies of fif13.css values (scoped to these blocks) so this sheet works before and after fif13 lands.
   Contrast: #1d1d1f on #fff 16.8:1; #4f4f55 on #fff 8.1:1; #4f4f55 on #f5f5f7 7.5:1. Yellow only on the play disc. */
.ld13,.az13{--l-bg:#f5f5f7;--l-bg3:#ececf0;--l-ink:#1d1d1f;--l-ink2:#4f4f55;--l-line:#d2d2d7;--l-y:#ffe600;--l-r:14px;--l-r2:22px;
  --l-sh:0 4px 20px -10px rgba(0,0,0,.22);--l-sh2:0 8px 24px -12px rgba(0,0,0,.35);--l-gap:20px;
  --l-gut:clamp(16px,4vw,48px);--l-edge:max(var(--l-gut),calc((100vw - 1360px)/2 + var(--l-gut)));
  --l-disp:"FIF Display",Archivo,sans-serif;--l-sans:Archivo,"Helvetica Neue",Arial,sans-serif;font-family:var(--l-sans);color:var(--l-ink)}

/* ---------- ladder section on department guides ---------- */
.ld13{background:var(--l-bg);padding:clamp(40px,6vw,64px) 0 clamp(24px,3vw,40px)}
.ld13 .ld-w{padding-inline:var(--l-edge)}
.ld13 .ld-head{margin-bottom:6px}
.ld-k{font:600 13px/1.3 var(--l-sans);letter-spacing:.09em;text-transform:uppercase;color:var(--l-ink2);margin:0 0 6px}
.ld13 h2{font:700 clamp(22px,1rem + .9vw,30px)/1.1 var(--l-sans);letter-spacing:-.02em;margin:0 0 8px;color:var(--l-ink)}
.ld-note{font-size:16px;line-height:1.5;color:var(--l-ink2);max-width:46rem;margin:0}

/* one track = a heading row + a horizontal rail of grade cards joined by a 2px line */
.ld-track{margin-top:22px}
.ld-th{display:flex;align-items:center;gap:10px;padding-inline:var(--l-edge);margin-bottom:10px}
.ld-th h3{font:700 18px/1.2 var(--l-sans);letter-spacing:-.01em;margin:0;color:var(--l-ink)}
.ld-tag{font:600 12px/1 var(--l-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--l-ink2);background:#fff;border-radius:999px;padding:6px 10px;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.ld-cue{margin-left:auto;font:600 13px/1 var(--l-sans);color:var(--l-ink2);white-space:nowrap}
.ld-cue i{font-style:normal;display:inline-block}
@media (prefers-reduced-motion:no-preference){.ld-cue i{animation:ldnudge 1.6s ease-in-out infinite}}
@keyframes ldnudge{50%{transform:translateX(4px)}}
.ld-rail{--per:5.2;--perm:1.6;list-style:none;margin:0;display:flex;gap:var(--l-gap);overflow-x:auto;scroll-snap-type:x mandatory;
  padding:6px var(--l-edge) 14px;scroll-padding-inline:var(--l-edge);scrollbar-width:thin;position:relative}
.ld-rail:focus-visible{outline:3px solid var(--l-ink);outline-offset:-3px}
.ld-r{align-items:flex-start;flex:0 0 calc((min(100vw,1360px) - 2*var(--l-gut))/var(--per) - var(--l-gap)*(1 - 1/var(--per)));scroll-snap-align:start;min-width:0;position:relative;display:flex}
/* the joining line: from the right edge of each card to the next one */
.ld-r:not(:last-child)::after{content:"";position:absolute;top:34px;right:calc(-1*var(--l-gap));width:var(--l-gap);height:2px;background:var(--l-ink2)}
.ld-par .ld-r:not(:last-child)::after{background:var(--l-line)}
.ld-c{display:flex;flex-direction:column;gap:4px;width:100%;background:#fff;border-radius:var(--l-r);box-shadow:var(--l-sh);padding:14px 16px 16px;color:var(--l-ink);text-decoration:none;transition:transform .16s,box-shadow .16s}
a.ld-c:hover,a.ld-c:focus-visible{transform:translateY(-2px);box-shadow:var(--l-sh2)}
a.ld-c:focus-visible{outline:3px solid var(--l-y);outline-offset:2px}
.ld-top .ld-c{box-shadow:var(--l-sh),inset 0 0 0 2px var(--l-ink)}
.ld-im{position:relative;display:block;aspect-ratio:16/9;margin:-14px -16px 8px;border-radius:var(--l-r) var(--l-r) 0 0;overflow:hidden;background:var(--l-bg3)}
.ld-im img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
a.ld-c:hover .ld-im img{transform:scale(1.04)}
.ld-pb{position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:50%;background:var(--l-y);box-shadow:0 2px 8px rgba(0,0,0,.3)}
.ld-pb::before{content:"";position:absolute;left:13px;top:10px;border-left:11px solid #111;border-top:7px solid transparent;border-bottom:7px solid transparent}
.ld-n{font:600 12.5px/1.3 var(--l-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--l-ink2)}
.ld-t{font:800 19px/1.12 var(--l-disp);font-stretch:104%;letter-spacing:-.015em}
.ld-aka{display:block;font:400 13.5px/1.35 var(--l-sans);color:var(--l-ink2)}
.ld-d{font:400 14.5px/1.4 var(--l-sans);color:var(--l-ink2)}
.ld-go{margin-top:auto;padding-top:8px;font:600 14px/1.2 var(--l-sans);color:var(--l-ink)}
.ld-par .ld-c{padding:12px 14px 14px;box-shadow:0 2px 12px -8px rgba(0,0,0,.25)}
.ld-par .ld-t{font-size:17px}

/* specialists branch below the line: pills on a dashed branch line, never numbered */
.ld-br{margin:2px var(--l-edge) 0;padding:12px 0 0 18px;border-left:2px dashed var(--l-ink2);position:relative}
.ld-br::before{content:"";position:absolute;left:-2px;top:0;width:14px;height:2px;background:var(--l-ink2)}
.ld-bh{font:700 15px/1.3 var(--l-sans);margin:0 0 10px;color:var(--l-ink)}
.ld-bh span{font-weight:400;color:var(--l-ink2)}
.ld-sp{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.ld-pill{display:flex;flex-direction:column;gap:2px;min-height:44px;justify-content:center;background:#fff;border-radius:16px;padding:10px 16px;box-shadow:0 2px 10px -6px rgba(0,0,0,.3);color:var(--l-ink);text-decoration:none;max-width:22rem}
.ld-pill b{font:700 15.5px/1.2 var(--l-sans)}
.ld-bs{font:400 13px/1.3 var(--l-sans);color:var(--l-ink2)}
.ld-sd{font:400 13.5px/1.35 var(--l-sans);color:var(--l-ink2)}
.ld-pill .ld-go{padding-top:4px;font-size:13.5px}
a.ld-pill:hover,a.ld-pill:focus-visible{box-shadow:var(--l-sh2)}
a.ld-pill:focus-visible{outline:3px solid var(--l-y);outline-offset:2px}

/* grade by grade: one details card, tables become stacked rows on phones */
.ld-more{margin-top:26px}
.ld-more>summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;background:#fff;border-radius:999px;padding:0 18px;box-shadow:var(--l-sh);font:600 15px/1.2 var(--l-sans);color:var(--l-ink)}
.ld-tw{margin-top:16px}
.ld-tb{width:100%;max-width:62rem;border-collapse:separate;border-spacing:0;background:#fff;border-radius:var(--l-r);overflow:hidden;box-shadow:var(--l-sh);font-size:15px}
.ld-tb caption{text-align:left;font:700 16px/1.3 var(--l-sans);padding:0 0 8px;color:var(--l-ink)}
.ld-tb th,.ld-tb td{text-align:left;vertical-align:top;padding:11px 14px;border-bottom:1px solid var(--l-line);line-height:1.4}
.ld-tb tr:last-child>*{border-bottom:0}
.ld-tb thead th{font:600 13px/1.3 var(--l-sans);letter-spacing:.05em;text-transform:uppercase;color:var(--l-ink2);background:#fafafa}
.ld-tb tbody th{font-weight:700;width:28%}
.ld-tb td{color:var(--l-ink2)}
.ld-tb a{color:var(--l-ink)}
@media (max-width:600px){.ld-tb thead{display:none}.ld-tb,.ld-tb tbody,.ld-tb tr,.ld-tb th,.ld-tb td{display:block;width:auto}.ld-tb tbody th{width:auto;border-bottom:0;padding-bottom:2px}.ld-tb td{border-bottom:0;padding-top:2px}.ld-tb tr{border-bottom:1px solid var(--l-line)}}
.ld-src{margin:18px 0 0;font:400 14.5px/1.5 var(--l-sans);color:var(--l-ink2)}
.ld-src a{color:var(--l-ink);font-weight:600}

@media (max-width:760px){
  .ld-rail{--per:var(--perm)}
  .ld-r:not(:last-child)::after{top:30px}
  .ld-t{font-size:18px}
}

/* ---------- Careers A–Z (§8 shell): sticky department bar, one card per department ---------- */
.az13{background:var(--l-bg);padding-bottom:clamp(32px,5vw,56px)}
.az-bar{position:sticky;top:var(--hdr,0px);z-index:5;display:flex;gap:6px;overflow-x:auto;background:rgba(245,245,247,.96);backdrop-filter:blur(8px);
  padding:10px var(--l-edge);border-bottom:1px solid var(--l-line);scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent)}
.az-bar a{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;background:#fff;color:var(--l-ink);text-decoration:none;font:600 14px/1 var(--l-sans);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.az-bar a:hover,.az-bar a:focus-visible{background:var(--l-ink);color:#fff}
.az-bar a:focus-visible{outline:3px solid var(--l-y);outline-offset:2px}
.az-list{padding:clamp(20px,3vw,32px) 0 0;display:grid;gap:22px}
.az-d{scroll-margin-top:calc(var(--hdr,0px) + 80px);margin:0 var(--l-edge);background:#fff;border-radius:var(--l-r2);box-shadow:var(--l-sh);overflow:hidden;padding:20px 0 18px}
.az-dh{display:grid;grid-template-columns:96px 1fr;gap:18px;align-items:center;padding:0 22px 4px}
.az-ph{width:96px;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:var(--l-bg3)}
.az-ph img{width:100%;height:100%;object-fit:cover;display:block}
.az-d h2{font:800 clamp(24px,1rem + 1.2vw,34px)/1.05 var(--l-disp);font-stretch:106%;letter-spacing:-.025em;margin:0 0 6px}
.az-d .ld-note{font-size:15.5px}
.az-links{display:flex;flex-wrap:wrap;gap:8px 18px;margin:8px 0 0;font:600 14.5px/1.4 var(--l-sans)}
.az-links a{color:var(--l-ink);min-height:24px}
.az-d .ld-track{margin-top:14px}
.az-d .ld-th,.az-d .ld-rail{padding-inline:22px;scroll-padding-inline:22px}
.az-d .ld-br{margin-inline:22px}
.az-d .ld-rail{--per:4.6;--perm:1.7}
.az-d .ld-c{background:var(--l-bg);box-shadow:none}
.az-d a.ld-c:hover,.az-d a.ld-c:focus-visible{box-shadow:var(--l-sh)}
.az-d .ld-top .ld-c{box-shadow:inset 0 0 0 2px var(--l-ink)}
.az-d .ld-pill{background:var(--l-bg);box-shadow:none}
.az-d .ld-r{flex-basis:calc((min(100vw,1360px) - 2*var(--l-gut) - 44px)/var(--per) - var(--l-gap)*(1 - 1/var(--per)))}
.az-d .ld-d{font-size:14px}
.az-none{margin:10px 22px 0;font-size:16px;color:var(--l-ink2);max-width:46rem}
@media (max-width:760px){
  .az-d{margin:0 12px;padding-top:16px}
  .az-dh{grid-template-columns:72px 1fr;gap:14px;padding:0 16px}
  .az-ph{width:72px}
  .az-d .ld-th,.az-d .ld-rail{padding-inline:16px;scroll-padding-inline:16px}
  .az-d .ld-br{margin-inline:16px}
  .az-d .ld-r{flex-basis:calc((100vw - 24px - 32px)/var(--perm) - var(--l-gap)*(1 - 1/var(--perm)))}
  .az-none{margin-inline:16px}
}
.az-intro{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:0 var(--l-edge);padding-top:clamp(24px,3vw,36px)}
.az-intro .az-door{background:#fff;border-radius:var(--l-r);box-shadow:var(--l-sh);padding:20px 22px;color:var(--l-ink);text-decoration:none;display:flex;flex-direction:column;gap:6px}
.az-door b{font:700 18px/1.2 var(--l-sans)}
.az-door span{font-size:15px;line-height:1.45;color:var(--l-ink2)}
a.az-door:hover,a.az-door:focus-visible{box-shadow:var(--l-sh2)}
.az-cta{margin:clamp(28px,4vw,48px) var(--l-edge) 0;background:#fff;border-radius:var(--l-r2);box-shadow:var(--l-sh);padding:clamp(24px,4vw,44px);display:grid;gap:10px}
.az-cta h2{font:700 clamp(22px,1rem + .9vw,30px)/1.1 var(--l-sans);letter-spacing:-.02em;margin:0}
.az-cta p{margin:0;color:var(--l-ink2);max-width:44rem;font-size:17px;line-height:1.5}
.az-cta .az-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.az-cta .b-y,.az-cta .b-o{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:999px;font:700 16px/1 var(--l-sans);text-decoration:none}
.az-cta .b-y{background:var(--l-y);color:#111}
.az-cta .b-o{background:#fff;color:var(--l-ink);box-shadow:inset 0 0 0 2px var(--l-ink)}
.az-cta a:focus-visible{outline:3px solid var(--l-ink);outline-offset:3px}

/* the ladder section breaks out of the page's narrow text column (.flow>*), full width like the film rows */
.wrap>.ld13{margin-inline:calc(50% - 50vw);max-width:none}
.wide>.wrap>.ld13:first-child{padding-top:clamp(8px,2vw,24px)}
/* Careers A–Z breaks out of the narrow text column (.sec-b) to the full width; the page section loses its own padding */
.sec-in:has(>.sec-b>.az13),.sec-b:has(>.az13){max-width:none;width:100%;margin:0;padding:0}
.sec-plain:has(.az13){padding-block:0}

/* the third scroll cue: a position bar under each rail, driven by the rail's own scroll (CSS scroll timeline; no script).
   Rails that fit at desktop width hide the cue and the bar. */
.ld-track{timeline-scope:--ldr}
.ld-rail{scroll-timeline:--ldr x}
.ld-bar{display:block;height:3px;background:var(--l-line);border-radius:2px;margin:0 var(--l-edge) 4px;position:relative;overflow:hidden}
.ld-bar i{position:absolute;top:0;bottom:0;left:0;width:30%;background:var(--l-ink);border-radius:2px}
@supports (animation-timeline:scroll()){.ld-bar i{animation:ldbar linear both;animation-timeline:--ldr}}
@keyframes ldbar{from{left:0}to{left:70%}}
.az-d .ld-bar{margin-inline:22px}
@media (min-width:761px){.ld13 .ld-le5 .ld-cue,.ld13 .ld-le5 .ld-bar,.az-d .ld-le4 .ld-cue,.az-d .ld-le4 .ld-bar{display:none}}
@media (max-width:760px){.az-d .ld-bar{margin-inline:16px}}
@media (prefers-reduced-motion:reduce){.ld-cue i{animation:none}}
.ld-tag{white-space:nowrap}
@media (max-width:760px){.az-dh{align-items:start}.ld-th h3{font-size:17px}}
/* Departments index: guide doors and CTA; the themed department rails lose their "CH 0x" slate chips */
.hrail .hcard-k{display:none}
.dx-guides{background:transparent;padding-top:8px}
.dx-h{font:700 clamp(22px,1rem + .9vw,30px)/1.1 var(--l-sans);letter-spacing:-.02em;margin:0 var(--l-edge)}
.dx-guides .az-intro{padding-top:14px}
.sec-in:has(>.sec-b>.dx-guides),.sec-b:has(>.dx-guides){max-width:none;width:100%;margin:0;padding:0}
.az13 .az-bar a{flex:0 0 auto;white-space:nowrap;width:auto;max-width:none}
.az13 .az-bar{flex-wrap:nowrap}
.ld-th{flex-wrap:wrap;row-gap:6px}

/* r11 design: "Who to know" organisation rails get the same scroll cue and arrows as every other carousel */
.gs-row13{position:relative}
.gs-row13 .gs-ctl{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:-4px 0 4px}
.gs-row13 .gs-cue{font:600 13px/1 var(--f-body,inherit);color:var(--ink2,#555);margin-right:4px}
.gs-row13 .gs-cue[hidden]{display:none}
.gs-row13 .gs-prev,.gs-row13 .gs-next{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:var(--ink,#1d1d1f);box-shadow:0 2px 10px rgba(0,0,0,.12);font:600 18px/1 var(--f-body,inherit);cursor:pointer}
.gs-row13 .gs-prev:hover:not(:disabled),.gs-row13 .gs-next:hover:not(:disabled){background:var(--ink,#1d1d1f);color:#fff}
.gs-row13 .gs-prev:disabled,.gs-row13 .gs-next:disabled{opacity:.35;cursor:default}
.gs-row13 .gs-prev:focus-visible,.gs-row13 .gs-next:focus-visible{outline:3px solid var(--ink,#1d1d1f);outline-offset:3px}