/* AI Startup Web Design page (ai-startup-web-design.html)
   Combo classes layered on top of design-sense-2244.webflow.css.
   Everything else on the page uses the site's existing classes.
   Breakpoints match the Webflow export: 1920+, 991, 767, 479. */

/* ---------- Hero: the H1 is longer than on the Webflow page, so the copy column gets more room ---------- */
@media screen and (min-width: 992px) {
  .service-content-wrap.ai-hero-content {
    width: 58%;
  }

  .service-img-wrap.ai-hero-img {
    width: 42%;
  }
}

/* ---------- The solution: clarity graphic under the sticky heading ---------- */
.ai-sol-graphic-wrap {
  margin-top: 60px;
}

.ai-sol-graphic {
  width: 100%;
  max-width: 520px;
}

/* ---------- Black band: Why DesignSense (2 x 2), then the process ---------- */
.why-us-flex-wrap-b2b.ai-why-row {
  margin-top: 30px;
}

/* why-us-wrap already draws the divider, so the process doesn't add a second one */
.b2b-process-wrap.ai-process {
  border-top-style: none;
}

/* Process: circles spread top to bottom of the pill (space-between, as the site does at 1920px+).
   The line runs from the first circle's centre to the last one's, whatever the pill height:
   top and bottom = menu padding 16 + half a 52px circle = 42px (the tabs margin collapses outside the wrapper).
   Below 768px the site hides the line and lays the circles out in a row, so nothing changes there. */
@media screen and (min-width: 768px) {
  .ai-process .b2b-tabs-menu {
    justify-content: space-between;
  }

  .ai-process .tab-line-wrap {
    height: auto;
    margin-top: 0;
    margin-bottom: 0;
    top: 42px;
    bottom: 42px;
  }
}

/* "What we do:" label inside the solution cards */
.ai-wwd-label {
  margin-top: 8px;
}

/* ---------- Use cases ---------- */
.b2b-scope-wrap.ai-usecase-wrap {
  border-bottom-style: none;
}

/* Full-width link card under the use cases (same treatment as the site's "Need guidance?" card) */
.ai-uc-more {
  background-color: #f9f9f9;
  border: 1px solid #e1e2e6;
  border-radius: 22px;
  margin-top: 60px;
  padding: 10px;
}

.ai-uc-more-inner {
  grid-column-gap: 40px;
  grid-row-gap: 24px;
  background-image: linear-gradient(90deg, #4517ff00, #4517ff17);
  border: 1px solid #4517ff;
  border-radius: 12px;
  justify-content: space-between;
  align-items: center;
  padding: 40px 50px;
  display: flex;
}

.ai-uc-more-content {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  flex-flow: column;
  display: flex;
}

.ai-link-row {
  grid-column-gap: 40px;
  grid-row-gap: 12px;
  flex-flow: wrap;
  flex: none;
  align-items: center;
  display: flex;
}

.ai-link-row .b2b-uc-link {
  margin-top: 0;
}

@media screen and (max-width: 991px) {
  .ai-uc-more-inner {
    flex-flow: column;
    align-items: flex-start;
  }
}

@media screen and (max-width: 767px) {
  .ai-uc-more {
    margin-top: 40px;
  }

  .ai-uc-more-inner {
    padding: 30px 20px;
  }

  .ai-link-row {
    flex-flow: column;
    align-items: flex-start;
  }
}

/* ---------- Our Work ---------- */
.b2b-usecase-wrap.ai-border-top {
  border-top: 1px solid #e1e2e6;
}

/* ---------- FAQ ---------- */
.faq-wrap.ai-faq {
  border-top: 1px solid #e1e2e6;
}

/* ---------- Final CTA: longer heading, so the card grows with its content ---------- */
.cta-card.ai-cta {
  height: auto;
  min-height: 500px;
  padding-top: 80px;
  padding-bottom: 80px;
  overflow: hidden;
}

@media screen and (max-width: 991px) {
  .cta-card.ai-cta {
    min-height: 400px;
  }
}

@media screen and (max-width: 767px) {
  .ai-sol-graphic-wrap {
    display: none;
  }

  .cta-card.ai-cta {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

/* ---------- Section fade-in on scroll (js/ai-startup-web-design.js adds .ds-fade-ready) ----------
   Opacity only: no layout shift, compositor-only, hero excluded so it never delays LCP. */
html.ds-fade-ready .ds-fade {
  opacity: 0;
  transition: opacity .8s ease;
}

html.ds-fade-ready .ds-fade.is-visible {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  html.ds-fade-ready .ds-fade {
    opacity: 1;
    transition: none;
  }
}

/* ---------- Logo marquee (copied from the home page). On the home page IX2 runs it on page load:
   .marquee-wrapper 0 -> -102.4% over 50s, linear, looping. Same motion in CSS, transform only. ---------- */
.ai-marquee .marquee-wrapper {
  animation: ai-marquee 50s linear infinite;
  will-change: transform;
}

@keyframes ai-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-102.4%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-marquee .marquee-wrapper {
    animation: none;
  }
}