/* =========================================================
   RESPONSIVE / MOBILE STYLES
   Loaded after style.css — overrides load order wins by CSS
   cascade (later rule + equal specificity), inline styles use
   !important only where a fixed inline px value must yield.
   ========================================================= */

/* ---- Mobile nav (hamburger) ---- */
.nav-toggle{
  display:none;
  width:40px;height:40px;border:none;background:none;cursor:pointer;
  align-items:center;justify-content:center;flex-shrink:0;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after{
  content:"";display:block;width:22px;height:2px;background:currentColor;
  transition:transform .25s ease,opacity .25s ease;
}
.nav-toggle span::before{position:relative;top:-7px;}
.nav-toggle span::after{position:relative;top:5px;}
.site-header .nav-toggle{color:#fff;}
.site-header.scrolled .nav-toggle{color:#545c62;}
.nav-toggle.is-open span{background:transparent;}
.nav-toggle.is-open span::before{transform:translateY(7px) rotate(45deg);}
.nav-toggle.is-open span::after{transform:translateY(-5px) rotate(-45deg);}

/* ---- Generic responsive grid hooks ----
   Add one of these classes alongside an inline grid style; the
   inline grid-template-columns is overridden below at each
   breakpoint via !important. */
@media (max-width:900px){
  .rg-4{grid-template-columns:repeat(2,1fr) !important;}
  .rg-3{grid-template-columns:repeat(2,1fr) !important;}
}
@media (max-width:640px){
  .rg-4,.rg-3,.rg-2{grid-template-columns:1fr !important;}
  .rg-2-sm{gap:12px !important;}
}
@media (max-width:480px){
  .rg-2-sm{grid-template-columns:1fr !important;}
}

/* ---- Header / nav ---- */
@media (max-width:860px){
  .nav-toggle{display:flex;}
  .hym-nav{
    display:none;position:fixed;top:0;left:0;width:100%;height:100vh;
    background:#151718;flex-direction:column;justify-content:center;
    align-items:center;gap:22px;z-index:1000;
  }
  .hym-nav.is-open{display:flex;}
  .hym-nav a{
    color:#fff !important;border-color:rgba(255,255,255,.25) !important;
    font-size:16px !important;padding:12px 28px !important;
  }
  .site-header .inner{padding:0 20px;}
}

/* ---- Section spacing / type scale ---- */
@media (max-width:900px){
  section{padding-left:0;padding-right:0;}
  .hero-title{font-size:clamp(2.2rem,7vw,3rem) !important;}
  .vm-title{font-size:clamp(1.6rem,5vw,2rem) !important;}
  .site-footer .cols{grid-template-columns:1fr 1fr !important;gap:32px !important;}
}
@media (max-width:640px){
  body{line-height:1.6;}
  h1{font-size:clamp(1.8rem,8vw,2.4rem) !important;}
  .site-footer .cols{grid-template-columns:1fr !important;text-align:left;}
  .biz-modal,.contact-card,.job-card{padding:26px 20px !important;}
  .sector-nav > div,
  .subnav > div{gap:14px !important;overflow-x:auto;-webkit-overflow-scrolling:touch;}
}

/* ---- Hero video section ---- */
@media (max-width:640px){
  [data-hero-video]{object-position:center;}
}

/* ---- Touch-friendly tap targets ---- */
@media (max-width:640px){
  .biz-tile,.job-card,.hb-card,.contact-card{min-height:44px;}
  .c-submit,.apply-btn,.about-btn,.cta-dark,.cta-line{min-height:44px;}
}