/* Copied from storetasker-website/web/public/css/home.css by tools/redesign/import-base.mjs.
   Element-level rules skip .st-legacy areas (old page bodies, hire panel); nothing else changed. */
/* Home page custom CSS carried over from the Webflow page embeds, in original order. */
  /* Smooth grow/shrink of the pill as words change length */
  .talk-pill { transition: width 90ms linear; }

  /* Blinking text cursor */
  .pill-cursor { animation: pill-blink 0.9s step-end infinite; }
  @keyframes pill-blink {
    0%, 55% { opacity: 1; }
    56%, 100% { opacity: 0; }
  }

  /* Accessibility: no motion for users who ask for none */
  @media (prefers-reduced-motion: reduce) {
    .pill-cursor { animation: none; opacity: 1; }
    .talk-pill { transition: none; }
  }

  /* Prevent a flash of line 2 before the reveal is armed.
     Stays visible inside the Webflow Designer/editor. */
  .home-hero_text h1.caps:nth-of-type(2) { visibility: hidden; }
  .wf-design-mode .home-hero_text h1.caps:nth-of-type(2),
  .w-editor      .home-hero_text h1.caps:nth-of-type(2) { visibility: visible !important; }

  /* ---------- DESKTOP: 992px and up (unchanged) ---------- */
  @media (min-width: 992px) {
    .hero-carousel_wrapper {
      position: relative;
      overflow-x: clip;
      overflow-y: visible;
      height: 40.3vw;       /* fallback before JS runs */
      max-height: 46em;
    }
    .hero-carousel_wrapper .home-hero_item { position: absolute; top: 0; left: 50%; }
    .hero-carousel_wrapper .home-hero_image { width: 100%; height: 100%; }
  }

  /* ---------- MOBILE / TABLET: 991px and down (left-anchored) ---------- */
  @media (max-width: 991px) {
    .hero-carousel_wrapper {
      position: relative;
      overflow-x: clip;
      overflow-y: visible;
      height: 78vw;         /* fallback before JS runs; JS sets the exact px height */
    }
    .hero-carousel_wrapper .home-hero_item { position: absolute; top: 0; left: 0; }
    .hero-carousel_wrapper .home-hero_image {
      width: 100%; height: 100%;
      object-fit: cover;    /* crop to the slot ratio instead of stretching */
    }
  }

  /* Logo Marquee CSS */
.logo-marquee_track {
  display: flex;
  width: max-content;
}

.logo_wrapper {
  overflow: hidden; /* clips marquee to wrapper bounds */
  width: 100%;
}

.logo-marquee_set {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  animation: logo-marquee-scroll linear infinite;
  animation-play-state: paused;
}

@keyframes logo-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* >=992px: do nothing — native Webflow flex row (28/44/28) handles desktop */

/* ===== Shared Flickity setup for everything 991px and down ===== */
@media screen and (max-width: 991px) {

  /* Reveal the wrapper (Webflow hides .mobile-hide at <=767px) */
  .box-lines.mobile-hide { display: block !important; }

  /* Flickity needs the carousel as a block, not the site's flex row */
  .customers_wrapper { display: block !important; }

  /* watchCSS hook: Flickity activates when it sees content:'flickity' */
  .customers_wrapper:after {
    content: 'flickity';
    display: none;
  }

  /* Dots */
  .customers_wrapper .flickity-page-dots .dot.is-selected { background: #131313; }
}

/* ===== Card width: TABLET (991px down to 768px) ===== */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .customers_wrapper .customers_wrapper_experts {
    width: 60%;   /* <-- edit tablet card width here */
  }
}

/* ===== Card width: MOBILE (767px and down) ===== */
@media screen and (max-width: 767px) {
  .customers_wrapper .customers_wrapper_experts {
    width: 85%;   /* <-- edit mobile card width here */
  }
}

  
  /* Text Marquee CSS */
@keyframes translateX { 
  to {
    transform: translateX(-100%);
  }
}

[data-css-marquee-list]:where(:not(.st-legacy, .st-legacy *)) {
  animation: translateX 30s linear;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

  /* Stack all grid panels on top of each other */

  .cust-grid_list .cust-grid_item {
    grid-row: 1;
    grid-column: 1;
  }

  /* Always keep nav above the slides */

  .cust-grid-nav_wrapper {
    z-index: 10;
  }

  /* Nav: inactive links dimmed, no gap */

  .cust-grid-nav_item .feat-stories_link {
    opacity: 0.55;
    gap: 0;
    transition:
      opacity 0.3s ease,
      gap 0.4s ease;
  }

  .cust-grid-nav_item.is-active .feat-stories_link {
    opacity: 1;
    gap: 1em;
  }

  /* Fix logo to its natural size — no stretching or shrinking */

  .feat-stories_link img:where(:not(.st-legacy, .st-legacy *)) {
    width: auto;
    max-width: none;
    flex-shrink: 0;
  }

  /* Collapse "x" and expert details on inactive nav items */

  .cust-grid-nav_item .feat-stories_link .times,
  .cust-grid-nav_item .feat-stories_link .div-block-30 {
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    transform: translateX(-6px);
    transition:
      opacity 0.5s ease,
      max-width 0.5s ease,
      transform 0.5s ease;

    pointer-events: none;
  }

  /* Expand them on the active nav item */

  .cust-grid-nav_item.is-active .feat-stories_link .times,
  .cust-grid-nav_item.is-active .feat-stories_link .div-block-30 {
    opacity: 1;
    max-width: 300px;
    transform: translateX(0px);
    pointer-events: auto;
  }

  /* ── Mobile: make nav horizontally swipeable ── */

  @media screen and (max-width: 767px) {
    .cust-grid-nav_wrapper {
      left: 0;
      right: 0;
      inset-inline: 0;
      overflow: hidden;
    }

    .cust-grid-nav_list {
      overflow-x: auto;
      overflow-y: visible;
      -webkit-overflow-scrolling: touch;
      scroll-behavior: smooth;
      scrollbar-width: none;
      flex-wrap: nowrap;
      padding-right: 2em;
    }

    .cust-grid-nav_list::-webkit-scrollbar {
      display: none;
    }
  }

  /* FAQs CSS */
.accordion-css__item-bottom {
  transition: grid-template-rows 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

[data-accordion-status="active"] .accordion-css__item-bottom {
  grid-template-rows: 1fr;
}

/* Animate Icon */
.accordion-css__item-icon {
  transition: transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

[data-accordion-status="active"] .accordion-css__item-icon {
  transform: rotate(0.001deg);
}

  /* Remove border from last FAQ item */
.accordion-css__list > .accordion-css__item:last-child {
  border-bottom: none;
}