/* ==========================================================================
   Mobile stacking — ADDITIVE ONLY.
   The supplied master had no breakpoints, so on a phone the four-column
   process grid, the two-column founders grid and the four-column footer
   were compressed to unreadable widths and the nav overflowed.
   These rules apply below 900px only; desktop rendering is untouched.
   Delete this file and its <link> tags to return to the master exactly.
   ========================================================================== */

@media (max-width:900px){
  .head-inner{height:auto;padding-top:14px;padding-bottom:14px;flex-wrap:wrap;row-gap:12px;}
  .brand img{height:46px;}
  .nav{gap:18px;flex-wrap:wrap;}
  .nav a{font-size:11.5px;letter-spacing:.12em;}

  .hero{background-position:70% center;}
  .hero-scrim{background:linear-gradient(180deg,rgba(5,5,6,.82) 0%,rgba(5,5,6,.72) 55%,rgba(5,5,6,.86) 100%);}
  .hero-copy{max-width:100%;}

  .steps{grid-template-columns:1fr 1fr;}
  .step{padding:22px 18px 8px;}
  .step:first-child{padding-left:18px;}
  .step:nth-child(2){border-right:none;padding-right:18px;}
  .step p{max-width:30ch;}

  .founders-inner{grid-template-columns:1fr;}
  .bio{position:static;width:auto;max-width:none;margin:0 0 12px;
       opacity:1;visibility:visible;transform:none;pointer-events:auto;}
  .bio-tip{display:none;}

  .foot-inner{grid-template-columns:1fr 1fr;}
  .social{grid-column:1;}
}

@media (max-width:560px){
  .steps{grid-template-columns:1fr;}
  .step,.step:first-child,.step:nth-child(2){padding:22px 0 8px;border-right:none;}
  .founder-grid{grid-template-columns:1fr;}
  .foot-inner{grid-template-columns:1fr;}
}