/* Reset */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* Page base */
body{
  font-family: "Lato", Arial, Helvetica, sans-serif;
  color: #8d9399;                 /* light grey body text */
  background: #ffffff;
  text-align: center;
}
.page{
  max-width: 980px;
  margin: 0 auto;
  padding: 24px 20px 80px;
}

/* Logo slightly bigger */
.header{ padding-top: 16px; }
.logo{
  height: 68px;                   /* a bit larger than before */
  width: auto;
  display: inline-block;
  margin: 10px 0 6px;
}

/* Single line with centered HOME button */
.navline{
  position: relative;
  margin: 10px auto 46px;
  max-width: 720px;
  height: 1px;
  background: #e3e4e6;            /* thin grey rule */
}
.home-btn{
  position: relative;
  top: -15px;                     /* sit on the line */
  display: inline-block;
  padding: 6px 16px;
  font-size: 14px;
  color: #7e848a;
  text-decoration: none;
  border: 1px solid #e3e4e6;
  background: #f7f7f7;            /* light pill like Weebly */
  border-radius: 2px;
}

/* Headline – two lines same size & colour */
.intro{ margin-top: 6px; }
.headline{
  margin: 40px 0 0;
  font-weight: 300;               /* light */
  font-size: 32px;                /* same for both lines */
  line-height: 1.6;
  color: #8d9399;                 /* same grey as body */
}
.headline .same-line{ font-size: inherit; font-weight: inherit; }

/* Contact */
.contact{ margin-top: 34px; }
.contact-title{
  font-family: "Bree Serif", Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: 22px;
  color: #d2db5b;                 /* exact green */
  margin: 0 0 10px;
}
.email{
  color: #7e848a;
  text-decoration: none;
}
.email:hover{ text-decoration: underline; }

.company{
  margin-top: 12px;
  font-size: 14px;
  color: #9aa0a6;                 /* slightly lighter */
}
.muted{ color: #b3b8bd; }

/* Footer */
.footer{
  margin-top: 44px;
  font-size: 13px;
  color: #b0b5bb;
}

/* Small screens */
@media (max-width: 560px){
  .logo{ height: 60px; }
  .headline{ font-size: 28px; }
  .navline{ max-width: 90%; }
}
