/* V7: final small-screen navigation, fixed actions and compact map modal. */
@media (max-width:1100px){
  body{padding-bottom:112px}
  body.nav-open,body.modal-open{overflow:hidden!important}

  /* Naffco-inspired full-screen menu using Kaizen branding. */
  .site-header:has(.site-nav.open){z-index:2100!important}
  .site-header .site-nav,
  .site-header .site-nav.open{
    box-sizing:border-box!important;
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    height:100dvh!important;
    max-height:100dvh!important;
    padding:128px 24px 48px!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    color:#fff!important;
    background:#071522!important;
  }
  .site-header .site-nav:before{
    content:"";
    position:fixed;
    z-index:0;
    inset:-24px;
    background:url('/assets/media/ChatGPT-Image-Jul-26-2026-08_56_51-PM.png') center/cover no-repeat;
    filter:blur(11px) saturate(.82);
    transform:scale(1.06);
    pointer-events:none;
  }
  .site-header .site-nav:after{
    content:"";
    position:fixed;
    z-index:0;
    inset:0;
    background:linear-gradient(180deg,rgba(5,15,25,.88),rgba(8,17,25,.93));
    pointer-events:none;
  }
  .site-header .site-nav>*{position:relative;z-index:1}
  .site-header .site-nav{display:flex!important;visibility:hidden!important;opacity:0!important;transform:translateX(100%)!important;pointer-events:none!important}
  .site-header .site-nav.open{visibility:visible!important;opacity:1!important;transform:translateX(0)!important;pointer-events:auto!important}
  .site-nav .mobile-nav-head{
    position:absolute!important;top:24px!important;left:26px!important;right:26px!important;
    display:flex!important;align-items:center!important;justify-content:space-between!important;
    width:auto!important;max-width:none!important;margin:0!important
  }
  .site-nav .mobile-nav-head img{width:min(220px,52vw)!important;max-height:64px!important;object-fit:contain!important;object-position:left center!important;filter:none!important}
  .site-nav .mobile-nav-head button{display:grid!important;place-items:center!important;width:62px!important;height:62px!important;padding:0!important;border:1px solid #7d262d!important;border-radius:50%!important;color:#fff!important;background:transparent!important;font-size:40px!important;line-height:1!important}
  .site-nav>a,.site-nav>.nav-service{flex:0 0 auto!important;width:min(680px,100%)!important;max-width:680px!important;margin:0 auto!important}
  .site-nav>a,.site-nav .nav-service>a{box-sizing:border-box!important;display:block!important;width:100%!important;min-height:54px!important;padding:11px 54px!important;color:#fff!important;text-align:center!important;font-size:clamp(23px,3vw,31px)!important;font-weight:500!important;line-height:1.28!important}
  .site-nav>a:after,.site-nav .nav-service>a:after{display:none!important}
  .site-nav .nav-service{position:relative!important;display:grid!important;grid-template-columns:minmax(0,1fr) 48px!important;align-items:start!important}
  .site-nav .nav-service>a{grid-column:1/-1!important;grid-row:1!important}
  .site-nav .service-menu-toggle{position:relative!important;z-index:2!important;grid-column:2!important;grid-row:1!important;right:auto!important;top:auto!important;display:grid!important;place-items:center!important;width:44px!important;height:44px!important;margin:7px 2px 0 0!important;border:1px solid #46505a!important;border-radius:50%!important;color:#fff!important;background:#202020!important;font-size:25px!important}
  /* Closed submenus must occupy no height. Older navigation CSS kept them
     invisible at tablet widths, which created the large blank gaps. */
  .site-nav .service-submenu{
    grid-column:1/-1!important;position:static!important;display:none!important;
    visibility:hidden!important;opacity:0!important;transform:none!important;
    width:min(590px,100%)!important;max-height:0!important;overflow:hidden!important;
    margin:0 auto!important;padding:0!important;border:0!important;border-radius:14px!important;
    background:rgba(4,12,20,.72)!important;box-shadow:none!important;backdrop-filter:blur(5px)
  }
  .site-nav .nav-service.open .service-submenu{
    display:block!important;visibility:visible!important;opacity:1!important;max-height:none!important;
    margin:2px auto 10px!important;padding:7px 14px 12px!important;border-top:1px solid #ffffff24!important
  }
  .site-nav .service-submenu a{display:block!important;padding:9px 12px!important;color:#cfd4d8!important;text-align:center!important;font-size:18px!important;font-weight:500!important}

  /* Stable centred action pill. */
  .quick-tools{
    box-sizing:border-box!important;left:50%!important;right:auto!important;bottom:max(10px,env(safe-area-inset-bottom))!important;
    width:min(720px,calc(100vw - 24px))!important;max-width:720px!important;height:88px!important;
    transform:translateX(-50%)!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;
    transition:opacity .18s ease,visibility .18s ease!important
  }
  .quick-tools>a,.quick-tools>button,.quick-tools>a:hover,.quick-tools>button:hover,.quick-tools>a:focus,.quick-tools>button:focus,.quick-tools>a:active,.quick-tools>button:active{height:74px!important;transform:none!important}
  .fixed-quote-orb{right:max(18px,calc((100vw - min(720px,calc(100vw - 24px)))/2 + 8px))!important;bottom:calc(112px + env(safe-area-inset-bottom))!important;width:72px!important;height:72px!important}
  body.nav-open .quick-tools,body.nav-open .fixed-quote-orb,body.modal-open .quick-tools,body.modal-open .fixed-quote-orb{display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important}

  /* Centred card map: never full screen on phones or tablets. */
  .map-modal.open{display:grid!important;place-items:center!important;padding:24px!important}
  .map-modal .map-modal-panel{
    position:relative!important;inset:auto!important;box-sizing:border-box!important;
    width:min(760px,calc(100vw - 48px))!important;height:min(760px,calc(100dvh - 48px))!important;
    max-width:760px!important;max-height:calc(100dvh - 48px)!important;margin:auto!important;
    border-radius:24px!important;overflow:hidden!important;box-shadow:0 28px 90px #0009!important
  }
  .map-modal-panel>header{padding:20px 22px 15px!important}
  .map-modal-panel>header h2{font-size:clamp(25px,4vw,38px)!important;line-height:1.08!important}
  .map-controls{grid-template-columns:minmax(0,1fr) minmax(170px,.48fr)!important;gap:10px!important;padding:12px 18px!important}
  .map-controls input{grid-column:1/-1!important}
  .map-controls button{grid-column:auto!important}
  #client-leaflet-map{flex:1 1 auto!important;width:100%!important;height:auto!important;min-height:260px!important}
}

@media (max-width:620px){
  body{padding-bottom:100px}
  .site-header .site-nav,.site-header .site-nav.open{padding:108px 18px 35px!important}
  .site-nav .mobile-nav-head{top:18px!important;left:18px!important;right:18px!important}
  .site-nav .mobile-nav-head img{width:min(190px,55vw)!important}
  .site-nav .mobile-nav-head button{width:54px!important;height:54px!important;font-size:34px!important}
  .site-nav>a,.site-nav .nav-service>a{min-height:50px!important;padding:9px 50px!important;font-size:24px!important}
  .site-nav .service-menu-toggle{width:40px!important;height:40px!important;margin-top:6px!important}
  .site-nav .service-submenu a{padding:8px!important;font-size:16px!important}
  .quick-tools{width:calc(100vw - 12px)!important;height:78px!important}
  .quick-tools>a,.quick-tools>button,.quick-tools>a:hover,.quick-tools>button:hover{height:66px!important}
  .quick-tools b{font-size:8px!important}
  .fixed-quote-orb{right:10px!important;bottom:calc(96px + env(safe-area-inset-bottom))!important;width:66px!important;height:66px!important}
  .map-modal.open{padding:12px!important}
  .map-modal .map-modal-panel{width:calc(100vw - 24px)!important;height:min(760px,calc(100dvh - 24px))!important;max-height:calc(100dvh - 24px)!important;border-radius:20px!important}
  .map-modal-panel>header{padding:16px 16px 12px!important}
  .map-modal-panel>header>button{width:46px!important;height:46px!important}
  .map-controls{grid-template-columns:1fr!important;padding:10px 14px!important}
  .map-controls input,.map-controls select,.map-controls button{grid-column:auto!important;min-height:44px!important}
  #client-leaflet-map{min-height:245px!important}
}

@media (max-height:720px) and (max-width:1100px){
  .site-header .site-nav,.site-header .site-nav.open{padding-top:96px!important}
  .site-nav>a,.site-nav .nav-service>a{padding-top:8px!important;padding-bottom:8px!important}
  .site-nav .mobile-nav-head{top:14px!important}
}