/* Responsive overrides. Layout in the JSX is written with inline styles, so the
   breakpoint rules need !important to win. Class hooks: z-r-* */

img,svg{max-width:100%}

/* Process steps: 4 across, or an even 2 x 2 — never 3 + 1 */
@media (max-width:820px){
  .z-r-steps{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .z-r-steps>div{border-right:none!important}
  .z-r-steps>div:nth-child(odd){border-right:1px dashed var(--rule-dashed)!important}
  .z-r-steps>div:nth-child(-n+2){border-bottom:1px dashed var(--rule-dashed)!important}
}

/* tablet */
@media (max-width:1000px){
  .z-r-hero{grid-template-columns:1fr!important;gap:32px!important}
  .z-r-split{grid-template-columns:1fr!important;gap:36px!important}
  .z-r-2col{grid-template-columns:1fr!important}
  .z-r-3col{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .z-r-footer{grid-template-columns:1fr 1fr!important;gap:32px!important}
}

/* phone */
@media (max-width:640px){
  .z-r-topbar-strip{height:auto!important;padding:7px 16px!important;font-size:10px!important}
  .z-r-topbar-main{padding:12px 16px!important;gap:12px!important}
  .z-r-hero{padding-left:16px!important;padding-right:16px!important}
  .z-r-hero-copy h1{font-size:clamp(32px,9vw,44px)!important}
  .z-r-hero-copy p{font-size:16px!important}
  .z-r-pad{padding-left:16px!important;padding-right:16px!important}
  .z-r-3col{grid-template-columns:1fr!important}
  .z-r-3col>div{min-height:220px!important}
  .z-r-footer{grid-template-columns:1fr!important;gap:28px!important}
  .z-r-footer-bottom{flex-wrap:wrap!important;align-items:flex-start!important;gap:18px!important}
  .z-r-hero-caption{height:auto!important;min-height:0!important}
  .z-r-showroom{zoom:.56}
  .z-r-tight{padding-top:48px!important;padding-bottom:44px!important}
  .z-r-eqcard{padding:20px!important}
  .z-r-eqcard p{font-size:16px!important}
}

/* very narrow */
@media (max-width:400px){
  .z-r-showroom{zoom:.44}
}