/* =========================================================
   V97 — MOBILE VIEW REFINEMENT
   Additive only. No pricing / backend / 3D geometry changes.
   ========================================================= */

@media(max-width:980px){

  /* Fix the old 1536px reference wrapper on phones.
     This removes the apparent white strip / left crop. */
  html,
  body{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  #fitOuter,
  .fit-outer{
    position:relative!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    margin:0!important;
    overflow:visible!important;
  }

  #siteFit,
  .site-fit{
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    top:auto!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    transform:none!important;
    transform-origin:top center!important;
    margin:0!important;
  }

  .hero-shell{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding-left:0!important;
    padding-right:0!important;
    overflow-x:clip!important;
  }

  /* One mobile header language across Home / Products / Projects / About / Contact. */
  .hero-shell .site-header,
  .products-header{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    inset:auto!important;
    transform:none!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:10px 14px 12px!important;
    box-sizing:border-box!important;
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px 12px!important;
    background:rgba(250,252,251,.97)!important;
    border-bottom:1px solid rgba(18,70,75,.09)!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
    z-index:90!important;
  }

  .hero-shell .brand-logo,
  .products-brand{
    order:1!important;
    flex:0 0 auto!important;
  }

  .hero-shell .brand-logo{
    position:static!important;
    width:140px!important;
    max-width:38vw!important;
    max-height:76px!important;
    object-fit:contain!important;
  }

  .products-brand{
    display:flex!important;
    align-items:center!important;
    align-self:auto!important;
  }

  .products-brand img{
    width:140px!important;
    max-width:38vw!important;
    max-height:76px!important;
    object-fit:contain!important;
  }

  .hero-shell .home-header-actions,
  .products-header .products-header-actions{
    order:2!important;
    position:static!important;
    inset:auto!important;
    transform:none!important;
    margin:0!important;
    display:flex!important;
    flex:0 0 auto!important;
    align-items:center!important;
    gap:7px!important;
  }

  .hero-shell .home-header-actions .lang-toggle,
  .products-header .lang-toggle{
    position:static!important;
    width:auto!important;
    min-width:49px!important;
    height:40px!important;
    flex:0 0 49px!important;
    padding:0 10px!important;
    border:1px solid #b9d0d0!important;
    border-radius:999px!important;
    background:#fff!important;
    color:#126f74!important;
    font-size:12px!important;
    font-weight:800!important;
  }

  .hero-shell .phone-pill,
  .products-header .products-phone{
    position:static!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:auto!important;
    min-width:0!important;
    height:40px!important;
    padding:0 11px!important;
    border:0!important;
    border-radius:999px!important;
    background:#0d7177!important;
    color:#fff!important;
    text-decoration:none!important;
    font-size:11.5px!important;
    font-weight:700!important;
    line-height:1!important;
    box-shadow:none!important;
    white-space:nowrap!important;
  }

  .hero-shell .phone-pill .phone-svg{
    width:14px!important;
    height:14px!important;
    flex-basis:14px!important;
  }

  .hero-shell .main-nav,
  .products-header .products-nav{
    order:3!important;
    position:static!important;
    inset:auto!important;
    transform:none!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:space-between!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:5px 1px 0!important;
    gap:6px!important;
    overflow:visible!important;
    white-space:nowrap!important;
    direction:inherit!important;
  }

  .hero-shell .main-nav a,
  .products-header .products-nav a{
    flex:0 0 auto!important;
    min-height:34px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:4px 0 8px!important;
    margin:0!important;
    color:#123f43!important;
    text-decoration:none!important;
    white-space:nowrap!important;
    font-family:"Noto Kufi Arabic","DM Sans",Arial,sans-serif!important;
    font-size:clamp(11.6px,3vw,13px)!important;
    font-weight:700!important;
    line-height:1.2!important;
    letter-spacing:0!important;
  }

  html[lang="en"] .hero-shell .main-nav a,
  html[lang="en"] .products-header .products-nav a{
    font-family:"DM Sans",Arial,sans-serif!important;
  }

  .products-header .products-nav a::after{
    bottom:2px!important;
  }

  /* Keep all five links on exactly one line even on narrow phones. */
  .hero-shell .main-nav a *,
  .products-header .products-nav a *{
    white-space:nowrap!important;
  }

  /* Homepage content gets its normal breathing room below the full-width header. */
  .hero-shell > :not(.site-header){
    max-width:100%!important;
  }
}

@media(max-width:430px){
  .hero-shell .site-header,
  .products-header{
    padding-left:11px!important;
    padding-right:11px!important;
  }

  .hero-shell .brand-logo,
  .products-brand img{
    width:132px!important;
    max-width:36vw!important;
  }

  .hero-shell .home-header-actions,
  .products-header .products-header-actions{
    gap:5px!important;
  }

  .hero-shell .home-header-actions .lang-toggle,
  .products-header .lang-toggle{
    min-width:45px!important;
    flex-basis:45px!important;
    height:38px!important;
    padding:0 8px!important;
  }

  .hero-shell .phone-pill,
  .products-header .products-phone{
    height:38px!important;
    padding:0 9px!important;
    font-size:10.8px!important;
  }

  .hero-shell .main-nav,
  .products-header .products-nav{
    gap:4px!important;
  }

  .hero-shell .main-nav a,
  .products-header .products-nav a{
    font-size:clamp(11.2px,2.95vw,12px)!important;
  }
}

@media(max-width:360px){
  .hero-shell .brand-logo,
  .products-brand img{
    width:118px!important;
  }

  .hero-shell .main-nav a,
  .products-header .products-nav a{
    font-size:10.5px!important;
  }

  .hero-shell .main-nav,
  .products-header .products-nav{
    gap:2px!important;
  }
}