/* ================================================================
   MEDIA INITIATION — LAYOUT FIXES
   Strategy: Override all broken Webflow rules with high specificity
   Desktop: 4-column grid, centered content
   Mobile:  single column, everything centered
   ================================================================ */

/* ── GLOBAL ──────────────────────────────────────────────────── */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

*, *::before, *::after {
  box-sizing: border-box !important;
}

img {
  max-width: 100% !important;
  height: auto !important;
}

/* ── RESET ALL BROKEN FIXED WIDTHS & NEGATIVE MARGINS ───────── */
/* These are the root causes of overflow and misalignment */
.display-inline,
.heading-2, .heading-2-copy, .heading-2-copy-copy,
.heading-2.text-weight-bold,
.heading-2-copy.text-weight-bold,
.heading-2-copy-copy.text-weight-bold,
.heading-style-h1, .heading-style-h2, .heading-style-h3,
.heading-3, .heading-5, .heading-6,
.heading-huge, .heading-xlarge,
.h1-heading, .h2-heading-2, .h3-heading-2,
.home-hero-headline-text,
.text-block, .text-block-7, .text-block-21,
.bold-text-6, .subtitle-home,
.services_content, .services_items,
.services_desc, .services_item,
.testimonial-card-2, .testimonial-card-2.hide-landscape,
.projects-detail-div, .hide,
.about-headline-block,
.page-wrap, .container,
.heading-style-h1.text-weight-black.line-height_88 {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Remove all negative left margins that clip content */
.heading-2.text-weight-bold,
.heading-2-copy.text-weight-bold,
.heading-2-copy-copy.text-weight-bold,
.text-block,
.text-block-7,
.about-headline-block {
  margin-left: auto !important;
  margin-top: 0 !important;
}

/* Remove broken positioning on sections */
.section,
.section-copy,
.section-copy-copy {
  position: relative !important;
  top: 0 !important;
  bottom: auto !important;
  overflow: visible !important;
}

/* Fix the 100px container bug at 1440px */
@media screen and (min-width: 1440px) {
  .container, .w-container {
    max-width: 1360px !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}

/* ================================================================
   DESKTOP — 4-COLUMN GRID LAYOUT (992px and above)
   ================================================================ */
@media screen and (min-width: 992px) {

  /* ── Page sections: clean spacing, centered ── */
  body > *,
  .section, .section-copy, .section-copy-copy {
    margin-top: 80px !important;
    margin-bottom: 60px !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    top: 0 !important;
    bottom: auto !important;
  }

  .section.sign-up-cta {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* ── Center all text headings ── */
  h1, h2, h3, h4, h5, h6,
  .display-inline,
  .heading-2, .heading-2-copy, .heading-2-copy-copy,
  .heading-2.text-weight-bold,
  .heading-2-copy.text-weight-bold,
  .heading-style-h1, .heading-style-h2, .heading-style-h3,
  .heading-3, .home-hero-headline-text,
  .h1-heading, .h2-heading-2, .h3-heading-2,
  .title, .medium-text, .large-heading,
  .text-color-grey, .display-inline {
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ── Hero H1 ── */
  .display-inline {
    display: block !important;
    font-size: clamp(2.5rem, 4vw, 4.5rem) !important;
    line-height: 1.15 !important;
  }

  /* ── SERVICES — 4-column grid ── */
  .services_component {
    display: block !important;
    width: 100% !important;
    max-width: 1360px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
  }

  .services_content {
    width: 100% !important;
    position: static !important;
    text-align: center !important;
    margin: 0 auto 3rem auto !important;
    max-width: 800px !important;
  }

  .services_items {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1.5rem !important;
    width: 100% !important;
  }

  .services_item {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    background: #111 !important;
    border-radius: 1rem !important;
    overflow: hidden !important;
    transition: transform 0.2s !important;
  }

  .services_item:hover {
    transform: translateY(-4px) !important;
  }

  .services_img-wrap {
    aspect-ratio: 16/9 !important;
    width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .services_img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute !important;
  }

  .services_item-infos {
    padding: 1rem !important;
    flex: 1 !important;
  }

  /* ── TESTIMONIALS — 4-column grid ── */
  .testimonial-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1.5rem !important;
    width: 100% !important;
    align-items: stretch !important;
  }

  .testimonial-card-2 {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    padding: 1.5rem !important;
    box-sizing: border-box !important;
  }

  /* ── LOGOS / PARTNER GRID — 4 columns ── */
  .logos-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1rem !important;
    width: 100% !important;
  }

  .trusted-by-hero-logos {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 2rem !important;
    width: 100% !important;
  }

  /* ── THREE-COLUMN GRID → 4 columns ── */
  .three-column-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1.5rem !important;
  }

  /* ── SPLIT (2-col) — keep 2 cols but centered ── */
  .split, .split-copy {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 3rem !important;
    align-items: start !important;
    margin: 3rem auto !important;
    max-width: 1360px !important;
  }

  /* ── FAQ / ACCORDION — 2 cols ── */
  .faq-split {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
  }

  /* ── HOME HERO CARDS — centered ── */
  .home-hero-images-wrapper {
    display: flex !important;
    justify-content: center !important;
    gap: 2rem !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
  }

  .home-hero-image-card-wrapper-01,
  .home-hero-image-card-wrapper-02 {
    flex: 1 !important;
    max-width: 45% !important;
    transform: none !important;
  }

  .home-hero-headline-wrapper {
    justify-content: center !important;
    text-align: center !important;
    max-width: 800px !important;
    margin: 0 auto 3rem !important;
  }

  /* ── PRICING — 4 columns ── */
  .pricing_layout {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1.5rem !important;
  }

  /* ── PROCESS / HOW-WE-WORK — 4 columns ── */
  .how-we-work-grid,
  .phase-cards-grid,
  .our-ecosystem-grid,
  .how_it_works_component {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1.5rem !important;
  }

  /* ── WORKING PROCESS — 4 cards per row ── */
  .working-process-content-wrapper {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1.5rem !important;
    width: 100% !important;
  }

  /* ── ALL CONTAINERS — centered with max-width ── */
  .container, .w-container,
  .container-medium, .container-medium-2, .container-medium-3,
  .container-medium-4, .container-large, .container-large-3,
  .container-full {
    max-width: 1360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
  }

  /* ── INTRO SECTION — centered ── */
  .intro_component,
  .intro_content,
  .intro_texts {
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 800px !important;
    margin: 0 auto !important;
  }

  /* ── TEXT CONTENT — centered below headings ── */
  .medium-text,
  .services_desc,
  .text-block,
  .text-block-7 {
    text-align: center !important;
    width: 100% !important;
    max-width: 700px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ── HERO RIBBON ── */
  .hero-ribbon-section {
    text-align: center !important;
  }

  /* ── FOOTER ── */
  .footer-top-wrapper {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 2rem !important;
    text-align: left !important;
  }
}

/* ================================================================
   TABLET — 768px to 991px
   ================================================================ */
@media screen and (min-width: 768px) and (max-width: 991px) {

  .section, .section-copy, .section-copy-copy {
    margin-top: 60px !important;
    padding: 0 24px !important;
    top: 0 !important;
    bottom: auto !important;
  }

  /* 2-column grid on tablet */
  .services_items,
  .testimonial-grid,
  .three-column-grid,
  .logos-grid,
  .pricing_layout,
  .how-we-work-grid,
  .phase-cards-grid,
  .our-ecosystem-grid,
  .working-process-content-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem !important;
    width: 100% !important;
  }

  .services_component {
    display: block !important;
    width: 100% !important;
    padding: 0 24px !important;
  }

  .services_content {
    width: 100% !important;
    position: static !important;
    text-align: center !important;
    margin-bottom: 2rem !important;
  }

  .services_img-wrap {
    aspect-ratio: 16/9 !important;
    width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .services_img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute !important;
  }

  .split, .split-copy {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  h1, h2, .display-inline, .home-hero-headline-text {
    text-align: center !important;
    width: 100% !important;
  }

  .display-inline {
    display: block !important;
    font-size: clamp(2rem, 5vw, 3rem) !important;
  }

  .home-hero-images-wrapper {
    flex-direction: column !important;
    align-items: center !important;
  }

  .home-hero-image-card-wrapper-01,
  .home-hero-image-card-wrapper-02 {
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
  }

  .trusted-by-hero-logos {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 1.5rem !important;
  }

  .container, .w-container {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* ================================================================
   MOBILE — 767px and below
   RULE: Everything centered, single column
   ================================================================ */
@media screen and (max-width: 767px) {

  /* ── Sections ── */
  .section, .section-copy, .section-copy-copy {
    margin-top: 60px !important;
    margin-bottom: 40px !important;
    padding: 0 16px !important;
    top: 0 !important;
    bottom: auto !important;
    overflow: visible !important;
    position: relative !important;
  }

  .section.no-padding-bottom { margin-top: 60px !important; top: 0 !important; }
  .section.sign-up-cta { padding-top: 60px !important; padding-bottom: 60px !important; top: 0 !important; }
  .section_intro { margin-top: 0 !important; margin-bottom: 2rem !important; }

  /* ── Containers ── */
  .container, .w-container,
  .container-medium, .container-medium-2, .container-medium-3,
  .container-medium-4, .container-large, .container-large-3 {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    overflow: visible !important;
  }

  /* ── CENTER EVERYTHING ── */
  body * {
    max-width: 100% !important;
  }

  h1, h2, h3, h4, h5, h6,
  p, div, span, a,
  .display-inline,
  .heading-2, .heading-2-copy, .heading-2-copy-copy,
  .heading-2.text-weight-bold,
  .heading-2-copy.text-weight-bold,
  .heading-2-copy-copy.text-weight-bold,
  .heading-style-h1, .heading-style-h2, .heading-style-h3,
  .heading-3, .heading-huge, .heading-xlarge,
  .h1-heading, .h2-heading-2, .h3-heading-2,
  .home-hero-headline-text,
  .title, .medium-text, .text-color-grey,
  .services_desc, .text-block, .text-block-7,
  .subtitle-home, .bold-text-6 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ── Hero heading ── */
  .display-inline {
    display: block !important;
    font-size: clamp(1.8rem, 7vw, 2.8rem) !important;
    line-height: 1.25 !important;
    width: 100% !important;
    overflow-wrap: break-word !important;
  }

  /* ── Heading sizes ── */
  h1 { font-size: clamp(1.8rem, 7vw, 2.5rem) !important; line-height: 1.2 !important; }
  h2 { font-size: clamp(1.5rem, 5vw, 2rem) !important; line-height: 1.25 !important; }
  h3 { font-size: clamp(1.2rem, 4vw, 1.6rem) !important; }
  h4 { font-size: 1.2rem !important; }

  .heading-style-h1 { font-size: clamp(2rem, 7vw, 2.8rem) !important; }
  .heading-style-h3 { font-size: 1.5rem !important; position: static !important; }
  .home-hero-headline-text { font-size: clamp(2rem, 7vw, 2.8rem) !important; letter-spacing: -1px !important; }
  .big-text { font-size: 14vw !important; }
  .hero-main-title { font-size: 14vw !important; }
  .text-big-number { font-size: 2.8rem !important; }

  /* ── Hide side images that break layout ── */
  .intro_image-1, .intro_image-2, .intro_image-3 { display: none !important; }

  /* ── SERVICES: single column, centered cards ── */
  .services_component {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  .services_content {
    width: 100% !important;
    position: static !important;
    text-align: center !important;
    margin-bottom: 2rem !important;
    padding: 0 8px !important;
  }

  .services_items {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    width: 100% !important;
  }

  .services_item {
    width: 100% !important;
    background: #111 !important;
    border-radius: 0.75rem !important;
    overflow: hidden !important;
  }

  .services_img-wrap {
    aspect-ratio: 16/9 !important;
    width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
    border-radius: 0.75rem 0.75rem 0 0 !important;
  }

  .services_img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
  }

  .services_item-infos {
    padding: 1rem !important;
    text-align: center !important;
  }

  /* ── TESTIMONIALS: single column ── */
  .testimonial-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    width: 100% !important;
  }

  .testimonial-card-2,
  .testimonial-card-2.hide-landscape {
    width: 100% !important;
    max-width: 100% !important;
    padding: 1.25rem !important;
    margin: 0 !important;
    text-align: center !important;
  }

  .testimonial-wrapper { margin-top: 2rem !important; }
  .testimonial-component { max-width: 100% !important; }

  /* ── LOGOS: 2 per row, centered ── */
  .logos-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
    width: 100% !important;
  }

  .trusted-by-hero-logos {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 1rem !important;
    width: 100% !important;
  }

  .logo-wrap {
    height: 80px !important;
    padding: 16px !important;
  }

  /* ── ALL GRIDS: single column ── */
  .split, .split-copy,
  .three-column-grid,
  .faq-split,
  .pricing_layout,
  .how-we-work-grid,
  .phase-cards-grid,
  .our-ecosystem-grid,
  .working-process-content-wrapper,
  .how_it_works_component {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    width: 100% !important;
  }

  /* ── HOME HERO CARDS ── */
  .home-hero-images-wrapper {
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 !important;
    gap: 1rem !important;
  }

  .home-hero-image-card-wrapper-01,
  .home-hero-image-card-wrapper-02 {
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    border-radius: 16px !important;
  }

  .home-hero-headline-wrapper {
    flex-direction: column !important;
    text-align: center !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin-bottom: 2rem !important;
  }

  /* ── FORM FIELDS ── */
  .split-fields { grid-template-columns: 1fr !important; }

  /* ── FOOTER ── */
  .footer-top,
  .footer-content,
  .footer-bottom,
  .footer-bottom-content,
  .footer-top-wrapper,
  .footer-menu-wrapper {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 1.5rem !important;
  }

  .footer-link-list {
    justify-content: center !important;
  }

  /* ── NAVIGATION ── */
  .navbar-contents {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ── MISC ── */
  .spacer-large { width: 100% !important; }
  .page-wrap { width: 100% !important; overflow: visible !important; margin-top: 0 !important; }
  .hero-heading { max-width: 100% !important; }
  .intro_texts { max-width: 100% !important; }
  .padding-global,
  .padding-global-6,
  .padding-global-7,
  .padding-global-8 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* ================================================================
   SMALL PHONES — 479px
   ================================================================ */
@media screen and (max-width: 479px) {

  .section {
    margin-top: 50px !important;
    padding: 0 14px !important;
    top: 0 !important;
    bottom: auto !important;
  }

  h1 { font-size: clamp(1.6rem, 7vw, 2rem) !important; }
  h2 { font-size: clamp(1.3rem, 5vw, 1.7rem) !important; }
  .display-inline { font-size: clamp(1.6rem, 7vw, 2rem) !important; }
  .home-hero-headline-text { font-size: clamp(1.8rem, 7vw, 2.2rem) !important; }
  .big-text { font-size: 18vw !important; }

  .container, .w-container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .services_items { gap: 1rem !important; }
  .testimonial-card-2 { padding: 1rem !important; }
  .logo-wrap { height: 70px !important; padding: 12px !important; }

  .section_intro { margin-top: 0 !important; }
  .spacer-large { width: 100% !important; }
}