html, body { margin: 0; padding: 0; }
body { font-family: Arial, Helvetica, sans-serif; color: #1f1f1f; background: #f8f6f2; font-size: 16px; line-height: 1.6; }
img { max-width: 100%; height: auto; border: 0; display: block; }
a { color: #a8782b; text-decoration: none; }
a:hover { text-decoration: underline; }
.page-wrap { width: 100%; max-width: 1180px; margin: 0 auto; background: #fff; }
.header { padding: 30px 7%; border-bottom: 1px solid #e5dfd5; overflow: hidden; }
.logo { float: left; width: 190px; }
.logo-text { font-family: Georgia, 'Times New Roman', serif; font-size: 54px; letter-spacing: 6px; line-height: .85; color: #b4873a; }
.logo-sub { font-size: 12px; letter-spacing: 5px; color: #111; margin-top: 8px; }
.nav { float: right; padding-top: 22px; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }
.nav a { color: #222; margin-left: 24px; }
.hero, .section-row, .contact-row { overflow: hidden; border-bottom: 1px solid #e5dfd5; }
.hero-text, .hero-image, .section-image, .section-text, .contact-text, .contact-box { width: 50%; float: left; box-sizing: border-box; }
.hero-text { padding: 78px 7% 60px 7%; }
.hero-image { padding: 0; }
.hero-image img, .section-image img { width: 100%; }
.kicker { color: #a8782b; font-weight: bold; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 18px; }
h1, h2, h3 { font-family: Georgia, 'Times New Roman', serif; font-weight: normal; color: #111; margin: 0; }
h1 { font-size: 46px; line-height: 1.05; margin-bottom: 26px; }
h2 { font-size: 30px; line-height: 1.15; margin-bottom: 12px; }
.number { font-family: Georgia, 'Times New Roman', serif; font-size: 34px; color: #111; margin-bottom: 8px; }
.subtitle { color: #a8782b; font-weight: bold; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 18px; }
.button { display: inline-block; background: #b4873a; color: #fff; padding: 12px 20px; font-size: 12px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; margin-top: 10px; }
.button:hover { background: #8d682e; text-decoration: none; }
.section-text { padding: 54px 7%; }
.portfolio { padding: 54px 7%; border-bottom: 1px solid #e5dfd5; overflow: hidden; }
.portfolio-intro { width: 36%; float: left; box-sizing: border-box; padding-right: 35px; }
.gallery { width: 64%; float: left; overflow: hidden; }
.gallery-item { width: 25%; float: left; box-sizing: border-box; padding: 5px; }
.gallery-item img { width: 100%; }
.contact-text, .contact-box { padding: 54px 7%; }
.contact-line { margin-bottom: 12px; }
.footer { padding: 28px 7%; overflow: hidden; color: #666; font-size: 13px; background: #f3efe7; }
.footer-left { float: left; }
.footer-right { float: right; }
.header:after, .hero:after, .section-row:after, .portfolio:after, .contact-row:after, .footer:after { content: ""; display: table; clear: both; }
@media only screen and (max-width: 800px) {
  .header { padding: 24px 6%; }
  .logo, .nav, .hero-text, .hero-image, .section-image, .section-text, .portfolio-intro, .gallery, .contact-text, .contact-box, .footer-left, .footer-right { float: none; width: 100%; }
  .nav { padding-top: 22px; }
  .nav a { display: inline-block; margin: 0 16px 12px 0; }
  .hero-text, .section-text, .contact-text, .contact-box, .portfolio { padding: 38px 6%; }
  h1 { font-size: 36px; }
  h2 { font-size: 26px; }
  .gallery-item { width: 50%; }
  .footer-right { margin-top: 10px; }
}
@media only screen and (max-width: 480px) {
  body { font-size: 15px; }
  .logo-text { font-size: 44px; }
  h1 { font-size: 31px; }
  .gallery-item { width: 100%; }
}

/* Simple contact form */
.contact-form {
  margin: 0;
}

.contact-form label {
  display: block;
  margin: 0 0 8px 0;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #777;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 18px 0;
  padding: 13px 14px;
  border: 1px solid #d9d2c5;
  background: #fff;
  color: #222;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 16px;
}

.contact-form textarea {
  resize: vertical;
}

.contact-form .checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 20px 0;
  letter-spacing: normal;
  text-transform: none;
  font-size: 14px;
  line-height: 1.5;
  color: #555;
}

.contact-form .checkbox-row input {
  width: auto;
  margin: 3px 0 0 0;
}

.website-field {
  display: none;
}

.form-note {
  margin-top: 18px;
  font-size: 14px;
  color: #777;
}

/* iPad / tablet contact form fix
   Keeps the site layout the same, but gives the contact form enough room
   so every field appears cleanly on its own line on iPad and smaller screens. */
@media only screen and (max-width: 1024px) {
  .contact-text,
  .contact-box {
    float: none;
    width: 100%;
    clear: both;
    padding: 42px 7%;
  }

  .contact-box {
    padding-top: 10px;
  }

  .contact-form label,
  .contact-form input,
  .contact-form select,
  .contact-form textarea,
  .contact-form button {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .contact-form .checkbox-row {
    display: block;
    width: 100%;
  }

  .contact-form .checkbox-row input {
    display: inline-block;
    width: auto;
    margin-right: 8px;
  }

  .contact-form .checkbox-row span {
    display: inline;
  }
}