/* RESPONSIVE — real reflow below 860px (the base uses a fixed 1440 canvas + zoom). Loaded last. */

/* keep the 1440 down-scaling only for tablet/desktop widths */
@media (min-width:861px) and (max-width:1440px){ html{ zoom:calc(100vw / 1440); } }

@media (max-width:860px){
  html{ zoom:1 !important; }
  body{ width:auto !important; transform:none !important; }

  /* collapse every multi-column grid, class based */
  .hgrid,.hsub,.hgrid3,.stats,.pgrid,.fgrid,.blk-grid,.phero-grid,.companies,.pace,.services,.team,.contact-grid,.pull{
    grid-template-columns:1fr !important; gap:28px !important;
  }
  /* collapse EVERY inline-style grid (robust: beats inline styles) */
  [style*="grid-template-columns"]{ grid-template-columns:1fr !important; gap:32px !important; }
  .step{ grid-template-columns:1fr !important; gap:6px 0 !important; padding:32px 0 !important; }
  .step .sd{ text-align:left !important; }
  .fgrid{ grid-template-columns:1fr 1fr !important; gap:32px !important; }

  /* section padding */
  .nav,.hero,.who,.pillars,.quote,.focus,.hubs,.ribbon,.foot,.blk,.phero,.sec,.imgband{ padding-left:22px !important; padding-right:22px !important; }
  .hero{ padding-top:104px !important; padding-bottom:48px !important; }
  .phero{ padding-top:118px !important; padding-bottom:48px !important; }
  .who,.pillars,.focus,.hubs,.blk{ padding-top:64px !important; padding-bottom:64px !important; }
  .quote{ padding-top:80px !important; padding-bottom:80px !important; }
  .ribbon,.foot{ padding-top:64px !important; padding-bottom:56px !important; }

  /* hide the 120px hero side rails, collapse to one column */
  .hero .est, .hero .loc{ display:none !important; }
  .hgrid{ grid-template-columns:1fr !important; }
  .hsub{ margin-top:28px !important; }
  .hcta .linkline{ width:auto !important; }

  /* type scale */
  .h1{ font-size:clamp(38px,10.5vw,54px) !important; letter-spacing:-1.6px !important; line-height:1.04 !important; }
  .phero h1{ font-size:clamp(40px,11vw,60px) !important; letter-spacing:-1.6px !important; }
  .h2{ font-size:clamp(30px,8vw,40px) !important; letter-spacing:-1.2px !important; }
  .quote p{ font-size:clamp(26px,7vw,34px) !important; letter-spacing:-1px !important; }
  .pull blockquote{ font-size:26px !important; }
  .step .sn{ font-size:44px !important; } .step h3{ font-size:26px !important; }
  .service{ padding:32px 22px !important; } .service h3{ font-size:28px !important; }
  .pace .v{ font-size:60px !important; letter-spacing:-2px !important; }
  .office h3{ font-size:34px !important; }
  .field input, .field textarea{ font-size:19px !important; }

  /* plates + images shorter */
  .hero-plate, .plate.hero-plate{ height:280px !important; }
  .dark-plate{ height:340px !important; }
  .company .shot{ height:230px !important; }
  .imgband .plate{ height:280px !important; }

  /* nav: hide inline links, show burger + overlay menu */
  .navlinks{ display:none !important; }
  .navcta{ display:none !important; }
  .burger{ display:inline-flex !important; }
  .mobmenu{ display:flex !important; }

  /* team monogram tiles a touch smaller */
  .member .mono-tile .mg{ font-size:64px !important; }
}

/* mobile menu overlay (hidden by default on all sizes; shown via body.nav-open on mobile) */
.burger{ display:none; align-items:center; justify-content:center; width:44px; height:44px; margin:-10px; border:0; background:transparent; cursor:pointer; color:var(--ink); }
.burger svg{ width:24px; height:24px; }
.mobmenu{ display:none; position:fixed; inset:0; z-index:200; background:var(--bg); flex-direction:column; justify-content:center; gap:6px; padding:32px 28px; transform:translateY(-100%); transition:transform .5s cubic-bezier(.22,1,.36,1); }
body.nav-open .mobmenu{ transform:none; }
body.nav-open{ overflow:hidden; }
.mobmenu a{ font-family:var(--serif); font-weight:600; font-size:40px; letter-spacing:-1.5px; color:var(--ink); padding:12px 0; border-bottom:1px solid var(--rule); }
.mobmenu a.mcta{ color:var(--accent); border-bottom:0; margin-top:16px; }
.mobmenu .mclose{ position:absolute; top:22px; right:24px; background:transparent; border:0; font-size:34px; line-height:1; color:var(--ink); cursor:pointer; }

@media (prefers-reduced-motion:reduce){ .mobmenu{ transition:none; } }