/* Start states for the s7 widgets (public/js/s7/). Only under html.w-mod-js, so the content shows with JS off.
   Values from Webflow's compiled interactions: slide and fade 1000 ms outQuart, lights 1000 ms ease-out. */
html.w-mod-js [data-s7-reveal] {
  opacity: 0;
  transition: opacity 1000ms cubic-bezier(0.165, 0.84, 0.44, 1), transform 1000ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
html.w-mod-js [data-s7-reveal="slide"] { transform: translate3d(0, 100px, 0); }
html.w-mod-js [data-s7-reveal="slide-left"] { transform: translate3d(-100px, 0, 0); }
/* Glows are placed with their own transform (scale and translate in the Webflow sheet), so a light reveal changes
   opacity only. Clearing the transform made the glow jump away from its place and back (Ben, 9 Nov 2026). */
html.w-mod-js [data-s7-reveal="light"] { transition: opacity 1000ms ease-out; }
/* The blue glows behind sections fade in once, by opacity only. They are hidden from the first paint and reveal.js
   marks each one lit when its image has loaded and it is on screen, so a glow never pops in when the image arrives
   and never fades out and back (Ben, 9 Nov 2026). With JS off they simply show. */
html.w-mod-js :is(.glow_image, [class*="bg-light_"]) { opacity: 0; transition: opacity 1000ms ease-out; }
html.w-mod-js :is(.glow_image, [class*="bg-light_"]).s7-lit { opacity: 1; }
/* The end state of a reveal: reveal.js adds s7-in and the element moves to it over the transition above. Without
   these two rules nothing fades: the element stays hidden until the script's 1.3 s fallback, then pops in
   (tools/reveal-css.test.mjs holds them in place). */
html.w-mod-js [data-s7-reveal]:not([data-s7-reveal="light"]).s7-in { opacity: 1; transform: none; }
html.w-mod-js [data-s7-reveal="light"].s7-in { opacity: 1; }
/* A glow on the first screen starts its fade with the first paint instead of waiting for a script (class set at
   build time, src/lib/perf.mjs, which also embeds a small glow image in the page or preloads a larger one). */
html.w-mod-js :is(.glow_image, [class*="bg-light_"]).s7-glow-now { opacity: 1; transition: none; animation: s7-glow-in 1000ms ease-out both; }
@keyframes s7-glow-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html.w-mod-js :is(.glow_image, [class*="bg-light_"]).s7-glow-now { animation: none; } }
/* Accordion: answers are closed until the widget opens them. */
html.w-mod-js .faq_answer,
html.w-mod-js .process_answer { overflow: hidden; }
html.w-mod-js .faq_answer,
html.w-mod-js .process_answer { height: 0; }

/* Hover. Values from Webflow's compiled interactions (action lists a-2, a-48, a-54, a-70 to a-77, a-106 to a-119).
   Idle states apply with JS (html.w-mod-js), as the Webflow runtime set them; the hover change only where a pointer can hover.
   [data-s7-hover="card"] marks cards Webflow bound by element id instead of class (tools/scaffold-block.mjs adds it). */

/* Buttons: the label chip goes from blue to white at 20% over 300 ms (500 ms back on CTA buttons). */
html.w-mod-js .button-primary .button-text,
html.w-mod-js .button-primary-2 .button-text-2,
html.w-mod-js .button-primary-3 .button-text-3 { transition: background-color 300ms ease; }
html.w-mod-js .button-primary.glob-cta .button-text.cta { transition: background-color 500ms ease; }
/* A button label that is also a reveal keeps the reveal's fade (same reason as the card images below). */
html.w-mod-js .button-primary .button-text[data-s7-reveal] { transition: opacity 1000ms cubic-bezier(0.165, 0.84, 0.44, 1), background-color 300ms ease; }
/* Alternate buttons: the arrow moves 3px right. */
html.w-mod-js .button-alternate .code-embed.arrow,
html.w-mod-js .button-alternate-2 .code-embed-3.arrow,
html.w-mod-js .button-alternate-3 .code-embed-5.arrow { transform: translate3d(0, 0, 0); transition: transform 300ms linear; }

/* Cards: image scale 1 to 1.1, highlight line fades in, button moves 3px, 300 ms. */
html.w-mod-js :is(.feature_card, .partner_item, [data-s7-hover="card"]) .highlight-line,
html.w-mod-js :is(.case_item, .case-feat_item) .highlight-line.case-study { opacity: 0; transition: opacity 300ms linear; }
html.w-mod-js :is(.feature_card, .partner_item, .case-feat_item, [data-s7-hover="card"]) .image-absolute { transform: scale3d(1, 1, 1); transition: transform 300ms linear; }
/* A card image that is also a reveal keeps the reveal's fade next to the hover zoom: the rule above is more specific
   than the reveal rule, so its transition replaced the fade and the image popped in (featured case study cards,
   /partners). */
html.w-mod-js :is(.feature_card, .partner_item, .case-feat_item, [data-s7-hover="card"]) .image-absolute[data-s7-reveal] { transition: opacity 1000ms cubic-bezier(0.165, 0.84, 0.44, 1), transform 300ms linear; }
html.w-mod-js :is(.feature_card, .partner_item, [data-s7-hover="card"]) .feature_button.cards,
html.w-mod-js .case-feat_item .feature_button,
html.w-mod-js .case_item .case-card-arrow-btn { transform: translate3d(0, 0, 0); transition: transform 300ms linear; }
/* Feature buttons that Webflow bound to hover by element id: hidden until the card is hovered. */
html.w-mod-js [data-s7-hover="show-button"] .feature_button { opacity: 0; transition: opacity 300ms linear; }

@media (hover: hover) {
  html.w-mod-js .button-primary:hover .button-text,
  html.w-mod-js .button-primary-2:hover .button-text-2,
  html.w-mod-js .button-primary-3:hover .button-text-3 { background-color: rgba(255, 255, 255, 0.2); }
  html.w-mod-js .button-primary.glob-cta:hover .button-text.cta { transition-duration: 300ms; }
  html.w-mod-js .button-alternate:hover .code-embed.arrow,
  html.w-mod-js .button-alternate-2:hover .code-embed-3.arrow,
  html.w-mod-js .button-alternate-3:hover .code-embed-5.arrow { transform: translate3d(3px, 0, 0); }
  html.w-mod-js :is(.feature_card, .partner_item, [data-s7-hover="card"]):hover .highlight-line,
  html.w-mod-js :is(.case_item, .case-feat_item):hover .highlight-line.case-study { opacity: 1; }
  html.w-mod-js :is(.feature_card, .partner_item, .case-feat_item, [data-s7-hover="card"]):hover .image-absolute { transform: scale3d(1.1, 1.1, 1); }
  html.w-mod-js :is(.feature_card, .partner_item, [data-s7-hover="card"]):hover .feature_button.cards,
  html.w-mod-js .case-feat_item:hover .feature_button,
  html.w-mod-js .case_item:hover .case-card-arrow-btn { transform: translate3d(3px, 0, 0); }
  html.w-mod-js [data-s7-hover="show-button"]:hover .feature_button { opacity: 1; }
}

/* Slider bullets: Swiper adds the horizontal class and the wrapper keeps its own width (was an inline style block on each page). */
.swiper_bullets-wrapper.swiper-pagination-horizontal { width: auto; }