/* MyRecruiter "My move" scroll film: [mr_my_move] (inc/mr-my-move.php). Ported from the approved mockup
   info/mockups/v3-c-glass/storyboard-m5.html (myrecruiter.co.uk repo). Every selector is scoped to .mr-mm. */
.mr-mm{--ink:#F5F5F7;--dim:rgba(245,245,247,.62);--amber:#F0A13A;--font:"Inter",system-ui,-apple-system,sans-serif;--ease:cubic-bezier(.42,0,.58,1);
  position:relative;width:100vw;margin-left:calc(50% - 50vw);background:#000;color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}
.mr-mm *{box-sizing:border-box}
.mr-mm p{margin:0;color:inherit;font-family:inherit}
.mr-mm .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.mr-mm-out{padding:96px 16px 112px;text-align:center}
.mr-mm-out h2{margin:0;color:#fff;font:800 clamp(36px,5vw,64px)/1.02 var(--font);letter-spacing:-.03em}
.mr-mm-out p{margin:16px auto 0;max-width:46ch;color:var(--dim);font-size:18px;line-height:1.5}
.mr-mm-out a{display:inline-flex;align-items:center;min-height:52px;margin-top:28px;padding:0 26px;border-radius:999px;background:var(--amber);color:#1C2A3B;font-weight:700;font-size:16px;text-decoration:none}
.mr-mm-out a:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* ---- 1. The cut-out, built the way Apple builds "M5. M5 Pro. M5 Max." (apple.com/uk/macbook-pro, .section-performance):
   the film plays underneath a full-screen BLACK sheet carrying WHITE words, and the sheet is set to mix-blend-mode:multiply,
   so black hides the film and white lets it through. Only the words are scaled (Apple: 400x -> 1x as you scroll; ours runs
   1x -> 400x), on a log curve so the zoom feels steady. The film never moves and is never swapped, so nothing can jump. ---- */
.mr-mm .cut-track{position:relative;height:1000vh}
.mr-mm .cut-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#000;isolation:isolate}
.mr-mm .cut-film{position:absolute;inset:0}
.mr-mm .cut-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
@media (max-aspect-ratio:1/1){.mr-mm .cut-film video{object-fit:contain}} /* phones: the whole frame, letterboxed in black, so no faces are cropped */
.mr-mm .cut-mask{position:absolute;inset:0;background:#000;mix-blend-mode:multiply;display:grid;place-items:center;pointer-events:none}
.mr-mm .cut-words{color:#fff;font:800 var(--fs,120px)/.92 var(--font);letter-spacing:-.035em;text-align:center;white-space:nowrap;
  transform-origin:var(--ox,50%) var(--oy,50%);transform:scale(var(--z,1))}
.mr-mm .cut-words span{display:block}
.mr-mm .hint{position:absolute;left:50%;bottom:9vh;transform:translateX(-50%);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);transition:opacity .3s}
/* ---- The search in the black (Hermon 10-09): MyRecruiter panels float in the dark around her, like the "Find MyRecruiter" tab
   of the Why section. Ahead of her: Legal + London -> agencies -> the 4.7 one; it dissolves as she walks into it. Behind her:
   that firm's recruiters -> ours (Maritime Insurance, 4.8) picked on the hair toss -> her reviews. Driven by the film's clock. ---- */
.mr-mm .walk-ui{position:absolute;inset:0;pointer-events:none;color:#fff}
.mr-mm .wu{position:absolute;top:50%;width:min(370px,28vw);padding:16px;border-radius:24px;opacity:0;
  background:rgba(20,26,36,.55);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.28),0 30px 60px -30px rgba(0,0,0,.9)}
.mr-mm .wu-a{left:5vw;translate:0 -58%}
.mr-mm .wu-b{right:4vw;translate:0 -50%}
.mr-mm .wu-head{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600}
.mr-mm .wu-head svg{width:22px;height:22px;flex:none}
.mr-mm .wu-head span{color:rgba(255,255,255,.65);font-weight:500}
.mr-mm .wu-label{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);margin:12px 0 6px}
.mr-mm .wu .wu-chips{display:flex;flex-wrap:wrap;gap:6px}
.mr-mm .wu .wu-chip{padding:6px 11px;border-radius:999px;font-size:13px;font-weight:600;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.35);transition:background .25s,color .25s,transform .25s}
.mr-mm .wu .wu-chip.on{background:var(--amber);color:#1C2A3B;transform:scale(1.06)}
.mr-mm .wu .wu-list{display:grid;gap:8px;margin-top:14px}
.mr-mm .wu .wu-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:9px 11px;border-radius:16px;background:rgba(255,255,255,.94);color:#1C2A3B;
  max-height:80px;overflow:hidden;transition:box-shadow .3s,max-height .45s,padding .45s,margin .45s,opacity .3s}
.mr-mm .wu .wu-mono{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:#C9CED6;font-weight:700;font-size:13px;flex:none}
.mr-mm .wu .wu-face{width:36px;height:36px;border-radius:50%;background:url(recruiter-face.jpg) 50% 50%/cover;flex:none}
.mr-mm .wu .wu-row b{display:block;font-size:14px;font-weight:600;line-height:1.2}.mr-mm .wu .wu-row small{display:block;font-size:12px;color:#4F5F70}
.mr-mm .wu .wu-sc{font-weight:700;font-size:15px;font-variant-numeric:tabular-nums;padding:4px 9px;border-radius:999px;background:rgba(28,42,59,.08);transition:background .3s}
.mr-mm .wu .wu-row.on{box-shadow:0 0 0 2px var(--amber)}
.mr-mm .wu .wu-row.on .wu-sc{background:var(--amber)}
.mr-mm .wu.picked .wu-row:not(.on){max-height:0;padding-block:0;margin-top:-8px;opacity:0 !important}
.mr-mm .wu .wu-rev{margin-top:8px;padding:11px 13px;border-radius:16px;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.3);font-size:14.5px;line-height:1.4}
.mr-mm .wu .wu-rev .wu-st{display:block;color:var(--amber);font-size:12px;letter-spacing:.12em;margin-bottom:3px}
.mr-mm .wu .wu-rev small{display:block;margin-top:4px;font-size:11.5px;color:rgba(255,255,255,.6)}
@media (max-aspect-ratio:1/1){ /* phones: the film is a strip across the middle, so the panels sit in the black above and below it */
  .mr-mm .wu{width:auto;left:12px;right:12px;padding:12px;border-radius:20px;translate:none}
  .mr-mm .wu-a{top:auto;bottom:calc(50% + 28.125vw + 10px)}
  .mr-mm .wu-b{top:calc(50% + 28.125vw + 10px)}
  .mr-mm .wu-head{font-size:13px}.mr-mm .wu-head svg{width:18px;height:18px}
  .mr-mm .wu-label{margin:6px 0 4px;font-size:10px}.mr-mm .wu .wu-chips{gap:4px}.mr-mm .wu .wu-chip{font-size:11px;padding:4px 8px}
  .mr-mm .wu .wu-list{margin-top:8px;gap:5px}.mr-mm .wu .wu-row{padding:5px 8px;gap:8px}
  .mr-mm .wu .wu-mono,.mr-mm .wu .wu-face{width:28px;height:28px;font-size:11px}.mr-mm .wu .wu-row b{font-size:12.5px}.mr-mm .wu .wu-row small{font-size:11px}.mr-mm .wu .wu-sc{font-size:13px;padding:2px 7px}
  .mr-mm .wu .wu-rev{font-size:12px;padding:6px 10px;margin-top:5px}.mr-mm .wu .wu-rev .wu-st{font-size:10px;margin-bottom:1px}.mr-mm .wu .wu-rev small{font-size:10px;margin-top:2px}
}

@media (prefers-reduced-motion:reduce){
  .mr-mm .cut-track{height:auto}.mr-mm .cut-sticky{position:relative}
  .mr-mm .cut-mask{display:none}
}
/* Critique fixes 1.0 (2026-10-20): each search panel says it is a fictional example */
.mr-mm .wu-head .wu-ex{margin-left:auto;padding:2px 9px;border-radius:999px;background:rgba(255,255,255,.14);color:rgba(255,255,255,.85);font-size:11.5px;font-weight:600;white-space:nowrap}
@media (max-aspect-ratio:1/1){.mr-mm .wu-head .wu-ex{font-size:10px;padding:1px 7px}}