/* Page-specific head <style> captured verbatim from the live
   /service/<slug> pages (Webflow). The shared chrome's head blocks
   (whatsapp form, navbar, anti-flicker) live with Header/Footer; only the
   page's own <style> blocks are kept here. The three slugs ship slightly
   different head blocks — this file is the UNION of all three:
     - dedicated-team : .rv-button-with-icon + .rv-sliding-tab* block
     - on-demand      : .rv-button-with-icon + .rv-services-how-item block
     - project-based  : .rv-button-with-icon + .rv-homepage-services-process
                        + .rv-row.service-item + .rv-services-how-item block
   Loaded via <link rel="stylesheet" precedence="page"> from the route.
   React hoists this above the layout's links, so rules win on specificity,
   never !important. All selectors below are scoped to page-unique ancestors
   (rv-sliding-tab*, rv-services-how-item, rv-row.service-item,
   rv-homepage-services-process) so they cannot bleed onto shared chrome —
   the only exception is the .rv-button-with-icon block, kept verbatim and
   identical to what /services already ships. */

/* ===== shared across all 3 slugs (button-with-icon hover) ===== */
.rv-button-with-icon:hover .rv-button-arrow-icon {
  transform: translateX(8px);
}
.rv-button-with-icon:not(.yellow) .rv-button-arrow-icon svg {
  width: 28px;
  height: 28px;
}
.rv-button-with-icon:not(.yellow):hover .rv-button-arrow-icon {
  transform: translateX(8px);
}
.rv-button-with-icon:not(.yellow) .rv-button-arrow-icon svg path {
  transition: fill 0.2s ease;
}
.rv-button-with-icon:not(.yellow):hover .rv-button-arrow-icon svg path {
  fill: #ffffff;
}

/* ===== dedicated-team: sliding talent tabs ===== */
@media (min-width: 479px) {
  /* Descendant selector beats webflow.css's single-class .rv-sliding-tabs{width:100%}.
     Our precedence stylesheet hoists ABOVE the layout links, so an equal-specificity
     rule loses on source order — the tab strip would be 160px too narrow on the right. */
  .rv-services-talent .rv-sliding-tabs {
    width: calc(100% + 160px);
  }
  .rv-sliding-tab-item {
    transition: all .4s;
  }
  .rv-sliding-tab-robot {
    transition: all .4s;
  }
  .rv-sliding-tab-item .rv-sliding-tab-content * {
    transition: all .4s;
  }
  .rv-sliding-tab-item.active .rv-sliding-tab-robot {
    opacity: 0;
    pointer-events: none;
  }
  .rv-sliding-tab-item:not(.active) {
    cursor: pointer;
  }
  .rv-sliding-tab-item:not(.active) .rv-sliding-tab-content {
    border-left: 3px solid #e0e1e6;
  }
  .rv-sliding-tab-item:not(.active) .rv-sliding-tab-content * {
    opacity: 0.2;
  }
  .rv-sliding-tab-item:not(.active) .rv-sliding-tab-content .rv-text,
  .rv-sliding-tab-item:not(.active) .rv-sliding-tab-content .rv-button-wrap {
    opacity: 0;
  }
  .rv-sliding-tab-item:not(.active) .rv-sliding-tab-image {
    left: -160px;
  }
  .rv-sliding-tab-item:nth-child(2) {
    left: calc(100% - 480px);
  }
  .rv-sliding-tab-item:nth-child(3) {
    left: calc(100% - 320px);
  }
  .rv-sliding-tab-item:nth-child(4) {
    left: calc(100% - 160px);
  }
  .rv-sliding-tab-item.pull-left:nth-child(2) {
    left: 320px;
  }
  .rv-sliding-tab-item.pull-left:nth-child(3) {
    left: 480px;
  }
  .rv-sliding-tab-item.pull-left:nth-child(4) {
    left: 640px;
  }
}

/* ===== project-based: process hover blur + service-item zig-zag ===== */
.rv-homepage-services-process:hover .rv-homepage-services-process-image {
  filter: blur(3px);
}

.rv-row.service-item:nth-child(even) {
  margin-left: 150px;
}
.rv-row.service-item:nth-child(odd) {
  margin-right: 150px;
}

/* ===== on-demand + project-based: how-we-work zig-zag ===== */
.rv-services-how-item:nth-child(even) {
  margin-left: 420px;
}
.rv-services-how-item:nth-child(even) img {
  left: auto;
  right: 160px;
}
.rv-services-how-item:nth-child(odd) {
  margin-right: 420px;
}

@media (max-width: 478px) {
  .rv-row.service-item:nth-child(even) {
    margin-left: 0;
  }
  .rv-row.service-item:nth-child(odd) {
    margin-right: 0;
  }
  .rv-services-how-item:nth-child(even) {
    margin-left: 0;
  }
  .rv-services-how-item:nth-child(odd) {
    margin-right: 0;
  }
}

/* ===== FAQ accordion smooth open/close (React) =====
   The live page drove the .rv-services-faq accordion with the Webflow runtime;
   here the React component (ServiceFaq) toggles `.is-open`. These rules are
   the same grid 0fr->1fr collapse used on the /faq and /support pages — copied
   here because precedence-page stylesheets are swapped per route on client
   nav, so the accordion CSS must travel with this page too. Descendant
   selector (.rv-accordion ...) beats webflow.css's single-class padding rule
   regardless of the precedence-hoist source order. */
.rv-accordion .rv-accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  padding-top: 0;
  padding-bottom: 0;
  transition: grid-template-rows 0.32s ease;
}
.rv-accordion .rv-accordion-content > .rv-blog-single-content {
  overflow: hidden;
  min-height: 0;
}
.rv-accordion .rv-accordion-content.is-open {
  grid-template-rows: 1fr;
}