/* Spacing system (conversion version). One 8px-based scale for the whole page,
   loaded last so it overrides the scattered values in the older stylesheets.

   Scale: 8 · 16 · 24 · 32 · 48 · 64 · 96
   Rules (desktop / phones):
   - section padding, top and bottom ..... 96 / 64
   - section title -> its content ........ 48 / 32
   - block -> block inside a section ..... 64 / 48
   - large sub-section inside a section .. 96 / 64 (Design files & handoff, closing row of Latest work)
   - grids: column gap / row gap ......... 32 / 64 (Latest work), 32 (My approach); phones 24 / 48
   Contact keeps extra room at the bottom for the horizon floor. */

:root{--sp-1:8px;--sp-2:16px;--sp-3:24px;--sp-4:32px;--sp-5:48px;--sp-6:64px;--sp-7:96px}

/* Sections */
main > .section:not(.hero){padding-block:var(--sp-7)}
html.hero-gsap .contact-section{padding-top:var(--sp-7);padding-bottom:208px}

/* Section title -> content */
.work-section .section-heading,
.approach-section .section-heading,
.testimonials-heading{margin-bottom:var(--sp-5)}

/* Grids */
.project-grid{gap:var(--sp-6) var(--sp-4)}
.approach-grid{gap:var(--sp-4)}

/* Blocks inside a section */
.mid-cta{margin-top:var(--sp-6)}
.nine-slice.ns-card{margin-top:var(--sp-6)}
.work-more{margin-top:var(--sp-7);padding-top:var(--sp-5)}
.handoff{margin-top:var(--sp-7);padding-top:var(--sp-6)}

@media (max-width:800px){
  main > .section:not(.hero){padding-block:var(--sp-6)}
  html.hero-gsap .contact-section{padding-top:var(--sp-6);padding-bottom:160px}
  .work-section .section-heading,
  .approach-section .section-heading,
  .testimonials-heading{margin-bottom:var(--sp-4)}
  .project-grid{gap:var(--sp-5) var(--sp-3)}
  .approach-grid{gap:var(--sp-3)}
  .mid-cta{margin-top:var(--sp-5)}
  .nine-slice.ns-card{margin-top:var(--sp-5)}
  .work-more{margin-top:var(--sp-6);padding-top:var(--sp-4)}
  .handoff{margin-top:var(--sp-6);padding-top:var(--sp-5)}
}