/* Scale all three background regions together; their geometry stays proportional. */
.recruit-backdrop .collage{
  transform:scale(var(--recruit-scale,1));
  transform-origin:center center;
}
.recruit-backdrop{overflow:hidden}
@media(prefers-reduced-motion:reduce){
  .recruit-backdrop .collage{transform:none!important}
}

/* One viewport stays pinned while two viewport lengths drive the background. */
.recruit.section{--recruit-view-height:100vh;position:relative;height:calc(3 * var(--recruit-view-height))}
@supports(height:100svh){.recruit.section{--recruit-view-height:100svh}}
.recruit-scene{position:sticky;top:0;height:var(--recruit-view-height);overflow:hidden;isolation:isolate;background:#143c4c}
.recruit-scene>.recruit-backdrop{position:absolute;inset:0;height:100%;z-index:0}
.recruit-scene .collage{height:100%}
.recruit-scene>.recruit-content{position:absolute;inset:0;height:100%;z-index:1}
@media(prefers-reduced-motion:reduce){
  .recruit.section{height:var(--recruit-view-height)}
  .recruit-scene{position:relative}
}

/* Columns alternate only on Y; their shared scale keeps horizontal gaps intact. */
.recruit-backdrop .collage-column{translate:0 var(--recruit-column-y,0px)}
/* Foreground is a sibling of the backdrop and never inherits its scale. */
.recruit-scene>.recruit-content{background:transparent;overflow:visible}
.recruit-white-blur{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(to bottom,rgba(255,255,255,0) 17.739%,#fff 100%);translate:0 var(--recruit-blur-y,100%)}
.recruit-scene .recruit-copy{translate:0 var(--recruit-copy-y,100vh)}
.recruit-scene .recruit-floating{z-index:3;translate:0 var(--recruit-image-y,100vh)}
@media(prefers-reduced-motion:reduce){
  .recruit-backdrop .collage-column,.recruit-white-blur,.recruit-scene .recruit-copy,.recruit-scene .recruit-floating{translate:none!important}
}

/* Tall viewports: extend photo frames vertically and crop their images with cover. */
.recruit-backdrop .collage-photo{min-height:var(--recruit-photo-min-height,0px)}

/* Figma 2028:12074: fixed 448:500 frame, source crop centered at 1/.93525523. */
.recruit-backdrop .recruit-team-photo{height:auto;min-height:0;aspect-ratio:448/500}
.recruit-backdrop .recruit-team-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform:scale(1.06922684)}

/* TOP tablet: keep the established 448 × 500 panel proportion.
   Existing repeated panels supply the remaining viewport/motion coverage. */
@media(min-width:761px) and (max-width:1024px){
  /* Let the existing opaque-white gradient overscan survive the parent clip.
     The dark backdrop still ends at the original viewport edge. */
  #recruit.recruit.section .recruit-scene{overflow:clip;overflow-clip-margin:2px}
  #recruit .collage-column{gap:3.333333vw}
  #recruit .collage-photo{height:auto;min-height:0;aspect-ratio:448/500}
}



/* Keep TOP's central 460px reading column clear throughout the Y-only motion.
   Below the full PC composition, photos shrink proportionally and move outwards. */
@media(min-width:761px) and (max-width:1439px){
  #recruit .recruit-floating{
    width:var(--recruit-floating-width);
    height:auto;
  }
  #recruit .floating-left{
    --recruit-floating-width:clamp(210px,20.833333vw,300px);
    aspect-ratio:300 / 360;
    left:min(0px,calc((100% - 460px) / 2 - 24px - var(--recruit-floating-width)));
  }
  #recruit .floating-top{
    --recruit-floating-width:clamp(238px,23.611111vw,340px);
    aspect-ratio:340 / 240;
    right:min(80px,calc((100% - 460px) / 2 - 24px - var(--recruit-floating-width)));
  }
  #recruit .floating-bottom{
    --recruit-floating-width:clamp(245px,24.305556vw,350px);
    aspect-ratio:350 / 247;
    right:min(0px,calc((100% - 460px) / 2 - 24px - var(--recruit-floating-width)));
  }
}


/* TOP only: fractional sticky edges must resolve to CONTACT's white, not
   the dark scene backing. Finish the existing fade before its clipped edge. */
#recruit.recruit.section,
#recruit .recruit-scene{background:#fff}
#recruit .recruit-white-blur{
  background:linear-gradient(to bottom,rgba(255,255,255,0) 17.739%,#fff calc(100% - 4px));
}


/* TOP foreground clip clearance only. The scene and section grow equally,
   preserving the sticky release point and the original background viewport. */
#recruit.recruit.section{
  height:calc(3 * var(--recruit-view-height) + max(var(--recruit-bottom-clearance,0px),var(--recruit-frame-clearance,0px)));
}
#recruit.recruit.section .recruit-scene{
  height:calc(var(--recruit-view-height) + max(var(--recruit-bottom-clearance,0px),var(--recruit-frame-clearance,0px)));
}
#recruit.recruit.section .recruit-scene>.recruit-backdrop{
  height:var(--recruit-view-height);bottom:auto;
}
/* The backdrop ends at view-height. The existing gradient continues 2px
   beyond that raster edge; its fully-white stop stays at view-height - 2px. */
#recruit.recruit.section .recruit-white-blur{
  height:calc(var(--recruit-view-height) + 2px);bottom:auto;
}
@media(prefers-reduced-motion:reduce){
  #recruit.recruit.section{height:calc(var(--recruit-view-height) + max(var(--recruit-bottom-clearance,0px),var(--recruit-frame-clearance,0px)))}
}