/*
 * migration.css — bridge between the Webflow export and the Next.js rebuild.
 * Holds (a) styles that lived in inline <style> embeds on the Webflow page and
 * (b) small CSS replacements for behavior Webflow drove with JS
 * (Swiper carousels, logo marquee, hover dropdowns).
 */

/* --- from the hero w-embed on index.html --- */
@media (min-width: 1180px) {
  .pseo-hero_numbers {
    flex-direction: row;
  }
}
.pseo-hero-button-wrapper .button[calendly-link="https://calendly.com/awesomic/demo?hide_gdpr_banner=1"] {
  display: none;
}
@media (min-width: 992px) and (max-width: 1038px) {
  .pseo-hero-button-wrapper .button[calendly-link="https://calendly.com/awesomic/demo?hide_gdpr_banner=1"] {
    display: inline-block;
  }
  .pseo-hero-button-wrapper .features_form.pseo-mod {
    display: none;
  }
}

/* --- rotating headline (was an inline embed next to the h1) --- */
.hero_moving-wrapper {
  margin-top: -12px;
}
.words-wrapper {
  display: inline-block;
  overflow: hidden;
  flex-grow: 1;
  vertical-align: bottom;
  padding-bottom: calc(var(--_fonts---pseo-heading) * 0.15);
  height: calc(var(--_fonts---pseo-heading) * 1.3);
  position: relative;
  top: 12px;
}
.words-inner {
  display: inline-block;
  animation: scroll-text 10s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;
}
.words-wrapper span {
  display: block;
}
.words-wrapper .words-inner span {
  margin-top: 20px;
}
@media (max-width: 767px) {
  .words-wrapper .words-inner span {
    margin-top: 8px;
  }
}
@media (max-width: 414px) {
  .words-wrapper {
    margin-top: -8px;
  }
}
@keyframes scroll-text {
  0% { transform: translateY(-85%); }
  20% { transform: translateY(-85%); }
  25% { transform: translateY(-65%); }
  45% { transform: translateY(-65%); }
  50% { transform: translateY(-45%); }
  70% { transform: translateY(-45%); }
  75% { transform: translateY(-25%); }
  95% { transform: translateY(-25%); }
  100% { transform: translateY(-5%); }
}

/* --- logo marquee: Webflow animated this with JS; the markup already ships a
       duplicated list (.logo-carousel-clone), so a -50% translate loops clean --- */
.logo-carousel-wrap {
  animation: logo-marquee 30s linear infinite;
}
@keyframes logo-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* --- hero cards: Swiper JS replaced with a native scroll-snap row --- */
.hero-swiper .swiper-wrapper {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hero-swiper .swiper-wrapper::-webkit-scrollbar {
  display: none;
}
.hero-swiper > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start;
}
/* Swiper's CDN stylesheet loads after this file and resets .swiper-slide to
   block. Preserve the intended flex layout on every hero card. */
.hero-card {
  display: flex !important;
}
/* inner story-swipers: show the first frame only until Swiper is reintroduced */
.hero-card_swiper .swiper-wrapper {
  display: block;
  overflow: hidden;
}
.hero-card_swiper .swiper-slide:not(:first-child) {
  display: none;
}

/* --- gallery menu slider (GallerySlider.tsx) ---
   The Webflow page got its track layout from swiper-bundle.css on a CDN and
   defined the rest in a page-level <style>; neither is in the class export, so
   without these rules the slides stack instead of forming a row and the story
   bullets render with no box at all. Ported from gallery/web.html. */
.design-image_slider {
  width: 100%;
  max-width: 100vw;
  min-width: 0;
  height: 100%;
  min-height: 0;
  max-height: 100vw;
  overflow: hidden;
}
/* Case study layout: grid items default to min-width:auto, so once Swiper sizes
   the slides to 100vw the main column grows to fit them and pushes the sticky
   sidebar off-screen. Let the columns keep their fr widths. */
.case_content > * {
  min-width: 0;
}
.design-image_slider .swiper-wrapper {
  display: flex;
  height: 100%;
  max-height: 100%;
  will-change: transform;
}
.design-image_slider .swiper-slide {
  display: block;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
}

/* arrows sit over the image and only appear on hover */
.design-swiper-prev,
.design-swiper-next {
  opacity: 0;
  transition: opacity 0.25s ease-out;
  background: none;
  border: 0;
  cursor: pointer;
}
.menu-swiper-wrapper:hover .design-swiper-prev,
.menu-swiper-wrapper:hover .design-swiper-next,
.case-study-page .design-image_slider:hover .design-swiper-prev,
.case-study-page .design-image_slider:hover .design-swiper-next,
.design-swiper-prev:focus-visible,
.design-swiper-next:focus-visible {
  opacity: 1;
}

.story__pagination .story-bullet {
  opacity: unset;
  position: relative;
  width: 100%;
  height: 4px !important;
  background: #ffffff33;
  border-radius: 10000px;
  overflow: hidden;
}
.story__pagination .story-bullet .swiper-pagination-progress {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  height: 100%;
  background: #fff;
}
/* Swiper drove this fill from its autoplay timer; here it is a CSS animation
   the component restarts by remounting the element on each slide change. */
.story__pagination .story-bullet .swiper-pagination-progress[data-state='done'] {
  width: 100%;
}
.story__pagination .story-bullet .swiper-pagination-progress[data-state='running'],
.story__pagination .story-bullet .swiper-pagination-progress[data-state='paused'] {
  animation: gallery-story-progress linear forwards;
}
.story__pagination .story-bullet .swiper-pagination-progress[data-state='paused'] {
  animation-play-state: paused;
}
.story__pagination .story-bullet .swiper-pagination-progress[data-state='idle'] {
  width: 0;
}
@keyframes gallery-story-progress {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* --- navbar dropdowns: mirror Webflow's .w--open state on desktop ---
   The Next.js header does not load webflow.js, so merely changing display
   leaves the menu with the base Webflow positioning instead of its intended
   centred, transparent open state. */
@media (min-width: 992px) {
  /* Match the production icon swap for every shared navbar dropdown link.
     Both icons stay in the DOM so their width and padding can animate without
     moving the label; only the active icon occupies its 24px slot. */
  .dropdown-link:not(.inactive) .dropdown-icon {
    flex: 0 0 auto;
    width: 24px;
    padding-right: 8px;
    overflow: hidden;
  }

  .dropdown-link:not(.inactive) .dropdown-hover-icon {
    flex: 0 0 auto;
    width: 0;
    padding: 0;
    overflow: hidden;
  }

  .dropdown-link:not(.inactive):hover .dropdown-icon,
  .dropdown-link:not(.inactive):focus-visible .dropdown-icon {
    width: 0;
    padding-right: 0;
  }

  .dropdown-link:not(.inactive):hover .dropdown-hover-icon,
  .dropdown-link:not(.inactive):focus-visible .dropdown-hover-icon {
    width: 24px;
    padding-left: 8px;
  }

  .navbar-dropdown:hover .dropdown-navigation.w-dropdown-list,
  .navbar-dropdown:focus-within .dropdown-navigation.w-dropdown-list {
    background-color: transparent;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    min-width: max-content;
    display: flex;
    left: 50%;
    overflow: hidden;
    transform: translateX(-50%);
    z-index: 13;
  }

  /* The source export expected Webflow to toggle this layer. The rebuilt
     navbar opens dropdowns with CSS instead, so tie the overlay to the
     same hover / keyboard-focus state. */
  .navbar_component:has(.navbar-dropdown:hover) .navbar-overlay,
  .navbar_component:has(.navbar-dropdown:focus-within) .navbar-overlay {
    display: block;
    /* The archived Webflow interaction script retains opacity: 0 inline. */
    opacity: 1 !important;
  }

  .navbar-dropdown.static:hover .dropdown-navigation.mega-menu.w-dropdown-list,
  .navbar-dropdown.static:focus-within .dropdown-navigation.mega-menu.w-dropdown-list {
    min-width: 100%;
    display: block;
  }
}

/* --- talents-swiper: native scroll-snap row replacing Swiper (same pattern as .hero-swiper) ---
   Scoped to :not(.swiper-initialized): migrated Webflow pages still run the
   archived `new Swiper(...)` init, and Swiper translates .swiper-wrapper. If the
   wrapper is also the overflow clip box, the visible window moves with it and
   slides get cut off after the first "next" click. */
.talents-swiper:not(.swiper-initialized) .swiper-wrapper {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.talents-swiper:not(.swiper-initialized) .swiper-wrapper::-webkit-scrollbar {
  display: none;
}
.talents-swiper:not(.swiper-initialized) .swiper-wrapper > .swiper-slide {
  flex: 0 0 auto;
  width: 350px; /* Swiper sized slides via JS; matches .talent-slide_photo-container max-width */
  max-width: 80vw;
  scroll-snap-align: start;
}

/* --- cases + achievements swipers: same Swiper-replacement pattern (CasesSlider.tsx) --- */
.cases_swiper:not(.swiper-initialized) .swiper-wrapper,
.achievements-component:not(.swiper-initialized) .swiper-wrapper {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cases_swiper:not(.swiper-initialized) .swiper-wrapper::-webkit-scrollbar,
.achievements-component:not(.swiper-initialized) .swiper-wrapper::-webkit-scrollbar {
  display: none;
}
.cases_swiper:not(.swiper-initialized) .swiper-wrapper > .swiper-slide,
.achievements-component:not(.swiper-initialized) .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start;
  flex-shrink: 0;
}
/* the export gives .case_slide width:100%; pin slide widths for the snap row */
.cases_swiper:not(.swiper-initialized) .case_slide.swiper-slide {
  width: min(792px, 85vw);
}
.achievements-component:not(.swiper-initialized) .achievements-slide.swiper-slide {
  width: min(316px, 80vw);
}

/* --- Why Awesomic: tag marquees (was an inline w-embed; .logo-carousel-wrap
       is already animated in the logo-marquee block above) --- */
.tag-wrapper {
  animation: textloop 50s infinite linear;
}
.reverse-tag-wrapper {
  animation: reverseloop 50s infinite linear;
}
@keyframes textloop {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes reverseloop {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0%); }
}

/* --- Why Awesomic: rotating clip-path mask on the vetted-talent face card.
       The export CSS ships a broken clip-path: url('../images/') for .face-image
       (404s on every load, prod site included); the real clip shape is the
       inline SVG <clipPath id="shapeClip"> rendered right next to the img. --- */
.face-image {
  clip-path: url(#shapeClip);
}
#clipPath {
  animation: rotateClip 12s linear infinite;
  transform-origin: 69px 69px;
}
@keyframes rotateClip {
  from { transform: rotate(45deg); }
  to { transform: rotate(405deg); /* 45deg + 360deg */ }
}
.why-animated-tabs.upd.w-tabs .w-tab-content {
  display: flex;
}

/* --- Why Awesomic + Services CTA: rotating headline (shared keyframes scroll-text-cta) --- */
.words-wrapper-cta {
  display: inline-block;
  overflow: hidden;
  flex-grow: 1;
  height: calc(var(--_fonts---h2-size) * 1.28);
  vertical-align: bottom;
}
.words-inner-cta {
  display: inline-block;
  animation: scroll-text-cta 8s ease-in-out infinite;
}
.words-wrapper-cta span {
  display: block;
}
@keyframes scroll-text-cta {
  0% { transform: translateY(-80%); }
  20% { transform: translateY(-80%); }
  25% { transform: translateY(-60%); }
  45% { transform: translateY(-60%); }
  50% { transform: translateY(-40%); }
  70% { transform: translateY(-40%); }
  75% { transform: translateY(-20%); }
  95% { transform: translateY(-20%); }
  100% { transform: translateY(-0%); }
}

/* --- Services section (#services-block): rotating heading + tab/card styles
       from inline w-embed <style> blocks --- */
.services-heading {
  text-align: left;
}
@media (max-width: 767px) {
  .services-heading {
    padding-left: 20px;
  }
}
.service-heading-rock {
  width: 34px;
  height: 34px;
  background: url('https://cdn.prod.website-files.com/68c2a33d71ce477bc4cfa871/68c2a33d71ce477bc4cfb028_logo%20on%20rock.avif') no-repeat;
  display: inline-block;
  background-size: cover;
  top: 4px;
  position: relative;
}
.words-wrapper-ser {
  display: inline-block;
  overflow: hidden;
  flex-grow: 1;
  height: calc(var(--_fonts---h3-size) * 1.28);
  vertical-align: bottom;
}
.words-inner-ser {
  display: inline-block;
  animation: scroll-text-cta 8s ease-in-out infinite;
}
.words-wrapper-ser span {
  display: block;
}
@media (min-width: 992px) {
  .services-heading {
    padding-left: 24px;
  }
}
@media (min-width: 1440px) {
  .services-heading {
    position: absolute;
    text-align: left;
    max-width: 270px;
    padding-left: unset;
  }
}
.services-tabs::before, .services-tabs::after {
  display: none;
}
#nocode-service .service-item:hover .no-code-service-logo,
#nocode-service .service-card_simple:hover .no-code-service-logo {
  filter: grayscale(0);
}
.services_tab-link .service-tab_icon {
  width: 0;
  min-width: 0;
  padding-right: 0;
}
.services_tab-link.w--current .service-tab_icon {
  width: 26px !important;
  min-width: 26px !important;
  padding-right: 10px;
}
@keyframes zoomIn {
  from { transform: scale(1) translateX(0px); }
  to { transform: scale(1.2) translateX(20px); }
}
@keyframes moveLeftToRight {
  from { transform: translateX(0px); }
  to { transform: translateX(-178px); }
}
@keyframes moveTopToBottom {
  from { transform: translateY(0px); }
  to { transform: translateY(-178px); }
}
@media (min-width: 1440px) {
  .service-image.zoom-in {
    animation: zoomIn 2s linear forwards;
  }
  .service-image.left-to-right {
    animation: moveLeftToRight 2s linear forwards;
  }
  .service-image.top-to-bottom {
    animation: moveTopToBottom 2s linear forwards;
  }
}
.motion-service-button {
  opacity: 0;
  transition: all .2s linear;
}
.service-item[motion-service]:hover .motion-service-button {
  opacity: 1;
}

/* --- Reviews ("Trusted by 4,000+ companies"): Webflow set this collapsed
       height via inline JS; the expand handler was commented out in the export,
       so the collapsed state is permanent and "Read more" links out --- */
.reviews-component {
  max-height: 1460px;
  overflow: hidden;
  transition: max-height 0.5s ease;
}
@media screen and (max-width: 478px) {
  .reviews-component {
    max-height: 2000px;
  }
}

/* --- HowItWorks: inline <style> from the .w-embed inside section#how-it-wroks --- */
.how-tabs_content {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  /* background the removed lazy-load script injected on scroll-into-view;
     same local hills image as the homepage "How it works" block */
  background-image: url("/assets/illustrations/how-it-works/how-it-work-img.jpg");
}
.how-tabs_component::before, .how-tabs_component::after {
  display: none;
}
.how-tab_link .how-tab_link-content .how-tab_details {
  height: 0;
  background: rgba(255,255,255,0);
  opacity: 0;
}
.how-tab_link.w--current .how-tab_link-content .how-tab_details {
  height: auto;
  background: rgba(255,255,255,1);
  opacity: 1;
}
.how-tab_link .how-tab_link-content .how-tab_header img {
  transition: all .25s;
}
.how-tab_link.w--current .how-tab_link-content .how-tab_header img {
  transform: rotate(-90deg);
}
.how-tab_link .how-tab_link-content {
  background: rgba(255,255,255,0);
  transition: all .25s;
}
.how-tab_link.w--current .how-tab_link-content {
  background: rgba(255,255,255,1);
  border-color: var(--_colors---gray--gray-150);
  box-shadow: 0 4px 12px #0000000a;
  height: 264px;
}
@media screen and (max-width: 991px) {
  .how-tab_link.w--current .how-tab_link-content {
    height: auto;
  }
  .how-tab_link .how-tabs_content {
    display: none;
  }
  .how-tab_link .how-tabs_content img {
    backdrop-filter: blur(8px);
  }
  .how-tab_link.w--current .how-tabs_content {
    display: flex;
  }
}

/* --- CtaBlock: cta background image behavior (from inline <style> in section#cta-block) --- */
.section_cta.animate-background .cta-bg-image {
  bottom: -20%;
}
@media screen and (max-width: 991px) {
  .section_cta .cta-bg-image {
    width: 1100px;
    max-width: none;
  }
  .section_cta.animate-background .cta-bg-image {
    bottom: 0%;
  }
}
@media screen and (max-width: 467px) {
  .section_cta .cta-bg-image {
    width: 670px;
    max-width: none;
  }
}

/* --- Faq: Gemini link tooltip (from inline <style> in the FAQ w-embed) --- */
.gemini-link {
  position: relative;
}
.gemini-tooltip {
  visibility: hidden;
  width: 250px;
  color: #ffffff;
  text-align: center;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 0;
  background: #3F3F46;
  transform: translateY(calc(100% + 10px));
  border-radius: 12px;
  transition: all .25s ease-out;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.gemini-tooltip::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #3F3F46 transparent;
}
.gemini-link:hover .gemini-tooltip {
  visibility: visible;
}

/* Pricing page behavior restored without loading Webflow's site-wide runtime. */
#pricing-webflow-content .pricing_item.pricing-expanded {
  max-height: none !important;
}

/* Plan icons share one 32px size in the cards and the compare-plans header. */
#pricing-webflow-content .pricing-name > img {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  object-fit: contain;
}

/* Plan cards share row tracks (subgrid) so prices and buttons line up across
   cards, even though Dedicated Talent has an email field instead of a price.
   Rows: 1 name + copy, 2 old price (quarterly), 3 price / email, 4 button,
   5 feature list, 6 footer. */
/* The outer row gap would repeat between every subgrid row, so cards are
   spaced with a bottom margin instead. */
#pricing-webflow-content .pricing-grid {
  row-gap: 0;
  margin-bottom: -12px;
}

#pricing-webflow-content .pricing-grid > .pricing_item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 6;
  row-gap: 0;
  max-height: none;
  margin-bottom: 12px;
}

#pricing-webflow-content .pricing_item .pricing_top-info,
#pricing-webflow-content .pricing_item .pricing_top-info > div:nth-child(2),
#pricing-webflow-content .pricing_item .pricing_top-info > div:nth-child(2) > .w-form,
#pricing-webflow-content .pricing_item .pricing_top-info > div:nth-child(2) > .w-form > form {
  display: contents;
}

#pricing-webflow-content .pricing_item .pricing_top-info > div:nth-child(2) > [class^='spacer-'],
#pricing-webflow-content .pricing_item .pricing_top-info form > [class^='spacer-'] {
  display: none;
}

#pricing-webflow-content .pricing_item .pricing_top-info > div:first-child {
  grid-row: 1;
  margin-bottom: 24px;
}

#pricing-webflow-content .pricing_item .pricing_top-info > div:nth-child(2) > .text-style-strikethrough {
  grid-row: 2;
  align-self: end;
  margin-bottom: 8px;
}

#pricing-webflow-content .pricing_item .pricing_price-container,
#pricing-webflow-content .pricing_item .pricing_top-info form > .input {
  grid-row: 3;
  align-self: end;
  margin: 0 0 24px;
}

#pricing-webflow-content .pricing_item .pricing_top-info form > .input {
  margin-bottom: 20px;
}

#pricing-webflow-content .pricing_item .w-form-done,
#pricing-webflow-content .pricing_item .w-form-fail {
  grid-row: 3 / span 2;
}

#pricing-webflow-content .pricing_item .pricing_top-info > div:nth-child(2) > .button,
#pricing-webflow-content .pricing_item .submit-button_wrapper {
  grid-row: 4;
}

#pricing-webflow-content .pricing_item .pricing_list {
  grid-row: 5;
  margin-top: 28px;
}

#pricing-webflow-content .pricing-grid > .pricing_item > div:last-child {
  grid-row: 6;
  align-self: end;
  margin-top: 24px;
}

#pricing-webflow-content .faq_answer {
  overflow: hidden;
  transition: max-height 260ms ease;
}

#pricing-webflow-content .faq_item.is-open .faq_chevron {
  transform: rotate(180deg);
}

/* About page: lightweight equivalents for the exported Swiper behavior. */
#about-webflow-content .history_swiper-container {
  overflow: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}

#about-webflow-content .history_swiper-container::-webkit-scrollbar,
#about-webflow-content .teams-photo-swiper::-webkit-scrollbar {
  display: none;
}

#about-webflow-content .history_swiper-container .history-element {
  scroll-snap-align: start;
}

#about-webflow-content .team-swiper {
  overflow: hidden;
}

#about-webflow-content .team-swiper > .swiper-wrapper {
  display: flex;
  transition: transform 450ms ease;
}

#about-webflow-content .team-swiper > .swiper-wrapper > .swiper-slide {
  flex: 0 0 100%;
  min-width: 100%;
}

#about-webflow-content .story__pagination {
  display: flex;
  gap: 4px;
}

#about-webflow-content .story__pagination .story-bullet {
  flex: 1;
}

@media screen and (max-width: 991px) {
  #about-webflow-content .history_swiper-container {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
  }

  #about-webflow-content .history_swiper-container .swiper-wrapper.mod-history {
    display: flex;
  }

  #about-webflow-content .history_swiper-container .history-element {
    flex: 0 0 95%;
  }
}

@media screen and (max-width: 478px) {
  #about-webflow-content .teams-photo-swiper {
    overflow-x: auto;
    scrollbar-width: none;
  }

  #about-webflow-content .about_teams-component.swiper-wrapper {
    display: flex;
    gap: 12px;
    width: max-content;
  }

  #about-webflow-content .team_part-item.swiper-slide {
    flex: 0 0 88vw;
    width: 88vw;
  }
}

/* --- plan cards: stack instead of squeeze on narrow screens ---
 * .complex-bl_pricing-item is a two-column flex row (left: plan tag +
 * description, right: price + button) with no wrapping, so below ~560px the
 * left column collapses to a ~150px measure and the plan tag breaks mid-phrase.
 * Below the threshold the two columns become `display: contents`, which lifts
 * their four children into the card's own flex context so they can be ordered
 * plan tag -> price -> description -> button in a single stack.
 * Scoped to max-width: 560px — tablet and desktop are untouched.
 */
@media screen and (max-width: 560px) {
  .complex-bl_pricing-item {
    flex-direction: column;
    align-items: stretch;
  }

  .complex-bl_pricing-item_left,
  .complex-bl_pricing-item_right {
    display: contents;
  }

  .complex-bl_pricing-item_left > .category-tag {
    order: 1;
    align-self: flex-start;
    white-space: nowrap;
  }

  .complex-bl_pricing-item_right > .w-layout-hflex {
    order: 2;
    justify-content: flex-start;
  }

  /* the Dedicated Talent card carries a hidden price only to align the button */
  .complex-bl_pricing-item_right > .w-layout-hflex.opacity-0 {
    display: none;
  }

  .complex-bl_pricing-item_left > :not(.category-tag) {
    order: 3;
  }

  .complex-bl_pricing-item_right > .button {
    order: 4;
    align-self: flex-start;
  }
}

/* Collapsed (<=991px) menu: the link list starts just under the navbar and
   fills the space above the pinned Log in / Book demo / Call me now block
   instead of stopping at Webflow's 400px cap, so an opened Services list
   scrolls in a taller area. --menu-cta-height is that block's height; the
   block covers the menu's bottom padding. 64px is the navbar height. */
@media screen and (max-width: 991px) {
  .navbar_menu.is-page-height-tablet {
    --menu-cta-height: 259px;
    padding-top: 1rem;
    padding-bottom: var(--menu-cta-height);
  }

  .navbar_menu.navigation-list {
    max-height: calc(100dvh - 64px - 1rem - var(--menu-cta-height));
    overflow-y: auto;
  }
}

/* Phones: Services, Solutions and Industry stack in one column (each column
   is otherwise pinned to its own grid track). */
@media screen and (max-width: 767px) {
  .dropdown-navigation.inner.megamenu {
    grid-template-columns: 1fr;
  }

  .dropdown-navigation.inner.megamenu > .dropdown-column {
    grid-column: auto;
  }
}

@media screen and (max-width: 479px) {
  .navbar_menu.is-page-height-tablet {
    --menu-cta-height: 223px;
  }
}