@charset "UTF-8";
/**
 *  contact.scss — page styles for contact.html.
 *  Compiled by CodeKit to build/css/contact.css.
 *  Ported from the v3 prototype, Round 107.
 */
/* The masthead moved to _template.masthead.scss at its third consumer
   (contact, privacy, accessibility — Round 109). */
/* The conversation — the form card and the routing aside. */
body.contact section.conversation {
  padding: 40px 0 110px;
}

body.contact section.conversation div.content {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: start;
}

body.contact section.conversation div.card {
  background: #ffffff;
  border: 1px solid rgb(230, 234, 238);
  border-radius: 18px;
  padding: 36px;
  box-shadow: 0 20px 50px -30px rgba(0, 43, 73, 0.35);
}

body.contact div.field {
  margin-bottom: 20px;
}

body.contact div.field label {
  display: block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(91, 107, 122);
  margin-bottom: 8px;
}

body.contact div.field label b {
  color: rgb(229, 72, 77);
  font-weight: 500;
}

body.contact div.field input,
body.contact div.field select,
body.contact div.field textarea {
  width: 100%;
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  color: rgb(14, 27, 39);
  background: rgb(251, 252, 253);
  border: 1px solid rgb(230, 234, 238);
  border-radius: 10px;
  padding: 12px 14px;
  outline: none;
  transition: border-color 0.2s cubic-bezier(0.22, 0.75, 0.25, 1), box-shadow 0.2s cubic-bezier(0.22, 0.75, 0.25, 1);
}

body.contact div.field input:focus,
body.contact div.field select:focus,
body.contact div.field textarea:focus {
  border-color: rgb(0, 124, 153);
  box-shadow: 0 0 0 3px rgba(0, 145, 179, 0.14);
}

body.contact div.field textarea {
  min-height: 140px;
  resize: vertical;
}

body.contact div.field div.error {
  display: none;
  margin-top: 6px;
  font-size: 12.5px;
  color: rgb(229, 72, 77);
}

body.contact div.field.invalid input,
body.contact div.field.invalid select,
body.contact div.field.invalid textarea {
  border-color: rgb(229, 72, 77);
}

body.contact div.field.invalid div.error {
  display: block;
  animation: fade-up 0.3s cubic-bezier(0.22, 0.75, 0.25, 1);
}

/* The honeypot — off-screen, never display:none (bots skip that). */
body.contact div.field.trap {
  position: absolute;
  left: -9999px;
  top: auto;
}

body.contact div.routing {
  display: none;
  margin: 0 0 20px;
  border-left: 3px solid rgb(0, 145, 179);
  background: rgba(0, 145, 179, 0.05);
  border-radius: 0 10px 10px 0;
  padding: 12px 16px;
  font-size: 14px;
  color: rgb(14, 27, 39);
}

body.contact div.routing.active {
  display: block;
  animation: fade-up 0.3s cubic-bezier(0.22, 0.75, 0.25, 1);
}

body.contact div.routing a {
  color: rgb(0, 124, 153);
  font-weight: 600;
}

body.contact button.submit {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 15px;
  background: rgb(0, 43, 73);
  color: #ffffff;
  padding: 14px 28px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  box-shadow: 0 8px 24px -12px rgba(0, 43, 73, 0.5);
  transition: transform 0.15s cubic-bezier(0.22, 0.75, 0.25, 1);
}

body.contact button.submit:hover {
  transform: translateY(-2px);
}

/* The real submission can disable the button while sending (a designed
   addition over the v3 prototype, which had no backend). */
body.contact button.submit:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

body.contact div.success {
  display: none;
  text-align: center;
  padding: 36px 12px;
}

body.contact div.success.active {
  display: block;
  animation: fade-up 0.4s cubic-bezier(0.22, 0.75, 0.25, 1);
}

body.contact div.success div.mark {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(16, 164, 137, 0.12);
  color: rgb(46, 158, 107);
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  font-size: 26px;
}

body.contact div.success h2 {
  font-family: "Archivo", sans-serif;
  font-weight: 600;
  font-size: 26px;
  color: rgb(0, 43, 73);
  letter-spacing: -0.015em;
}

body.contact div.success p {
  font-size: 15.5px;
  color: rgb(91, 107, 122);
  max-width: 44ch;
  margin: 12px auto 0;
}

body.contact div.success p a {
  color: rgb(0, 124, 153);
  font-weight: 600;
  text-decoration: none;
}

body.contact div.success p.direct {
  margin-top: 18px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12.5px;
  color: rgb(0, 124, 153);
}

body.contact div.success p.direct a {
  color: inherit;
  text-decoration: none;
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* The routing aside. */
body.contact section.conversation aside {
  transition-delay: 0.1s;
}

body.contact section.conversation aside h2 {
  font-family: "Archivo", sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: rgb(0, 43, 73);
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}

body.contact section.conversation aside > p {
  font-size: 14.5px;
  color: rgb(91, 107, 122);
  margin-bottom: 18px;
}

body.contact div.channel {
  border-top: 1px solid rgb(230, 234, 238);
  padding: 16px 0;
}

body.contact div.channel p {
  font-size: 14px;
  color: rgb(91, 107, 122);
  margin: 0;
}

body.contact div.channel p a {
  color: rgb(0, 43, 73);
  font-weight: 600;
  text-decoration: none;
}

body.contact div.channel p.eyebrow {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: rgb(0, 124, 153);
  margin-bottom: 5px;
}

body.contact section.conversation aside p.direct {
  margin-top: 22px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  color: rgb(0, 43, 73);
  margin-bottom: 0;
}

body.contact section.conversation aside p.direct a {
  color: inherit;
  text-decoration: none;
}

@media (max-width: 880px) {
  body.contact section.conversation div.content {
    grid-template-columns: 1fr;
  }
}