/* Approved review 9: full-height background, compact navigation, image-only work. */
.home-hero {
  background-image: url('assets/hero-web-design-v9.png');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
.home-hero::before { background: rgba(4, 21, 36, .44); }
.home-page .site-header:not(.is-scrolled) { padding-block: 12px; }
.site-header .brand-logo { width: 200px; height: auto; }
.site-header .header-inner,
.home-page .site-header:not(.is-scrolled) .header-inner,
.home-page .site-header.is-scrolled .header-inner,
.inner-page .site-header .header-inner,
.inner-page .site-header.is-scrolled .header-inner {
  min-height: 76px;
  padding-block: 0;
}
.js-ready .home-hero, .home-hero { padding-block-start: 134px; }
.hero-content h1 { max-width: 1000px; margin-inline: auto; line-height: 1.4; }
.hero-brand-name { display: block; font-size: clamp(48px, 5vw, 68px); }
.hero-service-title { display: block; font-size: clamp(30px, 3.25vw, 45px); margin-block-start: 8px; }
.hero-content > p { max-width: 730px; margin-block-start: 24px; }
.project-link .project-shot { flex: 1; }
.project-link .project-shot img { border-radius: inherit; }

@media (max-width: 900px) {
  .site-header .brand-logo { width: 184px; }
  .site-header .header-inner,
  .home-page .site-header:not(.is-scrolled) .header-inner,
  .home-page .site-header.is-scrolled .header-inner,
  .inner-page .site-header .header-inner,
  .inner-page .site-header.is-scrolled .header-inner { min-height: 70px; padding-block: 0; }
  .js-ready .home-page .site-header:not(.is-scrolled) #main-nav { inset-block-start: calc(100% - 12px); }
}
@media (max-width: 700px) {
  .home-hero { background-position: 21% center; background-size: cover; }
  .home-hero::before { background: rgba(4, 21, 36, .62); }
  .site-header .brand-logo { width: 170px; }
  .site-header .header-inner,
  .home-page .site-header:not(.is-scrolled) .header-inner,
  .home-page .site-header.is-scrolled .header-inner,
  .inner-page .site-header .header-inner,
  .inner-page .site-header.is-scrolled .header-inner { min-height: 64px; padding-block: 0; }
  .js-ready .home-hero, .home-hero { padding-block-start: 116px; }
  .hero-brand-name { font-size: 44px; }
  .hero-service-title { font-size: 28px; line-height: 1.55; margin-block-start: 10px; }
  .hero-content > p { font-size: 16px; line-height: 1.95; margin-block-start: 20px; }
}
@media (max-width: 350px) {
  .site-header .brand-logo { width: 160px; }
  .hero-brand-name { font-size: 39px; }
  .hero-service-title { font-size: 25px; }
  .hero-content > p { font-size: 15px; }
}