/* Port-level overrides. Not part of the Webflow export — the three vendored stylesheets
   next to this file stay byte-identical to it, so anything the port changes on purpose
   lives here and stays greppable.

   Background video play/pause control. The export and the live template demo both paint
   Webflow's control in the bottom-right corner of every background video; this site does
   not want it. It is hidden for everyone who has not asked for reduced motion.

   It deliberately stays for prefers-reduced-motion users: webflow.js leaves their video
   paused and only toggles which glyph inside the button is hidden, so the button is the
   only way for them to start the video. Hiding it there would strand them on the poster.

   display:none rather than opacity/visibility so the button leaves the accessibility tree
   and the tab order with it, instead of becoming an invisible focus stop. */
@media (prefers-reduced-motion: no-preference) {
  .w-background-video--control {
    display: none;
  }
}

/* "How we work" (home). Sticky left column (the export's process-list-wrap), one dark
   panel on the right with the five steps as hairline-separated rows. Tokens only. */
.how-left {
  grid-row-gap: var(--_spacing---gap--gap-9x);
  width: 100%;
}
.how-panel {
  border-radius: var(--_spacing---radius--radius-1x);
  background-color: var(--_color-pallet---dark-shade--black-700);
  overflow: clip;
}
.how-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--_spacing---gap--gap-7x);
  padding: var(--_spacing---gap--gap-9x);
  transition: background-color .4s;
}
.how-row + .how-row {
  border-top: 1px solid var(--_color-pallet---border-color--border-100);
}
.how-row:hover {
  background-color: var(--_color-pallet---dark-shade--black-900);
}
.how-row-number {
  color: var(--_color-pallet---theme-color--theme-color-01);
  line-height: 1;
}
.how-row-body {
  display: flex;
  flex-flow: column;
  gap: var(--_spacing---gap--gap-6x);
}
.how-row-body .h5 {
  color: var(--_color-pallet---white-shade--white);
}
.how-row-text {
  max-width: 560px;
}
.how-row-pills {
  display: flex;
  flex-flow: wrap;
  gap: var(--_spacing---gap--gap-3x);
}
.how-pill {
  padding: 10px 18px;
}
.how-pill .integrate-tag {
  white-space: normal;
}
.how-row-closing {
  color: var(--_color-pallet---theme-color--theme-color-01);
}
@media (prefers-reduced-motion: reduce) {
  .how-row {
    transition: none;
  }
}
@media screen and (max-width: 767px) {
  .how-left {
    position: static;
  }
  .how-row {
    grid-template-columns: 1fr;
    gap: var(--_spacing---gap--gap-4x);
    padding: var(--_spacing---gap--gap-7x);
  }
}

/* Footer: the export had three link columns; the utility column is gone. */
.footer-right {
  grid-template-columns: 1fr 1fr;
}
/* One social link is left, so it sits on the copyright row instead of alone under the brand. */
.copywrite-block {
  justify-content: space-between;
  align-items: center;
}

/* Navbar mega menu: the contact card that replaced the export's map. */
.menu-card {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  text-align: left;
  gap: var(--_spacing---gap--gap-9x);
  width: 100%;
  min-height: 400px; /* the footprint of the map image it replaces (.menu-map max-height) */
  padding: var(--_spacing---gap--gap-9x);
  border-radius: var(--_spacing---radius--radius-1x);
  background-color: var(--_color-pallet---dark-shade--black-700);
}
.menu-card-text {
  display: flex;
  flex-flow: column;
  gap: var(--_spacing---gap--gap-4x);
}
.menu-card-title {
  color: var(--_color-pallet---white-shade--white);
}

.menu-card .button-wrap {
  width: auto;
}
.menu-locale {
  width: 100%;
  text-align: left;
}

/* Integrations hero chain: real brand marks replace the export's abstract shapes. They are
   square 24-unit SVGs, so the height follows the width the breakpoints clamp. */
.side-logo {
  height: auto;
}
@media screen and (max-width: 479px) {
  .side-logo {
    max-width: 16px;
  }
}

/* Use cases: the card stack tips in on scroll (CardStack.tsx), as the home cards do. */
.use-cases-list {
  perspective: 1000px;
}
.cases-card-v2 {
  transform-origin: 50% 0;
}

/* Rolling figures (RollingNumber.tsx): one line-height tall window over a 0-9 column. */
.roll {
  display: inline-block;
  height: 1.2em;
  height: 1lh;
  overflow: hidden;
  vertical-align: top;
}
.roll-track {
  display: flex;
  flex-flow: column;
  /* The process card's counter: 1s on the export's custom curve (slow in, settles late). */
  transition: transform 1s cubic-bezier(0.784, 0.325, 0.222, 0.98);
}
.roll-digit {
  display: block;
  height: 1.2em;
  height: 1lh;
}
@media (prefers-reduced-motion: reduce) {
  .roll-track {
    transition: none;
  }
}

/* Services page. The hero card lists the three pillars; each row jumps to its block. */
.feature-hero-img {
  object-fit: cover;
}
.pillar-index-link {
  justify-content: space-between;
  color: inherit;
  text-decoration: none;
  transition: color .4s;
}
.pillar-index-link:hover .body-text-l {
  color: var(--_color-pallet---theme-color--theme-color-01);
}
.pillar-block {
  scroll-margin-top: var(--_spacing---gap--gap-9x);
}

/* One block per pillar: the sticky card the export used, then its services in two columns.
   The block, not the card, is what stacks, so a pillar's grid scrolls with its card. */
.pillar-block {
  display: flex;
  flex-flow: column;
  gap: var(--_spacing---gap--gap-9x);
}
.pillar-block .frature-card {
  position: static;
}
.service-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--_spacing---gap--gap-6x);
}
.service-card {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  gap: var(--_spacing---gap--gap-7x);
  padding: 30px; /* .frature-content-box */
  border-radius: var(--_spacing---radius--radius-2x);
  background-color: var(--_color-pallet---dark-shade--black-700);
}
.service-card-title {
  max-width: none;
  margin-top: 0;
  margin-bottom: 0;
}
.service-card .feature-iteam:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
@media screen and (max-width: 767px) {
  .service-grid {
    grid-template-columns: 1fr;
  }
}

/* "Every project includes": the use-case hero's counter grid, with text in the figure slot. */
.section.includes {
  padding-top: var(--_spacing---section-spacing--s);
}
.includes-grid .cases-hero-card {
  grid-column-gap: var(--_spacing---gap--gap-9x);
  grid-row-gap: var(--_spacing---gap--gap-9x);
}
.service-card .category-wrapper {
  justify-content: flex-start;
}

/* Contact page: the column beside the form holds the details as compact rows, then the
   FAQ accordion. Same surface and padding as the form card (.contact-form-wrapper). */
.contact-panel {
  display: flex;
  flex-flow: column;
  gap: var(--_spacing---gap--gap-9x);
  padding: 30px;
  border-radius: var(--_spacing---radius--radius-2x);
  background-color: var(--_color-pallet---dark-shade--black-300);
}
.contact-rows {
  display: flex;
  flex-flow: column;
}
.contact-row {
  display: flex;
  align-items: center;
  gap: var(--_spacing---gap--gap-4x);
  padding-block: var(--_spacing---gap--gap-5x);
  border-bottom: 1px solid var(--_color-pallet---border-color--border-600);
}
.contact-row:last-child {
  border-bottom: none;
}
.contact-row-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  border-radius: var(--_spacing---radius--radius-1x);
  background-color: var(--_color-pallet---dark-shade--black-700);
}
.contact-row-body {
  display: flex;
  flex-flow: column;
  gap: 2px;
  min-width: 0;
}
.contact-row-link {
  color: var(--_color-pallet---white-shade--white);
  overflow-wrap: anywhere;
  text-decoration: none;
  transition: color .4s;
}
.contact-row-link:hover {
  color: var(--_color-pallet---theme-color--theme-color-01);
}
.contact-row-figure {
  display: flex;
  align-items: baseline;
  gap: var(--_spacing---gap--gap-2x);
}
.contact-panel-faq {
  display: flex;
  flex-flow: column;
  gap: var(--_spacing---gap--gap-6x);
}
.contact-panel-list {
  display: flex;
  flex-flow: column;
  gap: var(--_spacing---gap--gap-3x);
}
.contact-panel-list .faq-iteam {
  padding: var(--_spacing---gap--gap-7x);
}
.contact-panel-list .faq-title {
  font-size: var(--_typography---font-size--body-text-l);
  line-height: var(--_typography---line-height--body-text);
}
.section.contact-form {
  scroll-margin-top: var(--_spacing---gap--gap-9x);
}


/* Contact hero card: the stock image (landscape) fills the export's portrait slot. */
.contact-user-img {
  width: 183px;
  height: 194px;
  object-fit: cover;
  object-position: 50% 30%;
}

/* Home benefits card: "2 weeks" in the export's odometer, the engagement's dates below
   where its bar chart was. */
.benefit-unit {
  align-self: flex-end;
  margin-left: var(--_spacing---gap--gap-3x);
  font-size: var(--_typography---font-size--h6);
  line-height: var(--_typography---line-height--h6);
  text-transform: none;
  color: var(--_color-pallet---dark-shade--body-text);
}
.benefit-dates {
  display: flex;
  flex-flow: column;
}
.benefit-date {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: 'dot when' 'dot what';
  column-gap: var(--_spacing---gap--gap-4x);
  padding-block: var(--_spacing---gap--gap-4x);
  border-top: 1px solid var(--_color-pallet---border-color--border-600);
}
.benefit-date-dot {
  grid-area: dot;
  width: 8px;
  height: 8px;
  margin-top: 8px;
  border-radius: var(--_spacing---radius--full);
  background-color: var(--_color-pallet---theme-color--theme-color-01);
}

/* Contact form: the export hid its status blocks until Webflow toggled them; here React
   renders them, so they show as blocks. The honeypot is off-screen, not display:none,
   which some bots skip. */
.contact-status {
  display: block;
  margin-top: var(--_spacing---gap--gap-6x);
}
.contact-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.submit-button:disabled {
  opacity: 0.6;
  cursor: wait;
}