/* ==========================================================================
   Proximate Solutions — responsive overrides
   Every media query in the project lives in this file. Loaded after style.css.
   Breakpoints follow Bootstrap 5: xl 1199.98 · lg 991.98 · md 767.98 · sm 575.98
   ========================================================================== */

/* ------------------------------------------------------------ max 1199.98px */
@media (max-width:1199.98px){
  #menu > ul{gap:20px}
  .footer-top{padding:48px 0 36px}
  .g-44{--bs-gutter-x:32px;--bs-gutter-y:36px}
}

/* -------------------- max 991.98px — desktop nav out, drawer menu in ------- */
@media (max-width:991.98px){
  html,body{overflow-x: hidden;}
  /* the hover mega-nav is desktop-only; the drawer replaces it */
  .nav-wrap{display:none}

  /* ---- Mobile drawer menu -------------------------------------------------
     Right-side drawer. Every nested <ul> is ALSO a fixed, full-height drawer
     that slides in over its parent with a Back row pinned to the top, so the
     pattern repeats to any depth with no extra CSS. Because the panels are
     position:fixed they are never clipped by the drawer they came from. */
  .menu_open{display:inline-grid;place-items:center;color:var(--navy-700);font-size:32px;line-height:1}
  .menu_open:hover{color:var(--navy-800)}

  .menu_overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9998;
    background:rgba(12,26,48,.62)}

  .mobile_menu_wrap{position:fixed;top:0;bottom:0;right:-100%;z-index:9999;
    background:#fff;width:var(--drawer-w);max-width:82%;height:100vh;
    padding:0 0 var(--drawer-foot-h);
    transition:right .25s linear;box-shadow:-18px 0 44px -22px rgba(12,26,48,.5)}
  .mobile_menu_wrap.menu_show{right:0}

  .menu_close{position:absolute;left:-42px;top:16px;line-height:1}
  .menu_close i{font-size:26px;color:#fff}
  .menu_close:hover i{color:var(--gold-2)}

  .mobile_menu_wrap ul{padding:0;margin:0;list-style:none}
  .mobile_menu_wrap ul.main_menu{padding:8px 0 16px;max-height:100%;overflow-y:auto}
  .mobile_menu_wrap ul li{border-bottom:1px solid var(--line);padding:0 18px}
  .mobile_menu_wrap ul li a{display:block;padding:15px 0;font-family:var(--ff);
    font-size:15.5px;font-weight:500;color:var(--ink-700);transition:color var(--tr)}
  .mobile_menu_wrap ul li a:hover{color:var(--gold)}

  /* parent rows: label on the left, arrow button on the right */
  .mobile_menu_wrap ul li.hassub{position:relative;padding-right:58px}
  .mobile_menu_wrap ul li.hassub>.sub_menu_open{position:absolute;right:0;top:0;
    padding:17px 21px;font-size:13px;line-height:1;color:var(--ink-400);
    border-left:1px solid var(--line)}
  .mobile_menu_wrap ul li.hassub>.sub_menu_open:hover{color:var(--gold)}

  /* Every submenu is its own drawer. `visibility` is part of the transition so
     it stays visible for the whole slide — without it the panel would vanish
     instantly on Back instead of sliding back out. It also stops above the
     pinned foot block, which stays put no matter how many levels are open. */
  .mobile_menu_wrap ul li.hassub>ul{position:fixed;top:0;bottom:var(--drawer-foot-h);
    right:-100%;width:var(--drawer-w);max-width:82%;background:#fff;margin:0;
    padding:50px 0 16px;overflow-y:auto;z-index:9;visibility:hidden;
    transition:right .3s linear,visibility .3s linear}
  .mobile_menu_wrap ul li.hassub>ul.show_submenu{visibility:visible;right:0}

  .mobile_menu_wrap ul li.back_to_mainmenu{position:absolute;top:0;left:0;width:100%;
    background:var(--bg-soft);border-bottom:1px solid var(--line);padding:0 18px}
  .mobile_menu_wrap ul li.back_to_mainmenu a{padding:13px 0;font-size:14px;
    font-weight:600;color:var(--navy-700)}
  .mobile_menu_wrap ul li.back_to_mainmenu a i{font-size:12px;margin-right:4px}

  /* ---- pinned foot: top-bar content + CTA, above every sliding panel -------
     Its height is measured into --drawer-foot-h by custom.js, because the
     serving-cities line wraps to a different number of lines per screen width. */
  .menu_foot{position:absolute;left:0;right:0;bottom:0;z-index:20;
    padding:14px 18px 16px;background:#fff;border-top:1px solid var(--line)}
  .menu_info{display:flex;flex-direction:column;gap:3px;margin-bottom:12px}
  .menu_info_line{margin:0 0 4px;font-size:12px;line-height:1.5;color:var(--ink-500)}
  .menu_info_link{font-size:14px;font-weight:600;color:var(--navy-700);
    transition:color var(--tr)}
  .menu_info_link:hover{color:var(--gold)}

  .trust{gap:22px}
  .hours-div{display:none}
  .case-feature-stats{border-left:0;border-top:1px solid var(--dk-fill-3)}
  .topbar{display:none}
  .topbar-in {flex-direction:column; gap: 12px; text-align: center; }
  .topbar-contact{width:100%;justify-content:space-between;}
  .footer-bar {flex-direction:column; text-align: center; }
  .footer-legal {justify-content: center; gap: 10px !important; }

  }
  @media (max-width:950px){

  .fld-dk {max-width: 260px;}
}

/* --------------------------------------------- max 767.98px — tablet/handset */
@media (max-width:767.98px){
  .topbar-in{justify-content:flex-start}
  .topbar-contact{gap:16px}
  .trust{gap:18px;}
  .footer-bar{justify-content:flex-start}
  .footer-about{max-width:none}
  .sec-head{margin-bottom:36px}
  .sec-head-dk{margin-bottom:36px}
  .panel{padding:32px 24px}
  .case-feature-body,.case-feature-stats{padding:32px 24px}
  .mini-stats{gap:20px}
  .plans-band{background:linear-gradient(180deg,var(--navy-700) 0%,var(--navy-700) 90px,var(--bg) 90px,var(--bg) 100%)}
  .newsletter-form {margin-top: 25px;}
  .newsletter-form form{justify-content: start; gap: 0;}
  .fld-dk{margin-right: 10px;}
}

/* ------------------------------------------------- max 575.98px — small phone */
@media (max-width:575.98px){
  .fld-row{grid-template-columns:1fr}
  .faq-btn{padding:17px 18px;gap:12px}
  .faq-body{padding:0 18px 18px}
  .feature-card{padding:22px}
  .proc-card,.team-card,.office-card{padding:22px}
  .case-card-top{padding:22px 22px 0}
  .case-stats{padding:18px 22px}
  .case-quote{padding:0 22px 20px}
  .belief-box{padding:24px}
  .form-card,.form-card-lg{padding:22px}
  .btn-ps-lg{padding:15px 28px;font-size:16px}
  .btn-ps-lg2{padding:15px 28px;font-size:16px}
  .trust{gap:14px;font-size:13px}
  .hours{gap:24px}
  .footer-legal{gap:16px}
  .flagship-card,.svc-card,.niche-card,.testi-card{padding:22px}
  .hero-photo{height:320px}
  .company-photo{height:280px}
  .newsletter-form{width:100%}
  .fld-dk{min-width:0;flex:1 1 auto}
}

/* --------------------------------------------------------- max 399.98px */
@media (max-width:399.98px){
  .container{padding-left:16px;padding-right:16px}
  .case-stats .row{--bs-gutter-x:8px}
  .case-stat-n{font-size:19px}
  .stat-card{padding:18px}
  .brand-name{font-size:17px}
  .brand-sub{font-size:9.5px;letter-spacing:1.3px}
}