/* =========================================================
   Spacing rhythm (loaded last). Tighter, consistent gaps
   between sections on every screen size.
   ========================================================= */

/* header never hides */
.nav.hide{transform:none}

/* sections */
.sec{padding-top:clamp(44px,5.5vw,80px);padding-bottom:clamp(44px,5.5vw,80px)}
.split-hs{padding-top:clamp(44px,5.5vw,80px);padding-bottom:clamp(44px,5.5vw,80px)}
.sec-head{margin-bottom:clamp(26px,3.4vw,46px)}
.sec-head h2{margin:14px 0 12px}

/* top of page */
.page-hero{padding-bottom:clamp(36px,4.5vw,60px)}
.contact-hero{padding-bottom:clamp(44px,5.5vw,72px)}
.stats-band{margin-top:clamp(36px,4.5vw,56px)}
.brands{padding:clamp(36px,4.5vw,56px) 0 0}
.brands h2{margin-bottom:20px}

/* full-width photo bands + footer */
.img-band{margin-bottom:clamp(40px,5vw,72px)}
footer{padding-top:clamp(44px,5.5vw,72px)}
.wordmark{margin-top:clamp(28px,4vw,48px)}
.bottom{padding-top:20px}

/* in-section spacing that had grown large */
.hs-progress{margin-top:16px}
.system-foot{margin-top:clamp(28px,4vw,44px)}
.process-head{margin-bottom:clamp(28px,4vw,40px)}
.progress{margin-bottom:clamp(24px,3vw,36px)}
.note{margin-top:14px}
.paired + *{margin-top:0}

@media (max-width:680px){
  .sec{padding-top:44px;padding-bottom:44px}
  .split-hs{padding-top:44px;padding-bottom:44px}
  .sec-head{margin-bottom:24px}
  .img-band{margin-bottom:40px}
}

/* tighter call-to-action box and the run into the footer */
.cta-box{padding:clamp(30px,4.5vw,64px)}
main > section:last-child{padding-bottom:clamp(28px,3.5vw,48px)}
footer{padding-top:clamp(36px,4.5vw,56px)}
/* brand strip directly after a section doesn't need its own top gap */
.sec + .brands{padding-top:0}