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

/* =========================================================
   PORTFOLIO PAGE v2 (businesses.html) — responsive
   ========================================================= */
@media (max-width:1024px){
  .pf-eco-chain{font-size:.78rem;}
  .pf-search{flex:0 0 200px;}
}
@media (max-width:900px){
  .pf-hero{min-height:auto;}
  .pf-hero-inner{padding:150px 0 62px;}
  .pf-scroll-cue{display:none;}
  .pf-stat-grid{grid-template-columns:1fr;}
  .pf-stat{border-left:none;border-top:1px solid var(--line);padding:34px 0;}
  .pf-stat:first-child{border-top:none;}
  .pf-eco{padding:80px 0;}
  /* The orbital SVG needs width to breathe; below tablet it becomes an
     ordered list instead of a squashed, unreadable diagram. */
  .pf-eco-figure{display:none;}
  .pf-eco-list{display:block;margin:34px 0 0;border-top:1px solid var(--line);}
  .pf-eco-list li{display:flex;align-items:center;gap:16px;padding:16px 4px;border-bottom:1px solid var(--line);}
  .pf-eco-list b{flex:0 0 46px;height:46px;border-radius:50%;background:#fff;border:1px solid var(--line-2);
    display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600;color:var(--slate);}
  .pf-eco-list span{font-size:.95rem;color:#3f464d;font-weight:500;}
  .pf-eco-list em{margin-left:auto;font-style:normal;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);}
  .pf-controls{top:80px;}
  .pf-controls-in{flex-direction:column;align-items:stretch;gap:12px;padding:12px 20px;}
  .pf-search{flex:1 1 auto;order:-1;}
  .pf-portfolio{padding:56px 0 30px;}
  .pf-sector-block{margin-bottom:52px;}
  .pf-close-cta{padding:88px 0;}
}
@media (max-width:640px){
  .pf-shell{padding:0 20px;}
  .pf-hero-inner{padding:132px 0 52px;}
  .pf-hero h1{max-width:none;}
  .pf-cta-row{flex-direction:column;align-items:stretch;}
  .pf-cta-row .pf-btn{justify-content:center;}
  .pf-grid{grid-template-columns:1fr;gap:16px;}
  .pf-controls-in{padding:10px 20px;}
  .pf-eco-chain{justify-content:flex-start;}
  /* Panel becomes a bottom sheet — closer to the thumb, and it keeps the
     grid visible behind it so users don't lose their place. */
  .pf-panel{top:auto;bottom:0;right:0;width:100%;height:92vh;border-radius:20px 20px 0 0;
    transform:translateY(100%);box-shadow:0 -20px 60px rgba(21,23,24,.28);}
  .pf-panel.open{transform:none;}
  .pf-panel-bar{padding:16px 20px;}
  .pf-panel-bar::before{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);
    width:40px;height:4px;border-radius:2px;background:var(--line-2);}
  .pf-panel-bar{position:relative;padding-top:22px;}
  .pf-panel-scroll{padding:26px 20px 40px;}
  .pf-panel-facts{grid-template-columns:1fr;}
  .pf-close-cta{padding:72px 0;}
}