@font-face {
  font-family: Montserrat;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/montserrat-latin.ttf") format("truetype");
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; color: #333; background: #fafafa url("images/faint-squares.jpg") repeat left top; font: 16px/1.5 Helvetica, Arial, sans-serif; }
.container { width: 90%; max-width: 1200px; margin-inline: auto; }
a { color: #2997ac; text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 3px solid #2997ac; outline-offset: 5px; }
.skip-link { position: absolute; left: 12px; top: -100px; z-index: 10; padding: 12px 18px; background: #fff; }
.skip-link:focus { top: 12px; }
.site-header, .site-footer { background: #2c4959; }
.header-content { position: relative; display: flex; justify-content: space-between; min-height: 139px; }
.brand { display: block; flex: 0 0 130px; width: 130px; height: 98px; margin-top: 30px; }
.brand img { display: block; max-width: 100%; height: auto; }
nav { margin: 36px 0; }
nav ul { display: flex; margin: 0; padding: 0; list-style: none; }
nav li { margin-left: 30px; }
nav a { display: block; color: #fff; line-height: 40px; text-transform: uppercase; }
nav a:hover, nav a[aria-current] { color: #2997ac; text-decoration: none; }
.banner-space { height: 75px; }
main.container { padding-block: 32px; }
body.home-content main.container { padding-bottom: 25px; }
article { width: 66.13%; overflow-wrap: break-word; }
h1, h2, .home-description { font-family: Montserrat, Georgia, "Times New Roman", serif; font-weight: 400; }
h1 { margin: 0 0 10px; font-size: 32px; line-height: 1.1666; }
h2 { margin: 0 0 6px; font-size: 28px; line-height: 1.2679; }
p { margin: 0 0 24px; }
article.home-content { padding-bottom: 73px; }
article.home-content h1 { margin-bottom: 56px; }
.home-description { margin: 0; font-size: 24px; line-height: 1.25; }
.project-placeholder { text-align: center; }
.project-placeholder h2 { margin: 0; }
article.projects-content { padding-bottom: 140px; }
article.projects-content h1 { margin-bottom: 116px; }
article.contact-content { min-height: 300px; }
.contact-notice { margin-top: 28px; }
.site-footer { padding: 30px 0 24px; color: #ddd; text-align: center; font-size: 14px; line-height: 24px; }
.site-footer p { margin: 0; }

@media (max-width: 800px) {
  .header-content { flex-direction: column; }
  .brand { flex: none; margin-bottom: 11px; }
  nav { margin: 0; }
  nav li:first-child { margin-left: 0; }
}

@media (max-width: 650px) {
  article { width: 100%; }
}

@media (max-width: 520px) {
  .header-content { align-items: center; }
  nav ul { flex-direction: column; }
  nav li { margin: 0; text-align: center; }
  nav a { padding-inline: 24px; line-height: 32px; }
  .home-description br { display: none; }
}

@media print {
  body { background: #fff; }
  .site-header, .site-footer { background: #fff; color: #000; }
  nav a, nav a[aria-current] { color: #000; }
  .banner-space { height: 20px; }
  article { width: 100%; }
}
