/* ================================================================
   MEDIA INITIATION — SITE-WIDE MOBILE FIX
   Applies ONLY at max-width:767px and 479px.
   ZERO changes to desktop/tablet (991px+) — confirmed safe.
   ================================================================
   ROOT CAUSES FIXED:
   1. .display-inline (hero h1) was display:inline — overflows
      symmetrically and gets clipped by ancestor overflow:clip
   2. Many ancestor containers use overflow:clip at mobile,
      visually cutting any element that overflows even slightly
   3. Several headings keep huge negative margins/font-sizes
      on mobile with no proper scaling
   ================================================================ */

@media screen and (max-width: 767px) {

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

  /* ── Stop every known clipping container from cutting content ── */
  .container,
  .container-3,
  .container-4,
  .max-width-40ch,
  .max-width-70ch,
  .section,
  .services_content,
  .services_component,
  .label_wrap,
  .phase-cards-wrapper,
  .hero-component,
  .opacity-85,
  .text-block-7,
  .single-title-home,
  .hide,
  .heading-3,
  .master-title-home,
  .common-heading-div,
  .padding-global-6,
  .container-medium-2,
  .intro_component,
  .intro_content,
  .intro_texts,
  .w-layout-blockcontainer {
    overflow: visible !important;
  }

  /* ── Width & box-sizing safety net for all containers ── */
  .container,
  .container-3,
  .container-4,
  .container-medium-2,
  .padding-global-6,
  .common-heading-div,
  .max-width-40ch,
  .max-width-70ch,
  .intro_component,
  .intro_content,
  .intro_texts {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── Remove large negative margins that push content off-canvas ── */
  .section_intro {
    margin-top: 0 !important;
    padding-top: 90px !important;
  }

  .heading-1.text-weight-regular {
    margin-top: 0 !important;
  }

  .hero-wrapper {
    margin-top: 2rem !important;
  }

  .working-process-content-wrapper {
    margin-top: 1rem !important;
  }

  .tab_menu {
    margin-top: 1rem !important;
  }

  .sub-heading-2-copy {
    margin-top: 0 !important;
  }

  .common-heading-div {
    padding-left: 0 !important;
    margin-top: 1rem !important;
    align-items: center !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* ── HERO H1 ON HOME PAGE — the main reported bug ──
     Was: display:inline; font-size:50px → overflows + clipped */
  .display-inline {
    display: block !important;
    font-size: clamp(1.9rem, 8vw, 2.8rem) !important;
    line-height: 1.25 !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .intro_component,
  .intro_content,
  .intro_texts {
    align-items: center !important;
    text-align: center !important;
  }

  .text-color-grey {
    text-align: center !important;
    width: 100% !important;
  }

  .button-4.is-grey.is-large {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    width: fit-content !important;
  }

  .intro_image-1,
  .intro_image-2 {
    display: none !important;
  }

  /* ── HEADING-1 — used on agency/marketing pages, was 10.5rem ── */
  .heading-1 {
    font-size: clamp(2.2rem, 9vw, 3.2rem) !important;
    line-height: 1.2 !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ── HEADING-2 / HEADING-3 bold variants — fixed widths/margins ── */
  .heading-2.text-weight-bold,
  .heading-2-copy.text-weight-bold,
  .heading-2-copy-copy.text-weight-bold {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
  }

  .heading-3 {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
  }

  /* ── Generic heading safety net ── */
  h1 { font-size: clamp(1.8rem, 7vw, 2.4rem) !important; line-height: 1.25 !important; }
  h2 { font-size: clamp(1.4rem, 5.5vw, 1.9rem) !important; line-height: 1.3 !important; }
  h3 { font-size: clamp(1.2rem, 4.5vw, 1.6rem) !important; }

  /* ── HERO COMPONENT (services.html etc.) ── */
  .hero-component,
  .hero-wrapper,
  .hero-inner {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box !important;
  }

  /* ── Section padding consistency ── */
  .section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ════════════════════════════════════════════════════════════
     CENTER ALL TEXT ON MOBILE
     Headings, paragraphs, descriptions — centered site-wide
     ════════════════════════════════════════════════════════════ */
  h1, h2, h3, h4, h5, h6,
  p, li,
  .heading, .heading-1, .heading-2, .heading-2-copy, .heading-2-copy-copy,
  .heading-3, .heading-13, .heading-24, .heading-style-h1, .heading-style-h2,
  .heading-style-h3, .heading-style-h5, .heading-style-h6,
  .title, .medium-text, .text-color-grey,
  .services_desc, .text-block, .text-block-7, .text-block-21,
  .subtitle-home, .bold-text-6,
  .testimonial-quote, .testimonial-content,
  .opacity-85, .max-width-40ch, .max-width-70ch,
  .case-studies-header .heading,
  .case-studies-header .medium-text,
  .header-2 .heading-6 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
  }

  /* Flex/grid wrappers that hold the above text: center their children */
  .label_wrap,
  .services_content,
  .case-studies-header,
  .header-2,
  .split,
  .split-copy,
  .div-block-25 {
    align-items: center !important;
    text-align: center !important;
    justify-content: center !important;
  }

  .services_content .heading-style-h3,
  .services_content p {
    text-align: center !important;
  }

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

  /* Buttons: center within their wrapper */
  .button-4, .button-3, .secondary-button {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .double-button-component {
    justify-content: center !important;
  }

  /* Footer links/columns centered */
  .footer-content,
  .footer-top,
  .footer-bottom-content,
  .footer-1-links,
  .footer-horizontal-links-2 {
    align-items: center !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

@media screen and (max-width: 479px) {

  h1, h2, h3, h4, h5, h6, p {
    text-align: center !important;
  }

  .display-inline {
    font-size: clamp(1.7rem, 7.5vw, 2.3rem) !important;
  }

  .heading-1 {
    font-size: clamp(2rem, 8.5vw, 2.6rem) !important;
  }

  .heading-2.text-weight-bold,
  .heading-2-copy.text-weight-bold,
  .heading-2-copy-copy.text-weight-bold,
  .heading-3 {
    font-size: clamp(1.4rem, 6.5vw, 1.9rem) !important;
  }

  .section_intro {
    padding-top: 80px !important;
  }

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