/* ======================================================================================
   Career detail page.

   Supplied as a standalone HTML design ("architect 4") and reproduced here rather than
   reinterpreted, so the rendered result matches what was approved. Three changes on the
   way in, all structural:

   1. EVERY SELECTOR IS SCOPED UNDER .cr - AND .cr IS NOT .cd.

      The course page already owns .cd. This design and that one are siblings from the
      same token system: both style .hero, .nav, .box, .note, .tbl, .faq, .next and a
      dozen more of the plainest class names there are. Under one wrapper they would
      overwrite each other silently and the bug would look like a colour problem.
      So courses are .cd and careers are .cr, and neither can reach the other.

      The consequence when editing: markup for this page must live inside
      <div class="cr" data-page="career"> or none of this applies to it.

   2. THE STICKY SECTION NAV DOCKS UNDER THE SITE HEADER.

      The design assumed it owned the top of the window: top:0, z-index:50. This site has
      its own sticky header there, 96px collapsing to 60px on scroll. So the nav offsets
      by --cr-head, sits at z-index 40 so it passes beneath the header rather than
      fighting it, and section anchors leave room for both.

   3. THE THEME IS GRAPHITE, NOT INDIGO.

      Careers are the page where the content supplies the colour: every role card carries
      its field accent, the salary tables carry their own emphasis, and the generated
      artwork sits on the hero. A saturated ground would argue with all three. Graphite
      steps back and lets them speak - and it is unmistakably not the Clay a course page
      opens with, which is the point. A reader should know which kind of page they are on
      before they have read a word.
   ====================================================================================== */

html { scroll-behavior: smooth; }

.cr {
  /* Graphite. Careers are the page where the content carries the colour - field
     accents on role cards, generated artwork, salary tables - so the furniture
     steps back to a cool neutral instead of competing with it. */
  --bg:#f8f9fa; --surface:#fff; --surface-2:#f1f3f4; --tint:#eaeef0;
  --line:#e2e6e8; --line-2:#eef1f2;
  --accent:#39505f; --accent-2:#2a3d49; --accent-soft:#eceff1; --accent-line:#ccd5db;
  --hero-a:#41586a; --hero-b:#1f2c35; --hero-c:#0e161b;
  --ink:#101316; --ink-2:#565d64; --ink-3:#8a9198; --ink-4:#b3b8bd; --good:#12735a; --mid:#8a6209; --bad:#a3352a; --c-indigo:#3b54a5; --c-indigo-s:#e9edfa; --c-violet:#6d4bb5; --c-violet-s:#f0ebfa; --c-teal:#0e7d76; --c-teal-s:#e5f4f2; --c-amber:#9a6a10; --c-amber-s:#fbf2e0; --c-rose:#a83a64; --c-rose-s:#fbe9ef; --c-green:#166b4a; --c-green-s:#e6f3ed; --c-rust:#a3352a; --c-rust-s:#fbeae7; --c-slate:#5a6472; --c-slate-s:#eef0f3; --sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --wrap:1280px; --r:18px; --ease:cubic-bezier(.2,.8,.25,1); --sh-1:0 1px 2px rgba(16,19,22,.05); --sh-2:0 6px 20px -10px rgba(16,19,22,.18); --sh-3:0 26px 54px -30px rgba(16,19,22,.45); }
.cr * { box-sizing:border-box }
.cr { margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15.5px; line-height:1.62;letter-spacing:-.005em;overflow-wrap:break-word;-webkit-font-smoothing:antialiased }
.cr .wrap { max-width:var(--wrap);margin:0 auto;padding:0 26px }
.cr .num { font-variant-numeric:tabular-nums }
.cr .sr { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0) }
.cr :focus-visible { outline:2px solid var(--accent);outline-offset:3px }
.cr a { color:var(--accent) }
.cr svg { flex:none }
.cr .kind svg, .cr .pill svg, .cr .btn svg, .cr .nav a svg, .cr .box-h svg { margin-right:7px }
.cr .note .ico { margin-right:13px }
.cr .sec-ico { margin-right:14px }
.cr .pill i { margin-right:7px }
.cr .role .t i { margin-right:8px }
.cr .prog { position:fixed;top:0;left:0;height:3px;width:0;z-index:80; background:linear-gradient(90deg,var(--hero-a),var(--accent));transition:width .1s linear }
.cr .hero { position:relative;overflow:hidden;color:#fff; background: radial-gradient(90% 80% at 88% -10%,rgba(255,255,255,.16),transparent 60%), radial-gradient(70% 70% at 6% 10%,rgba(255,255,255,.08),transparent 60%), linear-gradient(155deg,var(--hero-a) 0%,var(--hero-b) 52%,var(--hero-c) 100%) }
.cr .hero::before { content:"";position:absolute;inset:0;pointer-events:none;opacity:.5; background-image: repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 1px,transparent 1px 14px) }
.cr .hero-in { position:relative;z-index:1;padding-bottom:44px }
.cr .crumbs { padding:20px 0 0;font-size:13px;color:rgba(255,255,255,.6) }
.cr .crumbs a { color:rgba(255,255,255,.72);text-decoration:none }
.cr .crumbs a:hover { color:#fff;text-decoration:underline }
.cr .crumbs span { padding:0 7px;color:rgba(255,255,255,.32) }
.cr .hero-grid { display:flex;gap:56px;align-items:flex-start;padding:28px 0 0 }
.cr .hero-copy { flex:1 1 520px;min-width:0 }
.cr .pills { display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:18px }
.cr .pills > * { margin-right:8px }
.cr .pills > *:last-child { margin-right:0 }
.cr .kind { display:inline-flex;align-items:center;gap:7px;background:#fff;color:var(--accent); font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase; padding:6px 12px;border-radius:99px }
.cr .pill { display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;padding:5px 12px; border-radius:99px;border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.86); background:rgba(255,255,255,.09);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px) }
.cr .pill i { width:6px;height:6px;border-radius:50%;background:#7ee0b5 }
.cr h1 { font-size:50px;font-size:clamp(34px,4.6vw,56px);font-weight:800;letter-spacing:-.042em; line-height:1.02;margin:0;color:#fff }
.cr .sub { margin:18px 0 0;max-width:54ch;font-size:17.5px;line-height:1.6;color:rgba(255,255,255,.74) }
.cr .sub b { color:#fff;font-weight:600 }
.cr .cta { display:flex;gap:11px;flex-wrap:wrap;margin-top:26px }
.cr .btn { font-family:var(--sans);font-size:14.5px;font-weight:700;letter-spacing:-.01em;cursor:pointer; background:#fff;color:var(--hero-c);border:1px solid #fff;border-radius:12px;padding:13px 22px; text-decoration:none;display:inline-flex;align-items:center;gap:9px;box-shadow:var(--sh-2); transition:transform .16s var(--ease),box-shadow .16s,background .16s }
.cr .btn:hover { transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(0,0,0,.4) }
.cr .btn:active { transform:none }
.cr .btn-glass { background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.24); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:none;font-weight:600 }
.cr .btn-glass:hover { background:rgba(255,255,255,.18) }
.cr .btn-sm { font-size:13.5px;padding:9px 16px;border-radius:10px }
.cr .shots { flex:0 0 400px;position:relative;align-self:center }
.cr .shots::before { content:"";position:absolute;left:50%;top:48%;width:118%;height:104%; transform:translate(-50%,-50%);pointer-events:none; background:radial-gradient(closest-side,rgba(255,255,255,.16),rgba(255,255,255,0) 72%) }
.cr .art { position:relative;display:block;width:100%;height:auto;max-height:420px; object-fit:contain;filter:drop-shadow(0 26px 42px rgba(0,0,0,.42)) }
.cr .shots.noart .art { display:none }
.cr .art-ph { display:none;position:relative;border:1px dashed rgba(255,255,255,.32);border-radius:16px; padding:34px 20px;text-align:center;font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.7) }
.cr .shots.noart .art-ph { display:block }
.cr .art-ph b { display:block;color:#fff;font-size:13.5px;font-weight:700;margin-bottom:5px }
.cr .art-ph code { font-size:11.5px;background:rgba(255,255,255,.14);border-radius:6px;padding:2px 6px }
.cr .art-wrap { position:relative }
.cr .badge { position:absolute;right:2px;bottom:-12px;background:#fff;border-radius:15px;padding:11px 15px; box-shadow:0 20px 40px -18px rgba(0,0,0,.5);display:flex;align-items:center;gap:11px }
.cr .badge b { margin-right:2px;font-size:26px;font-weight:800;letter-spacing:-.03em;color:var(--mid); line-height:1;font-variant-numeric:tabular-nums }
.cr .badge span { font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase; color:var(--ink-3);line-height:1.3 }
.cr .art-cap { margin:30px 0 0;padding-left:2px;font-size:12.5px;line-height:1.5; color:rgba(255,255,255,.5) }
.cr .stats { display:flex;gap:12px;flex-wrap:wrap;margin-top:44px }
.cr .stat { flex:1 1 168px;min-width:0;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16); border-radius:15px;padding:14px 16px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px) }
.cr .stat dt { font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:rgba(255,255,255,.55);margin:0 }
.cr .stat dd { margin:6px 0 0;font-size:19px;font-weight:800;letter-spacing:-.03em;color:#fff }
.cr .stat dd small { display:block;font-size:12px;font-weight:500;letter-spacing:0; color:rgba(255,255,255,.55);margin-top:3px }
.cr .nav { position:sticky;top:0;z-index:50;background:rgba(250,249,252,.9);border-bottom:1px solid var(--line); -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px) }
.cr .nav-in { display:flex;align-items:center;gap:8px;padding-top:11px;padding-bottom:11px;overflow-x:auto; scrollbar-width:none;-ms-overflow-style:none }
.cr .nav-in::-webkit-scrollbar { display:none }
.cr .nav a { flex:none;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600; color:var(--ink-2);text-decoration:none;padding:8px 13px;border-radius:99px;border:1px solid transparent; transition:all .16s var(--ease) }
.cr .nav a:hover { background:var(--surface);border-color:var(--line);color:var(--ink) }
.cr .nav a.on { background:var(--accent);border-color:var(--accent);color:#fff }
.cr .nav a.on svg { color:#fff }
.cr .nav a svg { color:var(--ink-4) }
.cr .nav .spacer { flex:1 1 auto }
.cr .nav .go { flex:none;background:var(--accent);color:#fff;border:0;border-radius:99px;font-size:13px; font-weight:700;padding:9px 16px;text-decoration:none }
@media (max-width:900px) {
  .cr .nav .go, .cr .nav .spacer { display:none }
}
.cr .cols { display:flex;gap:56px;align-items:flex-start;padding-top:40px }
.cr .main { flex:1 1 auto;min-width:0;max-width:780px }
.cr .side { flex:0 0 312px;position:sticky;top:76px }
@media (max-width:1040px) {
  .cr .cols { flex-direction:column;gap:34px }
  /*  align-items must go back to stretch here, and this is the single most
      important line in the mobile stylesheet.

      The desktop rule above sets align-items:flex-start so the sidebar sits at
      the top of the row instead of stretching to the main column's height.
      Correct there. But flex-start means "do not stretch on the CROSS axis",
      and switching to flex-direction:column swaps which axis that is - so the
      same declaration silently stops both children filling the WIDTH and
      makes them shrink-to-fit instead.

      Measured on a 390px iPhone: .main came out 482px wide and the document
      scrolled sideways by 132px, on every course and career page. Not a
      squeezed layout - a page you can swipe off the edge of. */
  .cr .cols { align-items:stretch }
  .cr .main, .cr .side { width:100%; min-width:0; max-width:none }

  .cr .side { position:static;flex:1 1 auto;width:100% }
}
.cr section { padding:0 0 40px;scroll-margin-top:82px }
.cr section + section { border-top:1px solid var(--line-2);padding-top:38px }
.cr .sec-head { display:flex;align-items:center;gap:14px;margin-bottom:16px }
.cr .sec-ico { width:42px;height:42px;border-radius:13px;flex:none;display:flex;align-items:center; justify-content:center;background:var(--cs,var(--surface-2));color:var(--c,var(--accent)); border:1px solid var(--c,var(--line));box-shadow:var(--sh-1) }
.cr .sec-ico { border-color:transparent }
.cr h2 { font-size:26px;font-weight:800;letter-spacing:-.034em;margin:0;line-height:1.2 }
.cr .sec-head p { margin:3px 0 0;font-size:13.5px;color:var(--ink-3);font-weight:500 }
.cr h3 { font-size:17px;font-weight:700;letter-spacing:-.02em;margin:26px 0 8px }
.cr p { margin:0 0 15px }
.cr .lead { font-size:17px;color:var(--ink-2) }
.cr ul.plain { list-style:none;margin:0 0 16px;padding:0 }
.cr ul.plain li { position:relative;padding:11px 0 11px 30px;border-bottom:1px solid var(--line-2) }
.cr ul.plain li:last-child { border-bottom:0 }
.cr ul.plain li::before { content:"";position:absolute;left:6px;top:19px;width:7px;height:7px; border-radius:50%;background:var(--c,var(--accent));opacity:.5 }
.cr ul.plain b { font-weight:700 }
.cr .note { border-radius:16px;padding:17px 19px 17px 19px;margin:0 0 18px;font-size:14.5px; color:var(--ink-2);border:1px solid var(--line);background:var(--surface);box-shadow:var(--sh-1); display:flex;gap:13px }
.cr .note b { color:var(--ink);font-weight:700 }
.cr .note .ico { width:24px;height:24px;flex:none;color:var(--accent);margin-top:1px }
.cr .note.accent { background:var(--accent-soft);border-color:var(--accent-line) }
.cr .note.warm { background:#fdf6e7;border-color:#eddfc2 }
.cr .note.warm .ico { color:var(--mid) }
.cr .note.hard { background:#fbeeec;border-color:#eed6d2 }
.cr .note.hard .ico { color:var(--bad) }
.cr .tbl { border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface); box-shadow:var(--sh-1);margin:0 0 18px }
.cr table { width:100%;border-collapse:collapse;font-size:14.5px }
.cr th, .cr td { text-align:left;padding:13px 16px;border-bottom:1px solid var(--line-2);vertical-align:top }
.cr tbody tr:last-child th, .cr tbody tr:last-child td { border-bottom:0 }
.cr tbody tr { transition:background .14s }
.cr tbody tr:hover { background:var(--surface-2) }
.cr thead th { font-size:11px;font-weight:800;color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase; background:var(--surface-2) }
.cr tbody th { font-weight:700 }
.cr td.n { font-variant-numeric:tabular-nums;white-space:nowrap }
.cr .road { position:relative;padding-left:38px;margin-bottom:6px }
.cr .road::before { content:"";position:absolute;left:13px;top:8px;bottom:28px;width:2px; background:linear-gradient(var(--c-teal),var(--line)) }
.cr .step { position:relative;padding:0 0 22px }
.cr .step .dot { position:absolute;left:-32px;top:2px;width:26px;height:26px;border-radius:50%; background:var(--surface);border:2px solid var(--c-teal);color:var(--c-teal);display:flex; align-items:center;justify-content:center;font-size:12px;font-weight:800;box-shadow:0 0 0 4px var(--bg) }
.cr .step.opt .dot { border-color:var(--ink-4);color:var(--ink-4) }
.cr .step .when { font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3) }
.cr .step h4 { margin:3px 0 5px;font-size:16.5px;font-weight:700;letter-spacing:-.02em }
.cr .step p { margin:0;font-size:14.5px;color:var(--ink-2) }
.cr .tag { display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase; padding:3px 9px;border-radius:99px;background:var(--surface-2);color:var(--ink-3); border:1px solid var(--line);margin-left:8px;vertical-align:2px }
.cr .tag.req { background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line) }
.cr .roles { display:flex;flex-wrap:wrap;gap:12px }
.cr .role { flex:1 1 214px;min-width:0;background:var(--surface);border:1px solid var(--line); border-radius:15px;padding:15px 16px;box-shadow:var(--sh-1); transition:transform .18s var(--ease),box-shadow .18s,border-color .18s }
.cr .role:hover { transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--ink-4) }
.cr .role .t { font-size:15px;font-weight:700;letter-spacing:-.02em;display:flex;align-items:center;gap:8px }
.cr .role .t i { width:8px;height:8px;border-radius:50%;background:var(--c);flex:none }
.cr .role .d { font-size:13px;color:var(--ink-2);margin-top:5px }
.cr .role .p { font-size:12px;font-weight:700;color:var(--ink-3);margin-top:9px;font-variant-numeric:tabular-nums }
.cr .tabs { display:flex;gap:7px;flex-wrap:wrap;margin:0 0 14px }
.cr .tabs button { font-family:var(--sans);font-size:13.5px;font-weight:700;cursor:pointer; background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:9px 16px; color:var(--ink-2);transition:all .16s var(--ease) }
.cr .tabs button:hover { border-color:var(--ink-4);color:var(--ink) }
.cr .tabs button[aria-selected="true"] { background:var(--c-green);border-color:var(--c-green);color:#fff }
.cr .panel[hidden] { display:none }
.cr .box { border:1px solid var(--line);border-radius:16px;background:var(--surface);margin-bottom:14px; box-shadow:var(--sh-1);overflow:hidden }
.cr .box-h { padding:14px 17px;border-bottom:1px solid var(--line-2);font-size:12.5px;font-weight:800; letter-spacing:.03em;display:flex;align-items:center;gap:9px }
.cr .box-h svg { color:var(--ink-4) }
.cr .box-h em { font-style:normal;font-weight:700;color:var(--ink-4);font-size:11.5px;margin-left:auto }
.cr .ring-row { display:flex;align-items:center;gap:16px;padding:17px }
.cr .ring { position:relative;width:72px;height:72px;flex:none }
.cr .ring svg { transform:rotate(-90deg) }
.cr .ring .val { position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center; justify-content:center;font-size:21px;font-weight:800;letter-spacing:-.03em;color:var(--mid); font-variant-numeric:tabular-nums }
.cr .ring-txt { font-size:13.5px;color:var(--ink-2);line-height:1.45 }
.cr .ring-txt b { display:block;color:var(--ink);font-weight:800;font-size:14.5px }
.cr .kv { display:flex;justify-content:space-between;gap:12px;padding:10px 17px; border-bottom:1px solid var(--line-2);font-size:13.5px }
.cr .kv:last-child { border-bottom:0 }
.cr .kv span { color:var(--ink-3);flex:none }
.cr .kv b { font-weight:700;text-align:right }
.cr .meter { padding:11px 17px;border-bottom:1px solid var(--line-2) }
.cr .meter:last-child { border-bottom:0 }
.cr .meter-h { display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13.5px; margin-bottom:7px }
.cr .meter-h b { font-weight:700 }
.cr .meter-h em { font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.06em; text-transform:uppercase;color:var(--accent) }
.cr .meter-h em.soft { color:var(--ink-4) }
.cr .track { height:7px;border-radius:99px;background:var(--line-2);overflow:hidden }
.cr .track i { display:block;height:7px;border-radius:99px;background:var(--accent);width:0; transition:width .9s var(--ease) }
.cr .track i.soft { background:var(--ink-4) }
.cr .track i.warn { background:var(--mid) }
.cr .foot-note { padding:12px 17px;font-size:12px;color:var(--ink-4);line-height:1.5 }
.cr .links { list-style:none;margin:0;padding:0 }
.cr .links li { border-bottom:1px solid var(--line-2) }
.cr .links li:last-child { border-bottom:0 }
.cr .links a { display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 17px; font-size:13.5px;font-weight:600;text-decoration:none;color:var(--ink);transition:all .14s }
.cr .links a:hover { background:var(--surface-2);padding-left:20px }
.cr .links em { font-style:normal;color:var(--ink-3);font-weight:700;font-variant-numeric:tabular-nums }
.cr .tags { display:flex;flex-wrap:wrap;gap:7px;padding:15px 17px }
.cr .tags span { font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:99px; background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2) }
.cr .faq { border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface); box-shadow:var(--sh-1) }
.cr .faq details { border-top:1px solid var(--line-2) }
.cr .faq details:first-child { border-top:0 }
.cr .faq summary { cursor:pointer;padding:16px 50px 16px 18px;font-weight:700;font-size:15.5px; letter-spacing:-.018em;position:relative;list-style:none }
.cr .faq summary::-webkit-details-marker { display:none }
.cr .faq summary::after { content:"";position:absolute;right:20px;top:23px;width:9px;height:9px; border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg); transition:transform .2s var(--ease) }
.cr .faq details[open] summary { color:var(--accent) }
.cr .faq details[open] summary::after { transform:rotate(-135deg) }
.cr .faq summary:hover { background:var(--surface-2) }
.cr .faq .a { padding:0 18px 18px;color:var(--ink-2);font-size:14.5px }
.cr .faq .a p:last-child { margin-bottom:0 }
.cr .rel { display:flex;flex-wrap:wrap;gap:13px }
.cr .rel a { flex:1 1 210px;min-width:0;background:var(--surface);border:1px solid var(--line); border-radius:15px;padding:16px 17px;text-decoration:none;color:var(--ink);box-shadow:var(--sh-1); transition:transform .18s var(--ease),box-shadow .18s,border-color .18s }
.cr .rel a:hover { transform:translateY(-3px);border-color:var(--ink-4);box-shadow:var(--sh-2) }
.cr .rel .t { font-size:15.5px;font-weight:700;letter-spacing:-.02em }
.cr .rel .m { font-size:13px;color:var(--ink-3);margin-top:4px }
.cr .rel .s { font-size:12.5px;font-weight:700;color:var(--ink-3);margin-top:12px; font-variant-numeric:tabular-nums }
.cr .next { position:relative;overflow:hidden;color:#fff;border-radius:var(--r);padding:30px 32px;margin:10px 0 0; background:linear-gradient(150deg,var(--hero-a),var(--hero-b) 70%) }
.cr .next::before { content:"";position:absolute;inset:0;opacity:.4; background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 1px,transparent 1px 14px) }
.cr .next > * { position:relative }
.cr .next .eyebrow { font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase; color:rgba(255,255,255,.55) }
.cr .next h2 { color:#fff;margin:11px 0 7px;font-size:25px }
.cr .next p { color:rgba(255,255,255,.68);margin:0 0 20px;max-width:52ch;font-size:15px }
.cr .next-row { display:flex;gap:11px;flex-wrap:wrap }
.cr .next-row a { flex:1 1 200px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18); border-radius:13px;padding:15px 17px;text-decoration:none;color:#fff;transition:all .16s var(--ease) }
.cr .next-row a:hover { background:rgba(255,255,255,.18);transform:translateY(-2px) }
.cr .next-row .t { font-size:14.5px;font-weight:700 }
.cr .next-row .m { font-size:12.5px;color:rgba(255,255,255,.62);margin-top:3px }
.cr footer.foot { margin-top:32px;border-top:1px solid var(--line);background:var(--surface-2); padding:26px 0 56px;font-size:13.5px;color:var(--ink-3) }
.cr footer.foot b { color:var(--ink-2);font-weight:700 }
.cr .rv { opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease) }
.cr .rv.in { opacity:1;transform:none }
@media (max-width:940px) {
  .cr .hero-grid { flex-direction:column;gap:56px;padding-bottom:0 }

  /*  The stacking fix belongs HERE, at the breakpoint where the hero actually
      stacks - not at 560 where it was first written.

      .hero-copy carries flex-grow:1 so it takes the spare WIDTH on desktop,
      where the flex axis is horizontal. Turning the container to
      flex-direction:column makes that same declaration take spare HEIGHT
      instead, so the text column silently stretches past its own last child
      and shoves the picture down by ~25px. That happens from 940px down, and
      putting the cure at 560 left every tablet with the symptom.

      The last block in the column also keeps its own bottom margin - on the
      career page that is the .stats row at 15.5px - which is fine between
      siblings and dead space at the end. */
  .cr .hero-grid > * { flex:0 0 auto }
  .cr .hero-copy > :last-child { margin-bottom:0 }

  .cr .shots { flex:1 1 auto;width:100%;max-width:400px;order:2;align-self:flex-start }
  .cr .art { max-height:320px }
  .cr .art-wrap.cut { min-height:320px }
  .cr .badge { right:2px;bottom:-12px }
  .cr .stats { margin-top:34px }
}
@media (max-width:760px) {
  .cr .wrap { padding:0 18px }
  .cr h1 { font-size:33px }
  .cr .sub { font-size:16px }
  .cr .stat { flex:1 1 calc(50% - 6px) }
  .cr .cta .btn { flex:1 1 100%;justify-content:center }
  .cr .sec-ico { width:36px;height:36px;border-radius:11px }
  .cr h2 { font-size:22px }
  .cr table { table-layout:fixed }
  .cr th, .cr td { padding:11px 12px;font-size:13.5px }
  .cr td.n { white-space:normal }
  .cr thead th { font-size:10.5px }
  .cr section { scroll-margin-top:68px }
  .cr .next { padding:24px 20px }
}

/* ======================================================================================
   Site integration. Everything above is the design as supplied; everything below is what
   it takes to live inside this site rather than in its own tab.
   ====================================================================================== */

.cr {
  /* Height of the site header. The nav docks below it and anchors clear both. */
  --cr-head: 96px;
  --cr-nav: 54px;
}

/* The header collapses on scroll; :has lets the nav follow it with no script of its own.
   Browsers without :has keep the taller offset, which is the safe direction to be wrong
   in - a gap looks fine, an overlap does not. */
body:has(.icg-top.is-compact) .cr { --cr-head: 60px; }

.cr .nav {
  top: var(--cr-head);
  /* Below the site header's 50, so it slides under rather than over. */
  z-index: 40;
}

.cr section { scroll-margin-top: calc(var(--cr-head) + var(--cr-nav) + 12px); }
.cr .side { top: calc(var(--cr-head) + var(--cr-nav) + 16px); }

@media (max-width: 760px) {
  .cr section { scroll-margin-top: calc(var(--cr-head) + var(--cr-nav)); }
}

/* The design shipped a scroll progress bar pinned to top:0, which is where the site
   header already is. Never rendered; the rule exists so a stray copy cannot appear. */
.cr .prog { display: none; }

/* ---------------------------------------------------------------- generated artwork

   Same two images as the course page, used differently. The card is a transparent
   cut-out, so it needs no plate - just a shadow tight enough to separate the line work
   from the gradient and wide enough to seat it on the page. */

/* Reserved here rather than by width/height attributes on the img: the composer crops the
   card to its subject, so it has no fixed ratio to declare in the markup. min-height holds
   the row's height before the picture lands, which is what stops the layout shifting. */
.cr .art-wrap.cut { min-height: 380px; }
.cr .art-wrap.cut .art {
  /* 460 -> 380, matching the course card. The picture is what sets the hero's height, and
     a card much taller than the words beside it leaves dead space above and below once
     align-items centres the two columns. */
  max-height: 380px;
  filter:
    drop-shadow(0 2px 3px rgba(8, 18, 24, .30))
    drop-shadow(0 30px 46px rgba(0, 0, 0, .42));
}

/* The placeholder is a design-time affordance for a missing PNG. This page renders
   nothing at all when there is no artwork, so it must never appear. */
.cr .art-ph { display: none !important; }

/* ---------------------------------------------------------------- salary tabs

   The design hard-coded the selected tab to --c-green because its sample section was
   green. Bound to the section's own colour instead, so the tabs match whatever the pay
   section is themed as. */

.cr .tabs button[aria-selected="true"] {
  background: var(--c, var(--accent));
  border-color: var(--c, var(--accent));
  color: #fff;
}

/* ---------------------------------------------------------------- honest empties

   A career with no salary rows, no roadmap and no roles is a real state on this site,
   not a bug. Sections simply are not rendered - but the sidebar boxes that remain should
   not collapse to a bare heading, so a box with nothing under it says so. */

.cr .box .empty {
  padding: 14px 17px;
  font-size: 13px;
  color: var(--ink-3);
}


/* ======================================================================================
   The banner above the footer.

   Unscoped on purpose: the footer sits outside .cr, and this stylesheet only loads on the
   career page, which is the only page that supplies a footer image here. The layout
   declares a 1600x900 fallback for the img element; career banners are hand-uploaded at
   whatever size the editor had, so the ratio is pinned in CSS rather than trusted.
   ====================================================================================== */

/* Aligned to the content column, and never cropped.

   Three things were wanted here and only two of them can be true at once: full width,
   short, and the whole picture. The banner is a fixed 16:9 file, so at the content width
   its height is decided for you - about 645px at a 1200px wrap. Cropping was the way to
   buy height back, and it cost the top of the subject's head.

   So the crop is gone. The whole frame shows, edge to edge with the section above it, and
   the height is whatever 16:9 gives. That is still well down from where this started: the
   first version ran the full viewport width and came to nearly 800px.

   If you do want it inset and shorter, the lever is max-width below - 1000px brings it to
   about 560px tall, at the cost of a visible margin against the content above. Height and
   crop cannot both be free.

   Search is unaffected either way. The file is the full 1600x900 - that is what the image
   sitemap lists, what og:image points at, and what Google Images shows. */

.footer-visual-page .footer-visual-frame {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 26px;
}

.footer-visual-page img {
  display: block;
  width: 100%;
  height: auto;

  /* No aspect-ratio here, deliberately - see the matching note in course-detail.css.
     The ratio comes from the img's own width/height attributes so a library holding both
     980-tall and 900-tall banners renders each one correctly. */
  border-radius: 16px;
}

@media (max-width: 760px) {
  .footer-visual-page .footer-visual-frame { padding-inline: 18px; }
}

/* ======================================================================================
   Motion and print.

   Both were dropped by the scoping pass and restored here by hand, because both need
   selectors the scoper is not allowed to touch: `html` for scroll-behavior, which only
   has any effect on the scrolling element itself, and a universal reset that has to
   reach the reveal animations without being rewritten into something narrower.
   ====================================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cr *,
  .cr *::before,
  .cr *::after { transition: none !important; animation: none !important; }
  .cr .rv { opacity: 1; transform: none; }
}

@media print {
  .cr .nav,
  .cr .cta,
  .cr .side,
  .cr .crumbs,
  .cr .next,
  .cr .tabs { display: none; }
  /* Every pay panel prints, not just the selected one - on paper there is nothing to
     click, so a hidden sector is simply missing data. */
  .cr .panel[hidden] { display: block !important; }
  .cr .cols { display: block; }
  .cr .main { max-width: none; }
  .cr .hero { background: #fff; color: #000; }
  .cr .hero::before { display: none; }
  .cr h1 { color: #000; }
  .cr .sub { color: #333; }
  .cr .stat { border-color: #ccc; }
  .cr .stat dt, .cr .stat dd { color: #000; }
}


/* ======================================================================================
   Phones: wide tables scroll instead of being crushed.

   Both designs switch to table-layout:fixed below 760px. That does stop a table pushing
   the page sideways - but it does it by forcing every column into an equal share of a
   360px screen, and a four-column eligibility table then gives "Physics, Chemistry,
   Mathematics" about 80 pixels to live in, which wraps to eight lines.

   Scrolling the table is the honest answer: columns keep a readable width, the reader
   swipes the table, and the PAGE still never moves sideways - which is the thing that
   actually breaks a mobile layout.

   overflow-x rather than overflow:hidden, so the rounded corners survive.
   ====================================================================================== */

@media (max-width: 760px) {
  .cr .tbl {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Beats the design's table-layout:fixed on specificity and on order, so the columns
     size to their content again and there is something to scroll. */
  .cr .tbl table {
    table-layout: auto;
    min-width: 30rem;
  }
}


/* ============================================================================
   Phones. Everything above stops at 760px, which is a tablet - a 390px iPhone
   was getting rules written for a screen twice its width.

   Measured on the live page at 390px before writing any of this, so each rule
   below answers something real rather than something imagined.
   ========================================================================== */
@media (max-width:560px) {

  /*  The image sat 63px below the last button. Two separate causes, and the
      second one is the interesting half.

      The obvious half is the 40px flex gap: right for two columns side by
      side on a desktop, just a hole to scroll past once they stack.

      The other 25px was .hero-copy growing. It carries flex-grow:1 so that it
      takes the spare WIDTH on desktop, where the row axis is horizontal. Turn
      the container to flex-direction:column and that same declaration starts
      taking spare HEIGHT instead - so the text column silently stretched 25px
      past its own last child, and the picture was pushed down by it.

      flex:0 0 auto stops the growing. Measured after: an exact 16px gap, and
      the hero down from 1028px to 875px on a 390px screen. */
  .cr .hero-grid { gap:16px }


  /*  Micro-type floor.

      The eyebrows, stat labels and column headings are 10.5px. That reads as
      deliberate restraint on a desktop monitor and as an accessibility failure
      on a phone: Google's mobile usability check flags anything under 12px as
      "text too small to read", and these are the labels that tell a reader
      what the number beside them MEANS. Nudged to 11.5px and given back some
      letter-spacing, which is what actually makes small caps legible. */
  .cr .kind,
  .cr .sec-no,
  .cr .stamp span,
  .cr .stat dt,
  .cr .badge span,
  .cr .box-h em,
  .cr .tag,
  .cr thead th,
  .cr .meter-h em,
  .cr .step .when,
  .cr .next .eyebrow { font-size:11.5px }
  .cr .kind { letter-spacing:.1em; padding:7px 11px }

  /*  Breadcrumbs were 17px tall - three links a thumb cannot reliably hit,
      sitting side by side. Padding rather than a height, so the text stays
      where it is and only the target grows. */
  .cr .crumbs { font-size:12.5px; line-height:1.5 }
  .cr .crumbs a { display:inline-block; padding:4px 0; min-height:24px }
  .cr .crumbs span { padding:0 5px }

  /*  The hero was 1028px tall on an 844px screen, so the entire first view was
      headline and picture and a reader had to scroll before the page said
      anything. Tightening the padding and the art gets the first section above
      the fold on a normal phone. */
  .cr .hero { padding-bottom:26px }
  .cr .hero h1 { font-size:clamp(25px,7.4vw,31px); line-height:1.16 }
  .cr .art,
  .cr .art-wrap.cut .art { max-height:250px }
  .cr .art-wrap.cut { min-height:250px }

  /*  Tables keep the horizontal scroller the 760px block already gives them -
      a four-column table cannot become 354px wide and stay readable. What is
      added here is fitting one more column in before the scroll starts:
      smaller type and tighter cell padding buy roughly 60px, which on these
      tables is the difference between swiping and not.

      No fade mask on the scroller, tempting as it is: .tbl is a bordered card
      with a 14px radius, and a mask would fade out its own right border and
      corner. A hint that looks like a rendering fault is worse than no hint. */
  .cr table { font-size:13.5px }
  .cr td, .cr th { padding-left:11px; padding-right:11px }

  /*  Anything that was a row of equal columns becomes one column. Two 160px
      cards side by side is worse than one readable card. */
  .cr .ribbon { gap:10px }
  .cr .ribbon dt { font-size:11.5px }
}

/* Small phones - 360px and the 320px iPhone SE still in the logs. */
@media (max-width:380px) {
  .cr .hero h1 { font-size:23.5px }
  .cr .art,
  .cr .art-wrap.cut .art { max-height:210px }
  .cr .art-wrap.cut { min-height:210px }
  .cr .crumbs { font-size:12px }
  .cr table { font-size:13px }
}


/* ============================================================================
   SECTION COLOUR — using the palette that was already there.

   Every <section> on this page is rendered with style="--c:...;--cs:..." from
   Palette() in Details.cshtml: a strong colour and its soft tint, chosen per
   section type. That system was built, wired up, and then used in exactly one
   place - an 8px dot inside a role card. Everything else painted with the
   global --accent, which on this page is a slate grey-blue. Hence a page with
   a full palette that reads as one flat colour.

   Nothing below invents a new colour. It just spends the ones already being
   set, so "Skills" is green, "The honest part" is rust, "Getting in" is amber,
   and a reader can tell where they are on the page without reading a heading.

   Gradients use color-mix with a solid fallback: a browser that does not
   understand color-mix drops the whole declaration and keeps the flat colour
   above it, so the worst case is what the page does today.

   Self-contained on purpose - delete this block and the page is exactly as it
   was.
   ========================================================================== */

/* --- the section header carries its own colour ------------------------- */

.cr .sec-head {
  padding-bottom: 14px;
  border-bottom: 2px solid var(--cs, var(--line-2));
}

/* A short bar in the section's colour, sitting on the soft rule. Reads as a
   tab for the section rather than as a divider between two of them. */
.cr .sec-head { position: relative; }
.cr .sec-head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 56px;
  height: 2px;
  border-radius: 2px;
  background: var(--c, var(--accent));
}

/* The icon tile picks up a little depth in its own colour rather than the
   generic shadow every card on the page shares. */
.cr .sec-ico {
  box-shadow: 0 4px 12px -6px var(--c, var(--accent));
}

/* --- meters ------------------------------------------------------------- */

/* The skill and reality bars were all the same slate. They are the most
   scannable thing in a section and they were carrying no information beyond
   their length. */
.cr .track i {
  background: var(--c, var(--accent));
  background: linear-gradient(90deg,
              color-mix(in srgb, var(--c, var(--accent)) 72%, #fff),
              var(--c, var(--accent)));
}
.cr .meter-h em { color: var(--c, var(--accent)); }

/* Deliberately NOT recoloured: these two say "this one is different", and a
   soft or warning bar that took the section colour would stop saying it. */
.cr .track i.soft { background: var(--ink-4); }
.cr .track i.warn { background: var(--mid); }

/* --- callouts ----------------------------------------------------------- */

/* Tinted in the section colour with a bar down the left edge. The .warm and
   .hard variants keep their own amber and red, because those are semantic -
   they mean "careful" and "hard", not "this is the skills section". */
.cr .note:not(.warm):not(.hard):not(.accent) {
  background: var(--cs, var(--surface));
  border-color: color-mix(in srgb, var(--c, var(--accent)) 22%, transparent);
  border-left: 4px solid var(--c, var(--accent));
  padding-left: 17px;
}
.cr .note:not(.warm):not(.hard):not(.accent) b { color: var(--c, var(--ink)); }
.cr .note .ico { color: var(--c, var(--accent)); }

/* --- panel and table headers ------------------------------------------- */

.cr .box-h {
  background: var(--cs, transparent);
  border-bottom-color: color-mix(in srgb, var(--c, var(--accent)) 18%, transparent);
}
.cr .box-h b { color: var(--c, var(--ink)); }
.cr .box-h svg { color: var(--c, var(--ink-4)); }

.cr .tbl thead th {
  background: var(--cs, var(--surface-2));
  color: color-mix(in srgb, var(--c, var(--ink-3)) 80%, #000);
}

/* --- roadmap ------------------------------------------------------------ */

/* The rail and its dots were hardcoded to teal regardless of which section
   they appeared in. */
.cr .road::before {
  background: linear-gradient(var(--c, var(--c-teal)), var(--line));
}
.cr .step .dot {
  border-color: var(--c, var(--c-teal));
  color: var(--c, var(--c-teal));
}
.cr .step.opt .dot { border-color: var(--ink-4); color: var(--ink-4); }

/* --- small type --------------------------------------------------------- */

.cr .tag:not(.req) {
  background: var(--cs, var(--surface-2));
  color: color-mix(in srgb, var(--c, var(--ink-3)) 78%, #000);
  border-color: color-mix(in srgb, var(--c, var(--accent)) 20%, transparent);
}

/* Contrast fix, not a colour change.
   --ink-4 is #b3b8bd, which on white is about 2.2:1 - well under the 4.5:1
   minimum, and this is the "How to build it" line, the most useful sentence
   in the skills block. It was the thinnest, palest text on the page. */
.cr .foot-note { color: var(--ink-2); font-size: 12.5px; }
.cr .foot-note b { color: var(--c, var(--ink)); font-weight: 700; }

/* --- the closing band --------------------------------------------------- */

/* The one place a real gradient earns its keep: the end of the page, where
   there is nothing left to compete with it. */
.cr .next {
  background: linear-gradient(150deg, var(--hero-a), var(--hero-b) 62%, var(--hero-c));
}

/* ========================================================================
   SECTION COLOUR - PART 2: SURFACES
   ========================================================================

   Part 1 coloured the *lines*: headings, rules, bars, dots, left borders.
   This part colours the *panels* - the boxes, role cards and roadmap steps
   themselves - which is what makes the reference page read as clean rather
   than merely decorated.

   The pattern, which is the whole idea in one sentence: a card takes a very
   faint wash of its own colour, and the rows inside it stay pure white. The
   white rows are what keep it legible; a tinted card full of tinted rows is
   the muddy version everyone ends up with.

   Two rules of thumb held throughout:

     - Tints are derived from --c, never from --cs.
       --cs is the section's tint, set once on the <section>. But a .role
       card sets its OWN --c inline (each role gets a colour from the
       rotation) and does not set --cs, so it inherits the section's. Tinting
       a role card from --cs produced an indigo card sitting on a pink
       background - border and title saying one thing, the surface behind
       them saying another. color-mix from --c always agrees with whatever
       colour that element is actually using.

     - Every tinted background is declared twice.
       The first declaration is a flat colour a browser without color-mix()
       can use; the second is the mix. Old browsers drop the line they cannot
       parse and keep the first, so the page degrades to plain surfaces
       rather than to transparent ones.

   Percentages are low on purpose - 6-7% for a surface, 12-30% for a border.
   These are washes. Anything stronger and the body text loses contrast, and
   ten sections of strong tint is a fruit salad, not a design.
   -------------------------------------------------------------------- */

/* --- panels ------------------------------------------------------------- */

.cr .box {
  background: var(--cs, var(--surface));
  background: color-mix(in srgb, var(--c, var(--accent)) 7%, #fff);
  border-color: color-mix(in srgb, var(--c, var(--accent)) 26%, transparent);
}

/* Part 1 gave the panel header its own tint, which was right when the panel
   itself was white. Now that the panel is tinted, a second tint on top of it
   is the muddy thing this pass exists to avoid. */
.cr .box-h {
  background: transparent;
  border-bottom-color: color-mix(in srgb, var(--c, var(--accent)) 16%, transparent);
}

/* The rows inside a tinted panel go white and gain their own outline, so the
   panel reads as a container of items rather than a coloured slab of text.
   This is the single change that did the most for clarity. */
.cr .box .meter,
.cr .box .kv,
.cr .box .links a {
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--c, var(--accent)) 12%, transparent);
  border-radius: 11px;
  margin: 8px 12px;
  padding: 11px 13px;
}

/* --- role cards --------------------------------------------------------- */

/* Each card already carried its own --c inline. It was spending it on an 8px
   dot and nothing else. */
.cr .role {
  background: var(--cs, var(--surface));
  background: color-mix(in srgb, var(--c, var(--accent)) 7%, #fff);
  border-color: color-mix(in srgb, var(--c, var(--accent)) 30%, transparent);
}

/* Mixed toward black rather than used raw: several of the rotation colours
   are light enough that the title would sit near 3:1 on its own tint. */
.cr .role .t { color: color-mix(in srgb, var(--c, var(--accent)) 84%, #000); }

/* .pill is styled for the dark hero - white text on translucent white. Put
   one inside a light card, which _CareerSectionData does for step timings,
   and it disappears. This is the light-background version. */
.cr .rv .pill,
.cr .role .pill {
  background: var(--surface);
  color: color-mix(in srgb, var(--c, var(--accent)) 80%, #000);
  border: 1px solid color-mix(in srgb, var(--c, var(--accent)) 22%, transparent);
}

/* --- roadmap steps ------------------------------------------------------ */

/* Steps were bare text hanging off a rail. As cards they scan far better,
   and the numbered dot stays outside the card on the rail where it belongs. */
.cr .road .step {
  background: var(--cs, transparent);
  background: color-mix(in srgb, var(--c, var(--accent)) 6%, #fff);
  border: 1px solid color-mix(in srgb, var(--c, var(--accent)) 20%, transparent);
  border-radius: 14px;
  padding: 14px 16px 14px 18px;
  margin-bottom: 12px;
}

/* ========================================================================
   HERO SPEC TILES
   ========================================================================

   The tiles under the headline - "Route in", "Entrance", "Entry pay",
   "Experienced" - were four identical translucent-white rectangles. The card
   illustration beside them is full colour, so the left half of the hero read
   as a mono panel bolted onto a colour picture.

   Each tile now carries a gradient in its own hue, set as --sc by StatHue()
   in the view.

   Why a separate set of hues, and not the --c-* tokens the rest of the page
   uses: those are dark colours, chosen to be legible ON white. Over a dark
   hero at any workable opacity they lose their chroma and come back as grey.
   Tried and rejected: --c-teal (#0e7d76) and --c-green (#166b4a) at 38%
   produced two rectangles a person could not tell apart. Mixing them toward
   white first fixed the brightness and destroyed the saturation, which was
   worse - four pastel smudges.

   So these are lifted, saturated versions built for a dark ground. They are
   only ever used inside the hero. Nothing on the white part of the page
   should reach for them: at these values the contrast on white is nowhere
   near 4.5:1.
   -------------------------------------------------------------------- */

.cr {
  --h-teal:#3ad8cb; --h-violet:#b49bff; --h-gold:#f9c65f;
  /* Pushed yellow-green rather than blue-green on purpose: it shares a row with
     --h-teal whenever a career has no entrance exam, and a mint would have read
     as the same colour at a glance. */
  --h-green:#5fdc8f;
  --h-rose:#ff8fb0; --h-slate:#9fb4c4;
}

.cr .stat {
  /* Flat fallback first: a browser without color-mix() drops the two lines
     below and keeps the frosted white the tiles have always had, rather than
     falling through to transparent. */
  background: rgba(255,255,255,.09);
  background:
    linear-gradient(158deg,
      color-mix(in srgb, var(--sc, #fff) 26%, transparent) 0%,
      color-mix(in srgb, var(--sc, #fff) 4%, transparent) 76%),
    linear-gradient(rgba(255,255,255,.05), rgba(255,255,255,.05));
  border-color: color-mix(in srgb, var(--sc, #fff) 36%, transparent);

  /* A one-pixel lit top edge. It is what stops a translucent panel on a
     gradient from looking like a smudge on the background. */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}

/* The label was rgba(255,255,255,.55) - the palest thing in the hero. Its own
   hue at full strength is both brighter than that and does the labelling job,
   so the tile no longer needs the colour explained anywhere else. */
.cr .stat dt { color: var(--sc, #fff); opacity: .95; }

/* Print: the hero is forced to white paper further up this file, and a
   coloured wash over white would take the tile text with it. This block has
   to live at the end of the file - it is the same specificity as the rules
   above, so only source order decides it. */
@media print {
  .cr .stat { background: none; box-shadow: none; border-color: #ccc; }
  .cr .stat dt { color: #000; opacity: 1; }
}

/* ========================================================================
   HERO SPEC STRIP - FULL WIDTH ROW
   ========================================================================

   The strip moved out of the copy column and became a row of its own under
   the headline and the picture. Everything here follows from that.

   Why it was worth moving. Inside the left column the tiles were capped at
   roughly half the page: three of them shared 520px while a single picture
   had 400px to itself, so each tile was about 165px wide and "Earliest
   entry: Certificate. Also entered at: Certificate, Diploma. Direct entry."
   wrapped to five lines. The strip is the densest factual thing on the page
   and it was getting the narrowest space on it.

   Grid rather than flex. auto-fit with a 1fr maximum means the tiles always
   finish flush with the right edge whatever their number - two, three or
   four - instead of leaving a ragged gap when the count does not divide
   evenly. The 236px minimum is what decides when a row breaks, so the
   breakpoints below mostly do not need to.
   -------------------------------------------------------------------- */

.cr .stats {
  display: grid;
  /* 220 rather than 236 so that five tiles still make one row on a 1280 page.
     At 236 a fifth tile wrapped and then stretched to the full width on its
     own, which looks like a mistake rather than a layout. */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 38px;
}

.cr .stat {
  padding: 16px 18px;
  border-radius: 16px;

  /* A lit line along the top edge in the tile's own hue, over the general
     white highlight that was already there. It is the reference page's
     coloured card-top, adapted: on a dark ground a bright hairline reads as
     an accent where a solid bar would read as a heading. */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10),
              inset 0 2px 0 color-mix(in srgb, var(--sc, #fff) 55%, transparent);
}

/* Room to breathe now that a tile is 300px wide rather than 165px. */
.cr .stat dt { font-size: 11px; letter-spacing: .11em; }
.cr .stat dd { font-size: 21px; margin-top: 8px; }
.cr .stat dd small { font-size: 12.5px; margin-top: 5px; }

/* Two up on a tablet, one up on a phone. The grid would get there on its own
   from the 236px minimum; these just make the step deliberate rather than a
   side effect of where the text happens to wrap. */
@media (max-width: 900px) {
  .cr .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 30px; }
}
@media (max-width: 560px) {
  .cr .stats { grid-template-columns: 1fr; }
  .cr .stat { padding: 14px 16px; }
  .cr .stat dd { font-size: 19px; }
}

/* The wider page gives the reading column its 780px, and the picture column
   grows with it rather than leaving the extra space in the gutter. */
@media (min-width: 1100px) {
  .cr .shots { flex: 0 0 430px; }
}

/* --- the figure itself ---------------------------------------------------

   The value was plain white, which made every tile's most important line the
   one thing on it carrying no information about what kind of value it was.
   It now takes a bright wash of the tile's hue - so a pay figure reads as
   money, a qualification reads as a route - while staying near-white and
   well clear of the contrast floor on the graphite.

   Mixed 30% toward the hue and no further. Past about 40% the gold and the
   green start losing legibility at 21px, and this is the line a reader is
   scanning for. */
.cr .stat dd {
  color: #fff;
  color: color-mix(in srgb, var(--sc, #fff) 30%, #fff);
}

/* The note under the figure stays neutral. Two coloured lines in a tile of
   three is one too many, and this one is the qualifier, not the fact. */
.cr .stat dd small { color: rgba(255,255,255,.58); }

/* --- where the caption went ----------------------------------------------

   The work-setting line used to sit under the picture, first as loose text
   and then briefly as a panel. It is now a tile in the strip like the rest,
   because it is the same kind of fact as the others - where this work
   actually happens - and a fact of that kind reads better beside its
   siblings than alone under an image. .art-cap is no longer rendered. */

/* A tile whose value is a sentence rather than a figure. */
.cr .stat.long dd { font-size: 15px; line-height: 1.45; letter-spacing: -.01em; }

@media print {
  .cr .stat dd { color: #000; }
  .cr .stat dd small { color: #333; }
}

/* ========================================================================
   WORKING REALITY - one block, four rows
   ========================================================================

   A light blue panel holding four white rows. Label on the left, gauge and
   reading on the right.

   The version before this gave each rating its own tinted card - blue,
   green, amber, orange. Each card was defensible on its own and together
   they were four colours saying one thing each, so the section stopped
   reading as a single idea and started reading as four. One panel says
   "these four belong together" without spending a colour to say it, and it
   leaves the only colour in the block on the gauges, which are the part
   actually carrying a value.
   -------------------------------------------------------------------- */

.cr .rblock {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #cfe1fb;
  border-radius: 16px;
  background: linear-gradient(180deg, #f6faff 0%, #eef5ff 100%);
}

.cr .rrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 11px;
  background: #fff;
  border: 1px solid #e8eef7;
  box-shadow: 0 2px 8px rgba(31,41,55,.03);
}

/* --- label --------------------------------------------------------------- */

.cr .rr-ico {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #eef5ff;
  color: #3b82f6;
  border: 1px solid #dce9fd;
}
.cr .rr-ico svg { width: 15px; height: 15px; display: block; }

.cr .rr-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
}

/* --- the gauge ----------------------------------------------------------- */

.cr .rr-meter { flex: none; display: inline-flex; gap: 4px; }
.cr .rr-meter i {
  width: 26px;
  height: 7px;
  border-radius: 99px;
  background: #e4e8ee;
}
.cr .rr-meter i.on { background: #20a868; }

/* The pip the reading stops on. Amber marks where the scale reaches, so the
   eye lands on the value instead of counting blocks - and it is what keeps a
   row of green from reading as a progress bar that has not finished. */
.cr .rr-meter i.on.lead { background: #f3a712; }

/* --- the reading ---------------------------------------------------------

   Both kept neutral. The gauge is the coloured thing in this row; a coloured
   word beside it would be two things saying the same number. Fixed width on
   the word so the four rows line their readings up in a column rather than
   each starting wherever its own word happens to end. */

.cr .rr-word {
  flex: none;
  width: 72px;
  text-align: right;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #4b5563;
}

.cr .rr-score {
  flex: none;
  min-width: 42px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 99px;
  background: #f7f8fa;
  border: 1px solid #dfe3e8;
  color: #4f5663;
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Phones: label on its own line so the gauge is never squeezed. */
@media (max-width: 620px) {
  .cr .rrow { flex-wrap: wrap; gap: 9px 10px; }
  .cr .rr-label { flex: 1 1 calc(100% - 40px); }
  .cr .rr-meter { margin-left: 40px; }
  .cr .rr-meter i { width: 22px; }
  .cr .rr-word { width: auto; text-align: left; margin-left: auto; }
}

@media print {
  .cr .rblock { background: none; border-color: #ccc; }
  .cr .rrow { box-shadow: none; }
  .cr .rr-meter i { border: 1px solid #999; background: #fff; }
  .cr .rr-meter i.on { background: #666; }
  .cr .rr-meter i.on.lead { background: #333; }
}

/* ========================================================================
   THE PAPER SHOWS THROUGH
   ========================================================================

   The notebook grid and the red margin rule are not new here. They have
   always been on the page - icg-theme.css puts them on body::before and
   body::after, fixed, at z-index:-1, so every page in the site sits on
   them.

   The career page could not see them for one reason: .cr painted
   background:var(--bg) across the whole page. An opaque box at z-index 0
   covers anything at -1, so the paper, the grid and the rule were all
   there, behind an off-white sheet.

   Making .cr transparent is the whole fix. Nothing is redrawn and nothing
   is duplicated - which matters, because a second copy of the grid here
   would be a second place to change it and a guarantee the two would
   drift.

   What changes visually: the page ground goes from #f8f9fa (cool grey) to
   the site's --paper #fbfaf7 (warm off-white), which is what every other
   page already stands on. White cards and tinted panels are unaffected -
   they paint their own backgrounds and simply sit on the grid now, exactly
   as the untinted bands on the home page do.
   -------------------------------------------------------------------- */

.cr { background: transparent; }

/* The roadmap dot's halo punches the rail out from behind it, so it has to
   match whatever the dot is standing on. That used to be --bg; it is the
   paper now. Left as a literal fallback because --paper is defined in the
   theme, and this file should still look right if it is ever loaded on its
   own. */
.cr .step .dot { box-shadow: 0 0 0 4px var(--paper, #fbfaf7); }