/* Reset and base styles */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'Open Sans', sans-serif;
  background: #fff;
  color: #333;
  display: flex;
  flex-direction: column;
}
.container { max-width: 920px; margin: 0 auto; padding: 0 20px; }
main { flex: 1; }

.contact-bar { background: #fff; padding: 8px 0; }
.contact-bar .container {
  display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; font-size: 12px;
}
.contact-bar a {
  color: #2b2b2b; text-decoration: none; display: flex; align-items: center;
}
.contact-bar a:before {
  content: ''; display: inline-block; width: 16px; height: 16px; margin-right: 6px;
  background-size: contain; background-repeat: no-repeat; vertical-align: middle;
}
.contact-bar a.email:before { background-image: url('../images/icon-mail.svg'); }
.contact-bar a.phone:before { background-image: url('../images/icon-telephone.svg'); }

.logo-section { background-color: #2b2b2b; padding: 40px 0; }
.logo-section .container { display: flex; align-items: center; }
.logo-section img { height: 100px; max-width: 100%; }

.splash-section {
  background-image: url('../images/background-splash.jpg');
  background-size: cover;
  background-position: center;
  height: 8vh;
}

.content-section { background: #fff; padding: 10px 0; }
.content-section p {
  font-size: 18px; line-height: 1.6; color: #777;
}

.placeholder-section {
  background: #f4f4f4;
  padding: 50px 0;
  text-align: center;
}
.placeholder-section h2 {
  font-size: 24px;
  margin-bottom: 10px;
}
.placeholder-section p {
  font-size: 16px;
  color: #555;
}

.footer { background-color: #000; color: #9c9999; padding: 8px 20px; font-size: 12px; }
.footer .container { text-align: left; }

@media (max-width: 600px) {
  .contact-bar .container { justify-content: center; text-align: center; }
  .logo-section .container { justify-content: center; }
  .content-section p { font-size: 16px; }
}








/* CONTACT BAR with NAV - LEFT NAV, RIGHT CONTACT */
.contact-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.contact-bar .nav-links {
  display: flex;
  gap: 20px;
  justify-content: flex-start;
}
.contact-bar .contact-links {
  display: flex;
  gap: 20px;
  justify-content: flex-end;
}
.contact-bar .nav-links a,
.contact-bar .contact-links a {
  font-size: 12px;
  color: #2b2b2b;
  text-decoration: none;
}
.contact-bar .nav-links a:hover,
.contact-bar .contact-links a:hover {
  text-decoration: underline;
}