/* r15 (2026-10-16): Now line + 60-second recruiter view */
.x-now { flex: 1 1 100%; margin: 2px 0 0; padding-top: 12px; border-top: 1px dashed var(--line); display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; font-size: clamp(13px, 1.05vw, 15px); line-height: 1.45; color: var(--ink-2); }
.x-now__k { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.x-now__k i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent); animation: xnow 2.4s infinite; }
@keyframes xnow { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }
.x-now__t { flex: 1 1 280px; } .x-now__t b { color: var(--ink); font-weight: 600; }
.x-now__d { font-size: 12px; opacity: .65; }
@media (prefers-reduced-motion: reduce) { .x-now__k i { animation: none; } }

.x-hire__b .x-rvw__go { background: var(--ink); color: var(--bg); border-color: transparent; font-weight: 600; }
.x-hire__b .x-rvw__go span { margin-right: 2px; }

.x-rvw { position: fixed; inset: 0; z-index: 95; display: flex; align-items: flex-start; justify-content: center; padding: clamp(10px, 4vh, 48px) 12px; overflow-y: auto; background: color-mix(in srgb, var(--bg) 55%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s; }
.x-rvw.open { opacity: 1; visibility: visible; }
.x-rvw__sheet { position: relative; width: min(860px, 100%); background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 26px; padding: clamp(20px, 3.4vw, 40px); box-shadow: 0 30px 80px rgba(0,0,0,.25); transform: translateY(18px) scale(.985); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.x-rvw.open .x-rvw__sheet { transform: none; }
.x-rvw__x { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 15px; cursor: pointer; }
.x-rvw__eb { margin: 0 0 14px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.x-rvw__head { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; padding-right: 40px; }
.x-rvw__head img { width: 64px; height: 64px; border-radius: 50%; flex: none; background: var(--accent); }
.x-rvw__head h2 { margin: 0; font-family: var(--display); font-size: clamp(28px, 4.4vw, 44px); letter-spacing: -.03em; line-height: 1; }
.x-rvw__head p { margin: 6px 0 0; color: var(--ink-2); font-size: clamp(13px, 1.2vw, 15px); }
.x-rvw__fit { margin: 0 0 18px; font-size: clamp(14px, 1.3vw, 16px); }
.x-rvw__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 18px; }
.x-rvw__grid > div { border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.x-rvw__grid small { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.x-rvw__grid b { font-family: var(--display); font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -.02em; line-height: 1.1; }
.x-rvw__grid span { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.x-rvw__grid .x-rvw__win { background: #c8ff3d; border-color: transparent; }
.x-rvw__grid .x-rvw__win small, .x-rvw__grid .x-rvw__win span, .x-rvw__grid .x-rvw__win b { color: #111; }
.x-rvw__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; margin-bottom: 20px; }
.x-rvw__row h4 { margin: 0 0 4px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.x-rvw__row p { margin: 0; font-size: 14px; line-height: 1.5; }
.x-rvw__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.x-rvw__btns .btn { min-height: 44px; }
.x-rvw__menu { margin-top: 10px; font: 700 18px/1 var(--display); letter-spacing: .02em; padding: 12px 20px; border-radius: 999px; border: 1px solid var(--line); background: var(--accent); color: var(--accent-ink, #111); cursor: pointer; }
@media (max-width: 640px) {
  .x-rvw__grid, .x-rvw__row { grid-template-columns: 1fr; }
  .x-rvw__btns .btn { flex: 1 1 45%; justify-content: center; }
  .x-rvw__head img { width: 52px; height: 52px; }
}
/* r15b: Work section paints above the becoming stage's empty tail */
#work { position: relative; z-index: 1; }
/* r18: section content stays readable before entrance observers run.
   Keep decorative highlights and image parallax without a blank first frame. */
.reveal, .x-hd .x-hc, .x-wsub .x-ws,
.x-qp__grid li, .x-sl--a .x-sl__n, .x-sl--a .x-sl__c,
.x-ailrv .x-mason figure, .x-ailrv .x-vreel figure, .x-ailrv .x-note.x-sticker {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}
.card.x-rv, .card.x-rv .tag {
  opacity: 1 !important;
  animation: none !important;
}
.x-tic--ready .x-tic__wtx { clip-path: none !important; }
.x-tic--ready .x-tic__rest, .x-tic--ready .x-tic__sub,
.x-tic--ready .x-tic__acts, .x-tic--ready .x-tic__as, .x-tic--ready .x-seal {
  opacity: 1 !important;
  transform: none !important;
}
.x-tic.is-in .x-tic__win::after { animation: none; }
/* r17 (2026-10-17): phone nav tucks away while scrolling down, so it never sits over buttons, cards or the game */
@media (max-width: 900px) {
  .nav { transition: transform .38s cubic-bezier(.2,.8,.2,1), opacity .3s ease; }
  html.x-navhide .nav { transform: translate(-50%, calc(100% + 34px)); opacity: 0; pointer-events: none; }
}