/* Illustrated storyboard: existing card cuts and scale, all five steps visible. */
.direct-recruiting-page .dr-process { background:#fff; }
/* Secondary sections share the complementary palette; the product hero stays yellow. */
.direct-recruiting-page .dr-process { --dr-accent:#37afff; }
.direct-recruiting-page .dr-process-card--1,
.direct-recruiting-page .dr-process-card--5 { --dr-scene-accent:#8c82ff; --dr-scene-tint:#f4f3ff; }
.direct-recruiting-page .dr-process-card--2 { --dr-scene-accent:#37afff; --dr-scene-tint:#eaf6ff; }
.direct-recruiting-page .dr-process-card--3 { --dr-scene-accent:#ffd344; --dr-scene-tint:#fffbef; }
.direct-recruiting-page .dr-process-card--4 { --dr-scene-accent:#47cb56; --dr-scene-tint:#eaf9ed; }
/* Preserve the Figma geometry, neutral fills, transparent lens and mask luminance. */
.direct-recruiting-page .dr-process-illustration [fill="#FFD344"]:not(mask *) { fill:var(--dr-scene-accent); }
.direct-recruiting-page .dr-process-illustration [stroke="#FFD344"]:not(mask *) { stroke:var(--dr-scene-accent); }
.direct-recruiting-page .dr-process-illustration [fill="#FFFBEF"]:not(mask *) { fill:var(--dr-scene-tint); }
.direct-recruiting-page .dr-process-heading { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); align-items:end; gap:clamp(40px,4vw,80px); margin-bottom:var(--section-space); }
.direct-recruiting-page .dr-process-heading .about-label { margin-bottom:32px; }
.direct-recruiting-page .dr-process-list { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:24px; list-style:none; padding:0; margin:0; }
.direct-recruiting-page .dr-process-card { --cut:clamp(30px,2.5vw,54px); position:relative; display:grid; grid-template-areas:"number" "art" "copy"; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto 1fr; grid-column:span 2; gap:24px; min-width:0; padding:clamp(29px,2.6vw,52px); background:#fff; clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%); transition:transform .45s cubic-bezier(.22,1,.36,1); }
.direct-recruiting-page .dr-process-frame { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.direct-recruiting-page .dr-process-frame path { fill:none; stroke:var(--dr-line); stroke-width:1; vector-effect:non-scaling-stroke; stroke-linejoin:miter; }
.direct-recruiting-page .dr-process-cut-probe { position:absolute; width:var(--cut); height:0; visibility:hidden; pointer-events:none; }
.direct-recruiting-page .dr-process-card--2 { clip-path:polygon(0 0,100% 0,100% 100%,var(--cut) 100%,0 calc(100% - var(--cut))); }
.direct-recruiting-page .dr-process-card--3 { clip-path:polygon(var(--cut) 0,100% 0,100% 100%,0 100%,0 var(--cut)); }
.direct-recruiting-page .dr-process-card:nth-child(n+4) { grid-column:span 3; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); grid-template-rows:auto auto; grid-template-areas:"number art" "copy art"; align-content:center; }
.direct-recruiting-page .dr-process-card--4 { clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%); }
.direct-recruiting-page .dr-process-number { grid-area:number; color:#626f79; font:500 20px/1.35 'Figtree',Arial,sans-serif; }
.direct-recruiting-page .dr-process-scene { grid-area:art; justify-self:center; align-self:center; width:min(360px,100%); min-width:0; margin:0; }
.direct-recruiting-page .dr-process-illustration { display:block; width:100%; height:auto; overflow:visible; }
.direct-recruiting-page .dr-process-copy { grid-area:copy; min-width:0; }
.direct-recruiting-page .dr-process-card h3 { font-size:clamp(25px,2.05vw,38px); line-height:1.15; letter-spacing:-.035em; font-weight:600; }
.direct-recruiting-page .dr-process-card p { margin-top:24px; color:#596873; font-size:clamp(18px,1.35vw,24px); line-height:1.5; }
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
  .direct-recruiting-page .dr-process-card:hover { transform:translateY(-6px); }
}
@media(max-width:1100px) {
  .direct-recruiting-page .dr-process-heading { grid-template-columns:1fr; gap:var(--compact-gap); }
  .direct-recruiting-page .dr-process-heading .about-label { margin-bottom:22px; }
  .direct-recruiting-page .dr-process-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .direct-recruiting-page .dr-process-card,.direct-recruiting-page .dr-process-card:nth-child(n+4) { --cut:var(--compact-cut); grid-column:auto; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto 1fr; grid-template-areas:"number" "art" "copy"; padding:var(--compact-padding); align-content:start; }
  .direct-recruiting-page .dr-process-card:last-child { grid-column:1/-1; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); grid-template-rows:auto auto; grid-template-areas:"number art" "copy art"; align-content:center; }
  .direct-recruiting-page .dr-process-card h3 { font-size:var(--compact-h3); }
  .direct-recruiting-page .dr-process-card p { font-size:var(--compact-body); margin-top:16px; }
  .direct-recruiting-page .dr-process-number { font-size:var(--compact-label); }
}
@media(max-width:760px) {
  .direct-recruiting-page .dr-process-list { grid-template-columns:minmax(0,1fr); }
  .direct-recruiting-page .dr-process-card,.direct-recruiting-page .dr-process-card:nth-child(n+4) { grid-column:1; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto 1fr; grid-template-areas:"number" "art" "copy"; gap:24px; }
  .direct-recruiting-page .dr-process-scene { width:min(200px,100%); justify-self:start; }
}
@media(min-width:1921px) and (min-aspect-ratio:21/10) {
  .direct-recruiting-page .dr-process-card h3 { font-size:38px; }
  .direct-recruiting-page .dr-process-card p { font-size:22px; }
}
@media(prefers-reduced-motion:reduce) {
  .direct-recruiting-page .dr-process-card { transition:none; }
  .direct-recruiting-page .dr-process-scene [class*="dr-motion-"] { animation:none; }
}

/* Continuous motion for the five original Figma SVGs. No static dwell phases. */
.direct-recruiting-page .dr-process-illustration [class*="dr-anim-"] {
  transform-box: fill-box;
  transform-origin: center;
  animation-duration: 3.2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

.direct-recruiting-page .dr-process-illustration .dr-anim-check {
  animation-name: dr-process-check;
  animation-delay: -.4s;
}

.direct-recruiting-page .dr-process-illustration .dr-anim-check-2 {
  animation-delay: -1.45s;
}

.direct-recruiting-page .dr-process-illustration .dr-anim-check-3 {
  animation-delay: -2.5s;
}

.direct-recruiting-page .dr-process-illustration .dr-anim-profile-detail {
  animation-name: dr-process-profile-detail;
  animation-duration: 4s;
  animation-delay: -.8s;
}

.direct-recruiting-page .dr-process-illustration .dr-anim-search {
  animation-name: dr-process-search;
  animation-duration: 4.2s;
  animation-delay: -.6s;
  /* Keep the complete lens and handle inside the third, neutral profile. */
  transform: translate(-48px, 54px);
}

.direct-recruiting-page .dr-process-illustration .dr-anim-shortlist {
  animation-name: dr-process-shortlist;
  animation-duration: 4.4s;
  animation-delay: -1.1s;
}

.direct-recruiting-page .dr-process-illustration .dr-anim-message-first {
  animation-name: dr-process-message-first;
  animation-duration: 4s;
  animation-delay: -.3s;
}

.direct-recruiting-page .dr-process-illustration .dr-anim-message-reply {
  animation-name: dr-process-message-reply;
  animation-duration: 4.4s;
  animation-delay: -2.3s;
}

.direct-recruiting-page .dr-process-illustration .dr-anim-envelope {
  animation-name: dr-process-envelope;
  animation-duration: 3.6s;
  animation-delay: -1.2s;
}

.direct-recruiting-page .dr-process-illustration .dr-anim-qualified-profile {
  animation-name: dr-process-qualified-profile;
  animation-duration: 4s;
  animation-delay: -.8s;
}

.direct-recruiting-page .dr-process-illustration .dr-anim-shield {
  animation-name: dr-process-shield;
  animation-duration: 4.2s;
  animation-delay: -.6s;
}

.direct-recruiting-page .dr-process-illustration .dr-anim-dossier-avatar {
  animation-name: dr-process-dossier-avatar;
  animation-duration: 3.8s;
  animation-delay: -1.6s;
}

.direct-recruiting-page .dr-process-illustration .dr-anim-dossier-line {
  transform-origin: left center;
  animation-name: dr-process-dossier-line;
}

.direct-recruiting-page .dr-process-illustration .dr-anim-line-1 {
  animation-delay: -.4s;
}

.direct-recruiting-page .dr-process-illustration .dr-anim-line-2 {
  animation-delay: -1.45s;
}

.direct-recruiting-page .dr-process-illustration .dr-anim-line-3 {
  animation-delay: -2.5s;
}

.direct-recruiting-page .dr-process-scene.is-loop-visible .dr-process-illustration [class*="dr-anim-"] {
  animation-play-state: running;
}

@keyframes dr-process-check {
  0% { transform: scale(1); }
  50% { transform: scale(1.24); }
  100% { transform: scale(1); }
}

@keyframes dr-process-profile-detail {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-14px) scale(1.045); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes dr-process-search {
  0% { transform: translate(-48px, 54px); }
  50% { transform: translate(-30px, 86px); }
  100% { transform: translate(-48px, 54px); }
}

@keyframes dr-process-shortlist {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-10px) scale(1.045); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes dr-process-message-first {
  0% { transform: translate(0, 0); }
  50% { transform: translate(-12px, -16px); }
  100% { transform: translate(0, 0); }
}

@keyframes dr-process-message-reply {
  0% { transform: translate(0, 0); }
  50% { transform: translate(12px, -10px); }
  100% { transform: translate(0, 0); }
}

@keyframes dr-process-envelope {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-10px) scale(1.06); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes dr-process-qualified-profile {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-12px) scale(1.04); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes dr-process-shield {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-14px) scale(1.08); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes dr-process-dossier-avatar {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.08); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes dr-process-dossier-line {
  0% { transform: scaleX(1); }
  50% { transform: scaleX(.82); }
  100% { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .direct-recruiting-page .dr-process-illustration [class*="dr-anim-"] {
    animation: none !important;
    transform: none !important;
  }
}