/* HADS V75 — FINAL MOBILE SAFETY LAYER
   PHONE/TABLET ONLY. No desktop selector exists outside media queries.
   Loaded last on every FR/EN/DE public page to neutralise legacy mobile conflicts. */

@media (max-width: 1024px){
  html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important}
  body{position:relative!important}
  *,*::before,*::after{box-sizing:border-box!important}
  img,video,picture,svg,canvas{max-width:100%!important;height:auto}
  iframe{max-width:100%!important}
  .container,.wrap,.inner,.section-inner,.content-inner,.page-inner{
    width:min(100% - 32px,960px)!important;max-width:none!important;margin-left:auto!important;margin-right:auto!important
  }
  main,section,article,header,footer{max-width:100%!important}

  /* Never allow desktop two-column copy/visual blocks to escape the viewport. */
  .intro-grid,.difference-grid,.models-grid,.flow-grid,.quality-grid,.delivery-grid,
  .responsibility-grid,.industrial-v7-grid,.nearshore-v7-grid,.nearshore-grid,
  .history-intro,.today-intro,.values-intro,.detail-grid,.detail-columns,
  .contact-grid,.catalogue-layout,.product-detail-grid{
    max-width:100%!important
  }

  /* Touch rails: intentional horizontal scroll instead of a clipped second card. */
  .hads-quicknav,.history-hero-quicknav,.expertise-hero-quicknav,.today-hero-nav,
  .expertise-subnav .container,.co-subnav .container,.subnav-inner,.ww-family-rail,
  .family-shortcuts,.home-path-inner{
    scrollbar-width:none!important;-webkit-overflow-scrolling:touch!important
  }
  .hads-quicknav::-webkit-scrollbar,.history-hero-quicknav::-webkit-scrollbar,
  .expertise-hero-quicknav::-webkit-scrollbar,.today-hero-nav::-webkit-scrollbar,
  .expertise-subnav .container::-webkit-scrollbar,.co-subnav .container::-webkit-scrollbar,
  .subnav-inner::-webkit-scrollbar,.ww-family-rail::-webkit-scrollbar,
  .family-shortcuts::-webkit-scrollbar,.home-path-inner::-webkit-scrollbar{display:none!important}
}

@media (max-width: 760px){
  :root{--hads-mobile-gutter:20px}
  html{-webkit-text-size-adjust:100%!important;text-size-adjust:100%!important}
  body{min-width:0!important}
  .container,.wrap,.inner,.section-inner,.content-inner,.page-inner{
    width:calc(100% - (var(--hads-mobile-gutter) * 2))!important;max-width:none!important;
    margin-left:auto!important;margin-right:auto!important;padding-left:0!important;padding-right:0!important
  }
  h1,h2,h3,h4,h5,h6,p,a,span,button{min-width:0;overflow-wrap:normal;word-break:normal}
  h1,h2,h3{hyphens:none!important;-webkit-hyphens:none!important}

  /* Global mobile typography: prevent giant desktop titles from occupying/cropping the screen. */
  h1{font-size:clamp(38px,11vw,54px)!important;line-height:.98!important;letter-spacing:-.045em!important}
  h2{font-size:clamp(32px,9vw,46px)!important;line-height:1.02!important;letter-spacing:-.04em!important}
  h3{line-height:1.08!important}
  p{font-size:clamp(14px,4vw,17px)!important;line-height:1.58!important}

  /* Header/menu stays inside the phone width. */
  .main-header,.nav{width:100%!important;max-width:100%!important}
  .nav{padding-left:14px!important;padding-right:14px!important}
  .main-menu{left:0!important;right:0!important;width:100%!important;max-width:100%!important}

  /* Heroes: centered media + readable copy, no absolute desktop offsets. */
  .hero:not(#homeHero),.history-hero,.today-hero,.values-hero,.workwear-hero,.family-hero,
  .expertise-hero,.detail-hero{
    width:100%!important;max-width:100%!important;min-height:0!important;height:auto!important;
    overflow:hidden!important;background-position:center center!important;background-size:cover!important
  }
  .hero:not(#homeHero) .hero-content,.history-hero-content,.today-hero-content,.values-hero-content,
  .workwear-hero-content,.family-hero-content,.expertise-hero-content{
    position:relative!important;inset:auto!important;width:calc(100% - 40px)!important;max-width:none!important;
    margin:0 auto!important;padding:48px 0!important;transform:none!important
  }
  .hero:not(#homeHero) h1,.history-hero h1,.today-hero h1,.values-hero h1,.workwear-hero h1,.family-hero h1{
    width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important;
    font-size:clamp(40px,11.5vw,54px)!important;line-height:.98!important;letter-spacing:-.05em!important
  }
  .hero:not(#homeHero) p,.history-hero p,.today-hero p,.values-hero p,.workwear-hero p,.family-hero p{
    width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important
  }

  /* History screenshot fix: text and hero stay together; intro cannot become a desktop side column. */
  .hads-who-history .history-hero{border-radius:0 0 30px 30px!important}
  .hads-who-history .history-hero-content{padding-top:42px!important;padding-bottom:54px!important}
  .hads-who-history .history-hero h1{font-size:clamp(42px,12vw,58px)!important}
  .hads-who-history .history-intro{display:block!important;padding-top:54px!important;padding-bottom:54px!important}
  .hads-who-history .history-intro>*{width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important}
  .hads-who-history .history-intro h2{font-size:clamp(38px,10vw,50px)!important}

  /* All quick-navigation bubbles: one clean touch rail, fully visible active card. */
  .hads-quicknav,.history-hero-quicknav,.expertise-hero-quicknav,.today-hero-nav,
  .expertise-subnav .container,.co-subnav .container,.subnav-inner,.ww-family-rail,.family-shortcuts{
    position:relative!important;inset:auto!important;transform:none!important;width:100%!important;max-width:100%!important;
    display:flex!important;flex-wrap:nowrap!important;justify-content:flex-start!important;align-items:stretch!important;
    gap:10px!important;overflow-x:auto!important;overflow-y:hidden!important;padding:14px 20px 20px!important;
    scroll-snap-type:x proximity!important
  }
  .hads-quicknav>a,.history-hero-quicknav>a,.expertise-hero-quicknav>a,.today-hero-nav>a,
  .expertise-subnav a,.co-subnav a,.subnav-inner a,.ww-family-rail>a,.family-shortcuts>a,
  .hads-quicknav .hads-qbubble,.history-hero-quicknav .hads-qbubble,.expertise-hero-quicknav .hads-qbubble{
    flex:0 0 min(82vw,330px)!important;width:auto!important;min-width:0!important;max-width:none!important;
    scroll-snap-align:center!important;transform:none!important
  }
  .hads-qbubble{min-height:76px!important;padding:12px 16px!important}

  /* Expertise / process cards: one card per row. Fixes clipped right-hand cards shown in screenshots. */
  .process-grid,.expertise-grid,.steps-grid,.flow-grid,.models-grid,.why-grid,.workwear-grid,
  .responsibility-grid,.industrial-v7-grid,.nearshore-v7-grid,.nearshore-grid,.detail-grid,
  .detail-columns,.contact-grid,.quality-grid,.delivery-grid{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:18px!important;width:100%!important;max-width:100%!important
  }
  .process-card,.expertise-card,.step-card,.flow-card,.model-card,.why-card,.workwear-card,
  .responsibility-card,.detail-card{
    width:100%!important;max-width:100%!important;min-width:0!important;margin-left:0!important;margin-right:0!important;
    transform:none!important
  }
  .process-card{min-height:390px!important;background-position:center!important}
  .process-card h3,.process-card p,.process-link{padding-left:22px!important;padding-right:22px!important}
  .process-number{left:22px!important;top:20px!important}

  /* Home: preserve design but fit every element to one phone viewport width. */
  .page-home #homeHero{width:100%!important;max-width:100%!important;overflow:hidden!important}
  .page-home #homeHero .hero-content-wrap{width:100%!important;max-width:100%!important;padding-left:16px!important;padding-right:16px!important}
  .page-home #homeHero .hero-copy{width:100%!important;max-width:100%!important;margin-left:auto!important;margin-right:auto!important}
  .page-home #homeHero .hero-title,.page-home #homeHero .hero-title-fixed,.page-home #homeHero .hero-title-premium{
    max-width:100%!important;font-size:clamp(36px,10vw,48px)!important;line-height:.98!important
  }
  .page-home #homeHero .hero-actions{width:100%!important;max-width:100%!important}
  .page-home #homeHero .hero-actions a,.page-home #homeHero .hero-actions .btn{width:100%!important;max-width:100%!important}
  .page-home #homeHero .home-path{width:100%!important;max-width:100%!important;overflow:hidden!important}
  .page-home #homeHero .home-path-inner{display:flex!important;overflow-x:auto!important;gap:10px!important;padding:4px 4px 12px!important}
  .page-home #homeHero .home-path a{flex:0 0 min(78vw,300px)!important;width:auto!important;min-width:0!important;scroll-snap-align:center!important}
  .page-home main>section:not(#homeHero){width:calc(100% - 20px)!important;max-width:none!important;margin-left:auto!important;margin-right:auto!important;overflow:hidden!important}

  /* Family/catalogue pages. */
  .catalogue-layout,.product-detail-grid{display:block!important;width:100%!important;max-width:100%!important}
  .catalogue-sidebar,.detail-sidebar{position:relative!important;inset:auto!important;width:100%!important;max-width:100%!important}
  .product-grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:18px!important}
  .product-card,.product-visual,.visual-area,.product-info-panel,.main-stage{width:100%!important;max-width:100%!important}
  .product-visual img,.main-stage img{display:block!important;margin-left:auto!important;margin-right:auto!important;object-fit:contain!important;object-position:center!important}

  /* Detail/expertise photo pages: media is centered, not cropped by desktop transforms. */
  .hads-v41-detail img,.v62-design-page img,.hads-manufacturing-v29 img,
  .expertise-visual img,.resp-visual img,.industrial-v7-visual img,.nearshore-map img{
    display:block!important;max-width:100%!important;margin-left:auto!important;margin-right:auto!important;object-position:center!important
  }
  .hads-v41-detail [style*="transform"],.v62-design-page [style*="transform"]{transform:none!important}

  /* Buttons: consistent full-width mobile targets, but don't alter tiny icon/menu buttons. */
  .hero-buttons,.cta-actions,.section-actions,.contact-actions{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;width:100%!important}
  .hero-btn,.cta-actions .btn,.section-actions .btn,.contact-actions .btn{width:100%!important;max-width:100%!important;justify-content:center!important;text-align:center!important}

  /* Footer and legal text. */
  footer .container,.footer-inner{width:calc(100% - 40px)!important;max-width:none!important;margin-left:auto!important;margin-right:auto!important}
  .footer-grid{grid-template-columns:1fr!important;gap:26px!important}

  /* Floating TOP control must not cover page copy. */
  .back-to-top,.to-top,.top-button,[class*="back-top"]{right:14px!important;bottom:16px!important;max-width:150px!important}
}

@media (max-width: 420px){
  :root{--hads-mobile-gutter:16px}
  h1{font-size:clamp(36px,11vw,46px)!important}
  h2{font-size:clamp(30px,9vw,40px)!important}
  .process-card{min-height:350px!important}
  .page-home #homeHero .hero-actions{grid-template-columns:1fr!important}
}