/* Loveland Barricade compact spacing system */

/* Desktop and tablet: reduce excess vertical whitespace without making the site cramped. */
.section,
.page-section,
.section-orange,
.work-strip,
.home-resources,
.section-black{
  padding-top:46px!important;
  padding-bottom:46px!important;
}

.intro-band{
  padding-top:30px!important;
  padding-bottom:30px!important;
}

#services.section{
  padding-top:46px!important;
  padding-bottom:46px!important;
}

.cta-section{
  padding-top:36px!important;
  padding-bottom:36px!important;
}

.page-hero{
  padding-top:54px!important;
  padding-bottom:44px!important;
}

.intro-grid,
.split-heading,
.feature-grid,
.work-strip-grid,
.content-grid,
.contact-grid,
.article-layout{
  gap:30px!important;
  row-gap:30px!important;
}

.split-heading{
  margin-bottom:24px!important;
}

.section-heading,
.resource-heading-row{
  margin-bottom:24px!important;
}

.real-work-gallery{
  margin-top:28px!important;
}

.article-body h2{
  margin-top:32px!important;
}

.article-body h3{
  margin-top:24px!important;
}

.article-callout{
  margin-top:24px!important;
  margin-bottom:24px!important;
}

.related-resources{
  margin-top:32px!important;
  padding-top:24px!important;
}

.site-footer{
  padding-top:38px!important;
}

.footer-grid{
  gap:34px!important;
}

.footer-bottom{
  margin-top:24px!important;
}

/* Landscape phones and small tablets. This closes the awkward 721 to 980px gap. */
@media (min-width:721px) and (max-width:980px){
  :root{
    --display-large:2.35rem;
    --display-medium:2.1rem;
  }

  .section,
  .page-section,
  .section-orange,
  .work-strip,
  .home-resources,
  .section-black,
  #services.section{
    padding-top:26px!important;
    padding-bottom:26px!important;
  }

  .intro-band{
    padding-top:22px!important;
    padding-bottom:22px!important;
  }

  .cta-section{
    padding-top:24px!important;
    padding-bottom:24px!important;
  }

  .page-hero{
    padding-top:28px!important;
    padding-bottom:26px!important;
  }

  .intro-grid,
  .split-heading,
  .feature-grid,
  .work-strip-grid,
  .content-grid,
  .contact-grid,
  .article-layout{
    gap:20px!important;
    row-gap:20px!important;
  }

  .split-heading,
  .section-heading,
  .resource-heading-row{
    margin-bottom:18px!important;
  }

  .split-heading>p{
    margin:0!important;
  }

  .hero{
    min-height:500px!important;
  }

  .hero-content{
    padding-top:36px!important;
    padding-bottom:36px!important;
  }

  .hero h1,
  .page-hero h1{
    max-width:720px!important;
  }

  .real-work-gallery{
    margin-top:20px!important;
    gap:16px!important;
  }

  .service-grid,
  .resource-grid,
  .stat-stack,
  .work-list,
  .faq,
  .related-grid,
  .article-aside{
    gap:16px!important;
  }

  .site-footer{
    padding-top:26px!important;
  }

  .footer-grid{
    gap:22px!important;
  }
}

/* Extra protection for short landscape viewports such as phones rotated sideways. */
@media (orientation:landscape) and (max-width:980px) and (max-height:600px){
  .colorado-bar{
    display:none!important;
  }

  .nav-wrap{
    min-height:68px!important;
  }

  .brand{
    width:150px!important;
    height:56px!important;
  }

  .site-nav{
    top:68px!important;
  }

  .hero{
    min-height:430px!important;
  }

  .hero-content{
    padding-top:28px!important;
    padding-bottom:28px!important;
  }

  .section,
  .page-section,
  .intro-band,
  .section-orange,
  .work-strip,
  .home-resources,
  .section-black,
  .cta-section,
  #services.section{
    padding-top:20px!important;
    padding-bottom:20px!important;
  }
}

@media (max-width:720px){
  /* Mobile: no section should feel like a separate full screen panel. */
  .section,
  .page-section,
  .intro-band,
  .section-orange,
  .work-strip,
  .home-resources,
  .section-black,
  .cta-section,
  #services.section{
    padding-top:18px!important;
    padding-bottom:18px!important;
  }

  .page-hero{
    padding-top:20px!important;
    padding-bottom:20px!important;
  }

  .intro-grid,
  .split-heading,
  .feature-grid,
  .work-strip-grid,
  .content-grid,
  .contact-grid,
  .article-layout{
    gap:16px!important;
    row-gap:16px!important;
  }

  .split-heading{
    gap:14px!important;
    margin-bottom:16px!important;
  }

  .split-heading>p{
    margin:0!important;
  }

  .section-heading,
  .resource-heading-row{
    margin-bottom:16px!important;
  }

  .resource-heading-row{
    row-gap:12px!important;
  }

  .eyebrow{
    margin-bottom:8px!important;
  }

  h1,h2,h3{
    margin-bottom:10px!important;
  }

  .intro-grid h2,
  .split-heading h2,
  .feature-copy h2,
  .work-strip h2,
  .resource-heading-row h2,
  .cta-card h2{
    margin-bottom:10px!important;
  }

  .feature-copy p,
  .prose p,
  .contact-card p{
    margin-top:0;
    margin-bottom:12px;
  }

  .service-grid,
  .resource-grid,
  .stat-stack,
  .work-list,
  .faq,
  .related-grid,
  .article-aside{
    gap:14px!important;
  }

  .real-work-gallery{
    margin-top:16px!important;
    gap:14px!important;
  }

  .article-body h2{
    margin-top:18px!important;
    margin-bottom:10px!important;
  }

  .article-body h3{
    margin-top:16px!important;
    margin-bottom:8px!important;
  }

  .article-callout,
  .related-resources{
    margin-top:18px!important;
    margin-bottom:18px!important;
  }

  .related-resources{
    padding-top:18px!important;
  }

  .cta-card{
    gap:16px!important;
  }

  .site-footer{
    padding-top:20px!important;
  }

  .footer-grid{
    gap:18px!important;
  }

  .footer-bottom{
    margin-top:18px!important;
    padding-top:14px!important;
  }
}