/* ==========================================================================
   Werkborg theme layer  (build input — copied to assets/css/werkborg.css)
   Loaded after base.css (the vendored Webflow stylesheet). It owns:
     1. brand tokens + self-hosted OFL font faces
     2. states the capture never shipped (re-implemented tabs, FAQ, form status)
     3. motion for the authored SVG scenes, with reduced-motion honoured once
     4. accessibility affordances (focus rings, touch targets)
   It must not change layout geometry — only colour, type, state and motion.
   ========================================================================== */

/* ------------------------------------------------------------------ fonts */
@font-face {
  font-family: "Source Sans 3";
  src: url("/assets/fonts/source-sans-3.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo Narrow";
  src: url("/assets/fonts/archivo-narrow.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ tokens */
:root {
  --wb-ink: #0a2040;
  --wb-deep: #071830;
  --wb-blue: #0066ff;
  --wb-cyan: #00d1ff;
  --wb-checkpoint: #bd3d13;
  --wb-checkpoint-on-ink: #ee7444;
  --wb-green: #14765e;
  --wb-mist: #e8eef7;
  --wb-paper: #ffffff;

  --wb-font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wb-font-display: "Archivo Narrow", "Arial Narrow", Helvetica, Arial, sans-serif;
  --wb-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* The display face carries the editorial role the capture's licensed condensed
   serif had; tighten it so the vw-locked headline sizes keep their line breaks. */
.c-display-120, .c-display-120-2, .c-display-120-3, .c-display-190, .c-display-190-2,
.c-display-90, .c-display-68, .c-display-45, .c-display-32, .c-home-banner-2-text,
.c-footer-newsletter-text-1, .c-footer-newsletter-text-2, .text-size-120, .text-size-150,
.text-size-68, .text-size-70, .text-size-45 {
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* ------------------------------------------------------------------- a11y */
:where(a, button, input, select, textarea, [tabindex], [role="button"], [role="tab"]):focus-visible {
  outline: 2px solid var(--wb-checkpoint);
  outline-offset: 3px;
  border-radius: 4px;
}
.wb-skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 10000;
  padding: 10px 16px;
  background: var(--wb-ink);
  color: var(--wb-paper);
  font-family: var(--wb-font-body);
  border-radius: 8px;
  transition: top 0.18s ease;
}
.wb-skip-link:focus { top: 12px; }

/* ------------------------------------------------------------- brand logo */
/* The capture's brand slot (.navbar_brand-new) was sized 72x20 for the old
   wordmark's ~5.2:1 aspect ratio. The current lockup is wider (~6.6:1); size
   the box to the asset instead of letting the flex box squash it, and let
   the <img> itself scale proportionally within that box. */
.navbar_brand-new {
  width: 8.25rem !important;
}
.navbar_brand-new img,
.c-footer-brand-new img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.c-footer-logo-wrapper-3 img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

/* ------------------------------------------------- authored svg scene sizing */
.wb-hero-bg-holder,
.wb-hero-bg-holder svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.wb-call-panel,
.wb-call-panel svg,
.wb-scenario-visual,
.wb-scenario-visual svg,
.wb-tab-scene,
.wb-tab-scene svg,
.wb-studio-scene,
.wb-studio-scene svg,
.wb-demo-wave,
.wb-demo-wave svg,
.wb-abstract-tile,
.wb-abstract-tile svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wb-tab-scene, .wb-studio-scene, .wb-scenario-visual, .wb-call-panel, .wb-demo-wave {
  border-radius: inherit;
  overflow: hidden;
}
.wb-abstract-tile {
  background: var(--wb-deep);
  border-radius: 12px;
  overflow: hidden;
}
.wb-pill-wave, .wb-pill-wave svg {
  display: block;
  width: 100%;
  height: 100%;
}
.wb-cta-icon svg, .wb-social-icon svg, .wb-privacy-icon svg, .wb-scenario-chip svg { display: block; }
.wb-page-hero-image {
  margin-top: clamp(24px, 4vw, 48px);
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--wb-deep);
}
.wb-page-hero-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wb-icon, .wb-tile-icon { flex: none; }

/* The demo visual sits in a 300px circular mask (.is-cahnge in base.css):
   give the authored waveform the dark surface the reference video had. */
.wb-demo-wave {
  background: radial-gradient(circle at 50% 42%, rgba(0, 102, 255, 0.55) 0%, transparent 68%), var(--wb-deep);
  border-radius: inherit;
  display: grid;
  place-items: center;
}

/* Agent Studio slides: the media box keeps its gradient backdrop and the
   authored UI panel floats inside it, as in the reference composition. */
.c-card-lottie-vertical-media .wb-studio-scene {
  padding: clamp(18px, 3.2vw, 46px);
  box-sizing: border-box;
}
.c-card-lottie-vertical-media .wb-studio-scene svg {
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 40px rgba(7, 27, 36, 0.28));
  border-radius: 14px;
}

/* The scenario label replaces a 12x12 quote glyph slot; let it size to content. */
.c-card-testimonial-text-icon {
  width: auto !important;
  height: auto !important;
}

/* Industry / integration marquee tiles keep the 136x30 logo footprint.
   base.css stretches raw <svg> children, so pin the icon box explicitly. */
.wb-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  color: var(--wb-ink);
  white-space: nowrap;
}
.wb-tile > svg {
  width: 18px !important;
  height: 18px !important;
  flex: none;
}
.c-marquee-list-item.image-text .wb-tile > svg {
  width: 26px !important;
  height: 26px !important;
}
.wb-tile__label,
.wb-tile .c-marquee-list-item-text {
  font-family: var(--wb-font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: currentColor;
}
.c-rail.logo .wb-tile { opacity: 0.72; }

/* Scenario cards: the label that replaces the decorative quote glyph. */
.wb-scenario-label {
  display: inline-block;
  font-family: var(--wb-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(189, 61, 19, 0.14);
  color: var(--wb-checkpoint);
}
.c-card-testimonial-new:not(.is-grey) .wb-scenario-label {
  background: rgba(238, 116, 68, 0.2);
  color: var(--wb-checkpoint-on-ink);
}

/* ------------------------------------------------------- re-implemented tabs */
/* base.css ships no active/inactive state for the fs-tabs markup (the Finsweet
   runtime was never captured), so the whole state machine lives here. */
.wb-tabs .fs-c-tabs-tab-item-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.wb-tabs .fs-c-tabs-tab-item.is-active .fs-c-tabs-tab-item-content {
  grid-template-rows: 1fr;
}
.wb-tabs .fs-c-tabs-tab-item-content-wrapper {
  min-height: 0;
  overflow: hidden;
}
.wb-tabs .fs-c-tabs-tab-item-trigger {
  cursor: pointer;
  color: var(--wb-ink);
  opacity: 0.62;
  transition: opacity 0.3s ease;
}
.wb-tabs .fs-c-tabs-tab-item.is-active .fs-c-tabs-tab-item-trigger,
.wb-tabs .fs-c-tabs-tab-item-trigger:hover {
  opacity: 1;
}
.wb-tabs .fs-c-tabs-tab-item-trigger-icon-bar.vertical {
  transition: transform 0.35s ease, opacity 0.35s ease;
}
.wb-tabs .fs-c-tabs-tab-item.is-active .fs-c-tabs-tab-item-trigger-icon-bar.vertical {
  transform: rotate(0deg);
  opacity: 0;
}
.wb-tabs .fs-c-tabs-content-item {
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
.wb-tabs .fs-c-tabs-content-item.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.wb-tabs .fs-c-tabs-content-item[hidden] {
  display: flex; /* keep the grid stack; visibility is driven by .is-active */
}

/* FAQ accordion (the capture had no closed/open CSS state — see wb.js).
   The 40px gap must live on a descendant, not on the grid item itself:
   padding/margin on the item is added to its box even at `0fr`, which would
   leave a 40px sliver in the closed state. */
.faq-a_block-wrapp > .faq-a_inner-wrapp {
  margin-top: 0;
  padding-top: 0;
  min-height: 0;
}
.faq-a_block-wrapp > .faq-a_inner-wrapp > *:first-child {
  margin-top: 40px;
}
.faq-qa_block .faq-q_arrow-wrapp {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-qa_block.is-open .faq-q_arrow-wrapp {
  transform: rotate(180deg);
}

/* --------------------------------------------------------------- forms */
.wb-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  margin: 14px 0 4px;
  font-family: var(--wb-font-body);
  font-size: 14px;
  line-height: 1.45;
  color: currentColor;
  cursor: pointer;
  text-align: left;
}
.wb-consent span {
  white-space: normal;
  overflow-wrap: anywhere;
}
.wb-consent input {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  accent-color: var(--wb-blue);
}
.wb-form-note {
  font-family: var(--wb-font-mono);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  opacity: 0.7;
  margin: 8px 0 12px;
}
.wb-form-status {
  font-family: var(--wb-font-body);
  font-size: 14px;
  line-height: 1.45;
  margin-top: 12px;
  min-height: 1.45em;
}
.wb-form-status[data-state="busy"] { color: var(--wb-blue); }
.wb-form-status[data-state="ok"] { color: var(--wb-green); }
.wb-form-status[data-state="error"] { color: var(--wb-checkpoint); }
/* Native validation messages are enough; do not paint fields red before submit. */
.c-form-input:user-invalid {
  border-color: var(--wb-checkpoint);
}

/* Simulated call progress shown by the demo adapter. */
.wb-demo-progress {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  font-family: var(--wb-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.wb-demo-progress li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  opacity: 0.35;
  transition: opacity 0.3s ease;
}
.wb-demo-progress li::before {
  content: "";
  width: 8px;
  height: 8px;
  background: currentColor;
  flex: none;
}
.wb-demo-progress li.is-done { opacity: 1; color: var(--wb-green); }
.wb-demo-progress li.is-active { opacity: 1; color: var(--wb-blue); }

/* ------------------------------------------------------------------ motion */
@keyframes wb-bar {
  0%, 100% { transform: scaleY(0.42); }
  50% { transform: scaleY(1); }
}
@keyframes wb-ring {
  0% { transform: scale(0.72); opacity: 0.9; }
  70%, 100% { transform: scale(1.18); opacity: 0; }
}
@keyframes wb-node-in {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: none; }
}
@keyframes wb-travel {
  0% { transform: translateX(0); }
  100% { transform: translateX(var(--wb-travel, 112px)); }
}
@keyframes wb-blink {
  0%, 45% { opacity: 1; }
  55%, 100% { opacity: 0.25; }
}
@keyframes wb-aurora-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-2%, 1.5%, 0) scale(1.06); }
}
@keyframes wb-grow {
  0% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}
@keyframes wb-grow-y {
  0% { transform: scaleY(0.15); }
  100% { transform: scaleY(1); }
}

.wb-wave__bar {
  transform-box: fill-box;
  transform-origin: center;
  animation: wb-bar 1.6s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -0.12s);
}
.wb-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: wb-ring 2.4s ease-out infinite;
  animation-delay: calc(var(--i, 0) * 0.5s);
}
.wb-anim__line, .wb-anim__turn, .wb-anim__cell, .wb-anim__node {
  animation: wb-node-in 0.6s ease both;
  animation-delay: calc(var(--i, 0) * 0.12s);
}
.wb-anim__travel {
  animation: wb-travel 2.6s cubic-bezier(0.55, 0, 0.45, 1) infinite alternate;
}
.wb-anim__blink, .wb-anim__pulse circle {
  animation: wb-blink 1.8s steps(1, end) infinite;
}
.wb-anim__grow {
  transform-box: fill-box;
  transform-origin: left center;
  animation: wb-grow 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 0.14s);
}
.wb-anim__grow-y {
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: wb-grow-y 1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 0.1s);
}
.wb-hero-bg__aurora {
  transform-box: fill-box;
  transform-origin: center;
  animation: wb-aurora-drift 26s ease-in-out infinite alternate;
}

/* Pause only the *looping* scene motion while a scene is off-screen (set by
   wb.js). One-shot intro animations must never be paused: they use fill both,
   so a paused intro would freeze the element at opacity 0. */
.wb-anim[data-idle="true"] .wb-wave__bar,
.wb-anim[data-idle="true"] .wb-ring,
.wb-anim[data-idle="true"] .wb-anim__travel,
.wb-anim[data-idle="true"] .wb-anim__blink,
.wb-anim[data-idle="true"] .wb-anim__pulse circle,
.wb-wave[data-idle="true"] .wb-wave__bar {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .c-rail-content .c-rail-list { animation: none !important; }
  .wb-tabs .fs-c-tabs-content-item { transition: none; }
}

/* --------------------------------------------------------- touch targets */
@media (max-width: 991px) {
  .navbar_mobile-row-new,
  .wb-tabs .fs-c-tabs-tab-item-trigger,
  .faq-qa_box {
    min-height: 48px;
  }

  /* The reference's compact buttons are kept at their designed size; the
     *hit* area is expanded with a pseudo-element so nothing reflows. */
  .c-button,
  .c-button-new-home,
  .button-nav-new,
  .c-label-button,
  .navbar_brand-new,
  .navbar_mobile-button-new,
  .c-footer-nav-link-sm,
  .c-nav-sub-group-link {
    position: relative;
  }
  .c-button::after,
  .c-button-new-home::after,
  .button-nav-new::after,
  .c-label-button::after,
  .navbar_brand-new::after,
  .navbar_mobile-button-new::after,
  .c-footer-nav-link-sm::after,
  .c-nav-sub-group-link::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    min-width: 44px;
    height: 100%;
    min-height: 44px;
    border-radius: inherit;
  }
}

/* ------------------------------------------------------ secondary pages ---
   scripts/build_pages.py generates fresh markup for /industries/*,
   /solutions/*, /about, /contact, /privacy, /terms, /cookies. The capture's
   grid columns (.c-section-title-grid, .c-list-item-wrapper) place children
   by per-instance Webflow #w-node-… ids that only exist on the homepage's
   original nodes; freshly generated markup has no such id, so children fall
   back to a 1-column span and render as a narrow strip. This is a state the
   capture never shipped (there was no secondary page), not a layout change
   to any capture-derived section. */
.wb-full-grid > * {
  grid-column: 1 / -1;
}

/* The capture's bare `h1{color:#fff}` rule assumes every h1 sits inside the
   dark homepage hero. Secondary pages put their h1 on a light background
   (c-home-overview), so it needs an explicit dark colour here — otherwise
   white-on-white renders the page title invisible. */
.c-home-overview .new-heading_small-h2 {
  color: var(--wb-ink);
}