/* Loaded last so these overrides win specificity ties without !important. */


html, body {
  overflow-x: hidden;
  max-width: 100vw;
  overscroll-behavior-x: none;
}
/* The original style.css ships `body { margin: 60px 0 40px 0; }`. With my
   earlier `html { background: #1a1a1a }` that produced visible dark bands
   at the top and bottom of every page. Zero the body margin and put the
   60px breathing room above the menu as padding on the header instead —
   that way it doesn't conflict with the bg image on the home or with
   .contentbkg's negative margin pull-up on project pages. */
body { margin: 0; }
#header { padding-top: 30px; padding-bottom: 30px; }

@media (max-width: 768px) {
  body, body * { max-width: 100vw; }
  body img, body video, body iframe {
    max-width: 100% !important;
    height: auto;
  }

  input[type="text"], input[type="email"], input[type="password"],
  input[type="tel"], input[type="url"], input[type="search"],
  textarea, select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
  }

  .contactform, .webform-client-form, form .form-item {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Inline status pill on the contact form. */
.form-status {
  margin: 14px 0;
  padding: 12px 14px;
  border-radius: 3px;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
  background: #222;
  color: #fff;
}
.form-status[data-state="ok"]  { background: #00d9a3; color: #0a2018; }
.form-status[data-state="err"] { background: #ff5252; color: #fff; }