/*
 * Glider AI science page styles.
 * These rules are intentionally scoped by the original class names because the
 * interaction runtime toggles Webflow-compatible state classes such as w--open.
 */
/* Only rules that cannot be expressed as a Webflow class live here:
   Webflow runtime state (.w--open), parent-hover descendants, child selectors and keyframes.
   Everything else is a native class. No !important anywhere. */

/* Global typography default. Webflow's base stylesheet sets body{font-family:Arial},
   while the source sets body{font-family:"Open Sauce One"} and lets every element
   inherit it. Webflow's Body tag selector is not writable from the Data API and the
   Body element itself rejects classes, so the site-wide default has to live here.
   Any class that declares its own font-family still wins over this. */
body{font-family:"Open Sauce One",sans-serif}

/* Keyboard focus ring for Webflow's Tabs. Webflow's base stylesheet sets
   .w-tab-link:focus{outline:0} and nothing restores it, so every tab list on the site
   (science, candidate-360, middle-east, sap) was focusable with no visible indicator.
   Same treatment the native components already use, applied through Webflow's own
   focus-visible hook so it never shows on a mouse click. */
.w-tab-link:focus-visible,.w-tab-link[data-wf-focus-visible]{outline:2px solid #0077ab;outline-offset:2px}

/* FAQ list ends. Every row carries 20px above the question and 20px plus a hairline
   below it, which gives the source's evenly centred divider. The source has no space
   above the first question and no line under the last row, so those two ends are
   trimmed. The list is a Collection List, so each .faq_row is the only child of its
   own .w-dyn-item and :first-child/:last-child on the row would match every row;
   the ends have to be reached through the item wrapper. */
.faq_list .w-dyn-item:first-child .faq_toggle{padding-top:0}
.faq_list .w-dyn-item:last-child .faq_row{border-bottom-width:0}

/* FAQ toggle indicator. The source draws a plus that becomes a minus, not a chevron, so the
   two bars are native elements inside the toggle; only the open-state rotation depends on
   Webflow's .w--open and has to live here. */
.faq_toggle.w--open .is-faq-v{transform:rotate(0deg)}

/* FAQ open and close. Webflow's Dropdown flips .w-dropdown-list between display:none and
   display:block, and neither can be transitioned, so the panel becomes a single-row grid that
   animates from 0fr to 1fr. The answer's own top padding has to move up onto the panel, or a
   closed row keeps 12px of it: a zero-height grid row still shows a border-box child's padding.
   The Middle East page runs its own max-height accordion off .is-open, so it is excluded. */
.faq_panel.w-dropdown-list:not(.me_faq-panel){display:grid;grid-template-rows:0fr;overflow:hidden;padding-top:0;transition:grid-template-rows .4s cubic-bezier(.33,1,.68,1),padding-top .4s cubic-bezier(.33,1,.68,1)}
.faq_panel.w-dropdown-list:not(.me_faq-panel)>*{overflow:hidden;min-height:0;padding-top:0}
.faq_panel.w-dropdown-list:not(.me_faq-panel).w--open{grid-template-rows:1fr;padding-top:12px}

/* Middle East FAQ indicator. That page runs its own accordion, and its toggle icon is
   Webflow's icon-font glyph with font-size:0, so nothing was painted at all: the rows showed
   text and no affordance. The source draws a plus that becomes a minus, which needs two
   pseudo-elements, and the base rule's chevron rotation has to be cancelled. */
.me_faq-ic{position:absolute;right:0;top:50%;width:14px;height:14px;margin-top:-7px;font-size:0;transform:none}
.me_faq-ic:before,.me_faq-ic:after{content:"";position:absolute;left:0;top:6px;width:14px;height:2px;background-color:#001b27}
.me_faq-ic:after{transform:rotate(90deg);transition:transform .3s ease-out}
.me_faq-ic.is-open{transform:none}
.me_faq-ic.is-open:after{transform:rotate(0deg)}

/* Middle East platform video. The source masks the bottom of the frame away and pulls the
   next section up over it, so the player reads as a cropped still; unmuting slides the mask
   off and releases the space, which is the "expand" the reader sees. Mask geometry is not a
   Webflow class property, and the revealed state follows the video's own muted flag (set in
   the footer). Disabled below 768, exactly as the source does. */
@media (min-width:768px){
.me_video-wrap{-webkit-mask-image:radial-gradient(ellipse 265% 100% at top center,#000 80%,transparent 90%);mask-image:radial-gradient(ellipse 265% 100% at top center,#000 80%,transparent 90%);-webkit-mask-size:auto 200%;mask-size:auto 200%;-webkit-mask-position:50% 99%;mask-position:50% 99%;margin-bottom:-8%;transition:-webkit-mask-position .75s ease,mask-position .75s ease,margin-bottom 1.5s ease}
.me_video-wrap.is-revealed{-webkit-mask-position:top;mask-position:top;margin-bottom:40px;transition:-webkit-mask-position 1.5s ease,mask-position 1.5s ease,margin-bottom .75s ease}
}

/* Middle East hero aurora. The source drifts each blob on two independent infinite yoyo
   tweens, one on y plus opacity and one on x. They are split across two properties so the
   second never clobbers the first, and the per-blob offsets stand in for the source's
   randomised stagger. */
@keyframes gl-aurora-y{to{transform:translateY(10%);opacity:.2}}
@keyframes gl-aurora-x{to{translate:100px 0}}
.me_aurora{animation:gl-aurora-y 10s ease-in-out infinite alternate,gl-aurora-x 14s ease-in-out infinite alternate}
.me_aurora.is-b{animation-delay:-1s,-2.1s}
.me_aurora.is-c{animation-delay:-2s,-4.2s}

/* Assessment-types grid. The source uses last:border-b-0 on the rows, so the closing
   divider is dropped and only the box border shows. :last-child has no class equivalent. */
.ao_kind-box .ao_kind-row:last-child{border-bottom-width:0}

/* AI Assistant feature accordion. The source auto-advances every 8 seconds and draws a
   progress bar for the open row; the open state drives three descendants, which is not
   expressible as a class. */
.aaf_row.is-aaf-on .aaf_panel{grid-template-rows:1fr}
.aaf_row.is-aaf-on .aaf_vbar{transform:rotate(0deg)}
.aaf_row.is-aaf-on .aaf_prog-fill{animation:gl-aaf 8s linear forwards}
@keyframes gl-aaf{from{width:0%}to{width:100%}}

/* SAP steps auto-advance indicator. The fill is keyed off Webflow's own w--current tab state
   and targets a descendant, which no Webflow class can express. The steps are a Tabs widget,
   whose panes only change on a real click, so the accordion driver above cannot drive them and
   they get their own footer loop; the keyframes are shared. */
.sap_step-link.w--current .sap_step-fill{animation:gl-aaf 8s linear forwards}

/* Contingent Workforce step cards. Each card's left rule draws down as the card scrolls
   through the viewport, driven by a scroll-progress timeline on the class itself; only the
   keyframes and the reduced-motion opt-out need to live here. The card's base state is a
   full-height rule, so the rules simply stand still if the timeline never runs. */
@keyframes cw-draw{from{height:0}to{height:100%}}

/* Product hero art. The Figma "For Animation" board separates each hero into a base panel
   and the small cards that sit on top of it, so the cards drift while the panel stays put.
   Webflow can bind an animation to a class but cannot declare @keyframes, so only the
   keyframes and the reduced-motion opt-out live here. */
@keyframes gl-fadeup{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes gl-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}
@keyframes gl-float-sm{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* Interview Overview hero art. The source runs one GSAP timeline on load: the two side
   images slide in horizontally from 10% and the centre panel rises 10%, all over 1s on
   Power2.easeOut. Only the keyframes need to live here; the bindings are on the classes. */
@keyframes gl-ah-left{from{opacity:0;transform:translateX(-10%)}to{opacity:1;transform:none}}
@keyframes gl-ah-mid{from{opacity:0;transform:translateY(10%)}to{opacity:1;transform:none}}
@keyframes gl-ah-right{from{opacity:0;transform:translateX(10%)}to{opacity:1;transform:none}}

/* Interview Overview hero handoff. The source scrubs the hero art away as the reader carries
   on into the suite section: the two side panels slide out left and right and fade while the
   centre panel travels down towards the suite. On the source that centre panel lands inside a
   tabbed suite panel; ours keeps its own card grid, so it hands off and fades rather than
   landing in a slot. Driven by a scroll-progress timeline rather than a library, and bound to
   the column wrappers so the one-second load entrance on .ais_heroart-inner is left alone.
   The resting state is untouched, so a browser with no scroll timelines simply shows the art
   standing still; the container is clipped, so nothing can push the page sideways on its way
   out. Desktop only, since the art is hidden below 992 anyway. */
@keyframes gl-ahs-left{to{transform:translateX(-105%);opacity:0}}
@keyframes gl-ahs-right{to{transform:translateX(105%);opacity:0}}
@keyframes gl-ahs-mid{to{transform:translateY(55%) scale(.94);opacity:0}}
@supports (animation-timeline:view()){
@media (min-width:992px){
.ais_heroart-grid>.ais_heroart-col{animation-duration:1s;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:view();animation-range:cover 55% cover 90%}
.ais_heroart-grid>.ais_heroart-col:nth-child(1){animation-name:gl-ahs-left}
.ais_heroart-grid>.ais_heroart-col:nth-child(2){animation-name:gl-ahs-mid}
.ais_heroart-grid>.ais_heroart-col:nth-child(3){animation-name:gl-ahs-right}
}
}

/* Science hero. The source draws both orbit paths with GSAP DrawSVGPlugin (2s power2.inOut,
   starting at 0.5s, the two rings 0.15s apart) and then fades the four labels in over 1s,
   0.2s apart, from 1.8s. The rings are <img> SVGs, so their stroke animation is baked into
   the SVG files themselves and only the label timing is expressible here. */
@keyframes gl-fade-in{from{opacity:0}to{opacity:1}}
.sci_chip{animation:gl-fade-in 1s cubic-bezier(.645,.045,.355,1) both}
.sci_chip.is-c1{animation-delay:1.8s}
.sci_chip.is-c2{animation-delay:2s}
.sci_chip.is-c3{animation-delay:2.2s}
.sci_chip.is-c4{animation-delay:2.4s}

/* Science cost-of-a-bad-hire graph. The source wipes the red area in from the left over 3s and
   floats the callout up one second later, both once as the block scrolls in. */
.sci_why-graph{clip-path:inset(0 100% 0 0)}
.sci_why-callout{opacity:0;transform:translateY(30px)}
.sci_why-visual.is-wg-on .sci_why-graph{clip-path:inset(0 0 0 0);transition:clip-path 3s cubic-bezier(.645,.045,.355,1)}
.sci_why-visual.is-wg-on .sci_why-callout{opacity:1;transform:none;transition:opacity 1s cubic-bezier(.645,.045,.355,1) 1s,transform 1s cubic-bezier(.645,.045,.355,1) 1s}

/* Science methodology panels. Each panel's cards are separate layers sitting over the tinted
   panel, so they can land one after another as the row scrolls in. Only the keyframes and the
   per-layer stagger need a selector Webflow cannot express. */
@keyframes gl-cardin{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
.sci_meth-media .sci_mlay{opacity:0}
.sci_meth-media.is-mm-on .sci_mlay{animation:gl-cardin .7s cubic-bezier(.22,.61,.36,1) both}
.sci_meth-media.is-mm-on .sci_mlay:nth-child(2){animation-delay:.13s}
.sci_meth-media.is-mm-on .sci_mlay:nth-child(3){animation-delay:.21s}
.sci_meth-media.is-mm-on .sci_mlay:nth-child(4){animation-delay:.29s}
.sci_meth-media.is-mm-on .sci_mlay:nth-child(5){animation-delay:.42s}

/* Interview Overview feature cards. The source keeps each card's description out of the way
   above its lg breakpoint and fades a white panel carrying it in on hover, while below that
   the description is simply always visible. The reveal depends on the parent's hover state,
   which Webflow has no way to express as a class. The description keeps its space in the
   layout at all times, so the card never changes height and the grid never reflows. */
@media (min-width:992px){
.ais_feat-desc{opacity:0;transition:opacity .3s ease-out}
.ais_feat-card:hover .ais_feat-desc,.ais_feat-card:focus-within .ais_feat-desc{opacity:1}
.ais_feat-card:hover,.ais_feat-card:focus-within{background-image:none;background-color:#fff;box-shadow:0 10px 30px rgba(0,27,39,.08)}
}

/* ID Verification "why" video. The player sits in a Webflow embed wrapper whose height is
   auto, so the video's height:100% resolved against nothing and left a band of bare panel
   under it. Only the wrapper, an unclassable generated div, needs the height. */
.idv_why-media>div{height:100%}

/* open states */
/* desktop-only: the panel is absolutely positioned and centred, so it needs the
   translateX(-50%) pair. Below 1280 the list is a static in-flow accordion and the
   same transform would shove it off the left edge. */
@media (min-width:1280px){.nav_dd-list.w--open{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}}
.nav_dd-toggle.w--open{color:#00a5ee}
.funnel_acc-list.w--open{max-height:620px;opacity:1}
/* below 1024 the panel also contains the stacked step image (430px wide at md, 250 below),
   so the desktop cap would clip it. Scoped rather than raised globally to keep desktop timing. */
@media (max-width:1023px){.funnel_acc-list.w--open{max-height:960px}}
@media (max-width:767px){.funnel_acc-list.w--open{max-height:720px}}
.uc_row-list.w--open{max-height:340px;opacity:1;background-color:rgba(2,22,41,.5)}
.uc_row-toggle.w--open{background-color:rgba(2,22,41,.45)}
/* Use-case accordion, height stability. The open cap had drifted well above the panel's real
   height (.uc_body carries min-height:250px, so every row is exactly 250 from 768 up), which
   meant the opening row hit full height in the first half of the transition while the closing
   row spent that half doing nothing. The stack bulged by the difference mid-animation and the
   vertically centred left column rode up and down with it. Matching the cap to the true height
   makes the two rows exact mirrors, so the total never changes and nothing shifts. Below 768
   the copy rewraps and the tallest row needs 304. Specificity is raised deliberately: the
   values being corrected live in the homepage's own page-level custom code. */
.uc_stack .uc_row-list.w--open{max-height:250px}
@media (max-width:767px){.uc_stack .uc_row-list.w--open{max-height:320px}}
.w--open>.nav_dd-icon,.w--open>.funnel_acc-icon{transform:rotate(180deg)}

/* case-study card hover — matches source: image zooms/blurs/fades, copy slides in from the right */
.cs_card:hover .cs_card-img{transform:scale(1.3);opacity:.6;filter:blur(12px)}
.cs_card:hover .cs_desc{opacity:1;transform:translateX(0)}
/* the Learn More pill sits below the clipped wrapper edge until hover (xl only, as on the source).
   :focus-within is required too, or the pill is a tab stop that stays outside its own clip. */
@media (min-width:1280px){.cs_more-wrap .btn_learn-more{transform:translateY(150%)}}
.cs_card:hover .btn_learn-more,.cs_card:focus-within .btn_learn-more{transform:translateY(0)}

/* feature and cross-sell card images zoom on hover, as group-hover:scale-105 does on the source.
   Each image sits in its own overflow-hidden wrapper so the card edge stays clean. */
.ao_feat-card:hover .ao_feat-img,.ao_feat-card:focus-within .ao_feat-img,
.xsell_card:hover .xsell_img,.xsell_card:focus-within .xsell_img{transform:scale(1.05)}

/* parent-hover reveals */
.btn_dark:hover .btn_dark-sheen::after,.btn_pill:hover::after,.btn_light:hover::after{opacity:.3}
.btn_dark:hover .btn_dark-icon,.btn_light:hover .btn_light-icon{transform:translateX(4px)}
.btn_dark-sheen::after,.btn_pill::after,.btn_light::after{content:"";position:absolute;inset:0;z-index:20;border-radius:inherit;background-image:linear-gradient(180deg,#fff 0%,rgba(255,255,255,0) 100%);opacity:0;transition:opacity .3s ease-in-out;pointer-events:none}

/* keyframes + bindings */
/* the integration tiles do NOT loop on the source — they land once on scroll (see JS below).
   Only the centre tile and its shadow loop, both at 3s, as .floating-glider-tile/.tile-shadow do. */
.int_center{animation:gl-tile 3s ease-in-out infinite,gl-shadow 3s ease-in-out infinite}
.gl-fade{opacity:0}
/* CTA particle field. The source ships an empty #particles-wrapper and builds the dots in JS,
   so generating them here is behaviour parity, not injected design. will-change is deliberately
   NOT set: at 150 dots it pins 150 compositor layers for the life of the page, which costs more
   than the transform hint saves. */
.gl-particle{position:absolute;background-color:#fff;border-radius:50%;pointer-events:none;animation:gl-drift 60s linear infinite,gl-twinkle var(--tw) ease-in-out infinite alternate}
@keyframes gl-drift{to{transform:translate3d(var(--dx),var(--dy),0)}}
@keyframes gl-twinkle{to{opacity:var(--op)}}
.hero_logos-track{animation:gl-marquee 40s linear infinite;will-change:transform}
@keyframes gl-tile{0%,100%{transform:translate(-50%,-55%)}50%{transform:translate(-50%,-45%)}}
@keyframes gl-shadow{0%,100%{filter:drop-shadow(0 80px 60px rgba(0,165,238,.4))}50%{filter:drop-shadow(0 20px 10px rgba(0,165,238,.6))}}
@keyframes gl-marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.int_center,.hero_logos-track,.me_ind-track,.me_aurora{animation:none}.ais_heroart-grid>.ais_heroart-col{animation:none}.gl-fade{opacity:1;transform:none}.cs_card:hover .cs_card-img{transform:none;filter:none;opacity:1}.ao_feat-card:hover .ao_feat-img,.xsell_card:hover .xsell_img{transform:none}.aaf_row.is-aaf-on .aaf_prog-fill{animation:none;width:100%}.sap_step-link.w--current .sap_step-fill{animation:none;width:100%}.hero_layer-base,.hero_layer,.hero_layer-in,.ba_hero-img{animation:none;opacity:1;transform:none}.sci_chip,.sci_meth-media .sci_mlay,.ais_heroart-inner{animation:none;opacity:1;transform:none}.sci_why-graph{clip-path:none}.sci_why-callout{opacity:1;transform:none}.faq_panel.w-dropdown-list:not(.me_faq-panel){transition:none}.ais_feat-desc{opacity:1;transition:none}.cw_step-card::before{animation:none;height:100%}.me_video-wrap{transition:none}}

/* Science-page only. Kept on the page rather than the site block so the homepage is unaffected.
   Sonar sweep matches the source's .sonar-scanner-anim: 5s linear, -40deg -> 220deg with an opacity pulse. */
.sci_sonar-scan{animation:gl-sonar 5s linear infinite}
@keyframes gl-sonar{0%{opacity:0;transform:rotate(-40deg)}30%{opacity:1}50%{opacity:1}60%{opacity:0}100%{transform:rotate(220deg)}}
@media (prefers-reduced-motion:reduce){.sci_sonar-scan{animation:none;opacity:1}}
  /* Webflow runtime state: the active tab pill. Cannot be expressed as a class. */
  .sci_tablink.w--current{background-color:transparent}
  .sci_tablink.w--current:after{opacity:1}