/* =========================================================
   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) ----
   .hym-nav (the fullscreen menu overlay) sits at z-index:1000. The
   toggle button had no `position`, so its z-index never applied (only
   positioned elements participate in stacking) — it rendered in the
   default layer, BEHIND the overlay once open. The hamburger-to-X
   animation below was always running, it was just invisible: there was
   no way to see or tap a close button. Giving the button its own
   stacking position above the overlay fixes that. */
.nav-toggle{
  display:none;
  position:relative;z-index:1001;
  width:40px;height:40px;border:none;border-radius:50%;background:none;cursor:pointer;
  align-items:center;justify-content:center;flex-shrink:0;
  transition:background .25s ease;
}
.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);}
/* Open state: always white (overrides .scrolled) with a soft circular
   highlight, so the close X reads clearly against the dark menu panel
   regardless of scroll position when it was opened. */
.nav-toggle.is-open{color:#fff;background:rgba(255,255,255,.14);}

/* ---- 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;}
}

/* ---- Life at HYM bento gallery ---- */
@media (max-width:860px){
  .life-grid{height:auto;grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:14px;}
  .life-video-tile{grid-column:1 / 3;grid-row:auto;aspect-ratio:9/16;max-height:520px;}
  .life-wide-tile{grid-column:1 / 3;grid-row:auto;aspect-ratio:16/9;}
  .life-grid .life-tile:not(.life-video-tile):not(.life-wide-tile){aspect-ratio:4/3;}
}
@media (max-width:560px){
  .life-grid{grid-template-columns:1fr;}
  .life-video-tile{grid-column:1;aspect-ratio:9/16;max-height:460px;}
  .life-wide-tile{grid-column:1;}
  .life-caption{opacity:1;transform:none;padding:16px;font-size:.82rem;}
}