.contact-export,
.contact-export * {
  box-sizing: border-box;
}

.contact-export {
  color: #143524;
  font-family: Arial, Helvetica, sans-serif;
}

.contact-export__section {
  scroll-margin-top: 2rem;
  overflow: hidden;
  padding: 6rem 0;
  background: #0b2b1d;
  color: #fff;
}

.contact-export__layout {
  display: grid;
  width: 100%;
  max-width: 1480px;
  margin-inline: auto;
  gap: 3rem;
  padding-inline: 1.25rem;
}

.contact-export__eyebrow {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 1.25rem;
  color: #e4c475;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.contact-export__eyebrow > span[aria-hidden] {
  width: 2rem;
  height: 1px;
  background: #e4c475;
}

.contact-export h2 {
  max-width: 36rem;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 5vw, 5.5rem);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: .94;
}

.contact-export__intro {
  max-width: 32rem;
  margin: 1.75rem 0 0;
  color: rgb(255 255 255 / 64%);
  font-size: 1.125rem;
  line-height: 2rem;
}

.contact-export__benefits {
  display: grid;
  gap: 1rem;
  margin-top: 2.5rem;
  color: rgb(255 255 255 / 75%);
  font-size: .875rem;
}

.contact-export__benefits p {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0;
}

.contact-export__benefits svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  color: #e4c475;
}

.contact-export__form {
  padding: 1.5rem;
  border-radius: 2rem;
  background: #fffdf8;
  color: #143524;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 38%);
}

.contact-export__fields {
  display: grid;
  gap: 1.25rem;
}

.contact-export__form label,
.contact-export__field-label {
  display: block;
  font-size: .875rem;
  font-weight: 700;
}

.contact-export__form input:not([type="hidden"]):not([type="checkbox"]),
.contact-export__form textarea,
.contact-export__product-trigger {
  width: 100%;
  margin-top: .5rem;
  border: 1px solid #d5dbd7;
  border-radius: .75rem;
  background: #fff;
  color: #143524;
  font: inherit;
  font-size: 1rem;
  font-weight: 400;
  outline: none;
  box-shadow: 0 1px 2px rgb(15 23 42 / 5%);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.contact-export__form input:not([type="hidden"]):not([type="checkbox"]),
.contact-export__product-trigger {
  height: 3rem;
  padding: 0 1rem;
}

.contact-export__form textarea {
  min-height: 8rem;
  padding: .85rem 1rem;
  resize: vertical;
}

.contact-export__form input::placeholder,
.contact-export__form textarea::placeholder {
  color: #87918b;
}

.contact-export__form input:focus,
.contact-export__form textarea:focus,
.contact-export__product-trigger:focus-visible {
  border-color: #197346;
  box-shadow: 0 0 0 3px rgb(25 115 70 / 18%);
}

.contact-export__form.is-validated input:invalid,
.contact-export__form.is-validated textarea:invalid {
  border-color: #bd3f32;
  box-shadow: 0 0 0 3px rgb(189 63 50 / 14%);
}

.contact-export__product-select {
  font-weight: 400;
}

.contact-export__product-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  text-align: start;
  cursor: pointer;
}

.contact-export__product-trigger > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-export__product-trigger.is-placeholder {
  color: #87918b;
}

.contact-export__chevron {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  color: #647168;
  transition: transform 200ms ease;
}

.contact-export__chevron.is-open {
  transform: rotate(180deg);
}

.contact-export__product-panel {
  width: 100%;
  max-height: 26rem;
  margin-top: .45rem;
  padding: .75rem;
  overflow-y: auto;
  border: 1px solid #d8e2dc;
  border-radius: 1rem;
  background: #fffdf8;
  box-shadow: 0 22px 55px rgb(15 45 32 / 18%);
}

.contact-export__product-panel > p {
  margin: 0;
  padding: 0 .25rem .5rem;
  color: #66746c;
  font-size: .75rem;
  font-weight: 600;
}

.contact-export__product-grid {
  display: grid;
  gap: .5rem;
}

.contact-export__product-option {
  display: flex !important;
  min-height: 3.5rem;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  border: 1px solid #dde4df;
  border-radius: .75rem;
  background: #fff;
  color: #1f2e26;
  cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.contact-export__product-option:hover {
  border-color: rgb(25 115 70 / 45%);
  background: #f8faf8;
}

.contact-export__product-option.is-selected {
  border-color: #197346;
  background: #f2f8f4;
  box-shadow: 0 0 0 2px rgb(25 115 70 / 8%);
}

.contact-export__product-option input {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  accent-color: #197346;
}

.contact-export__submit {
  display: inline-flex;
  height: 3rem;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  margin-top: 1.5rem;
  padding: 0 1.5rem;
  border: 0;
  border-radius: 999px;
  background: #df7b31;
  color: #fff;
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 180ms ease, transform 180ms ease;
}

.contact-export__submit:hover {
  background: #c9692b;
  transform: translateY(-1px);
}

.contact-export__submit:focus-visible,
.contact-export__back-top:focus-visible {
  outline: 2px solid #e4c475;
  outline-offset: 3px;
}

.contact-export__submit svg {
  width: 1rem;
  height: 1rem;
}

.contact-export__footer {
  padding: 2.5rem 1.25rem;
  background: #071f15;
  color: rgb(255 255 255 / 60%);
}

.contact-export__footer-layout {
  display: flex;
  max-width: 1480px;
  margin-inline: auto;
  flex-direction: column;
  gap: 2rem;
}

.contact-export__footer-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
}

.contact-export__footer-logos img {
  display: block;
  width: 190px;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: .9;
}

.contact-export__footer-logos > span {
  display: none;
  width: 1px;
  height: 2rem;
  background: rgb(255 255 255 / 18%);
}

.contact-export__footer-copy {
  margin: 1.25rem 0 0;
  font-size: .75rem;
}

.contact-export__back-top {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: .5rem;
  color: #e4c475;
  font-size: .875rem;
  font-weight: 700;
  text-decoration: none;
}

.contact-export__back-top svg {
  width: 1rem;
  height: 1rem;
  transition: transform 180ms ease;
}

.contact-export__back-top:hover svg {
  transform: translateY(-2px);
}

.contact-export__reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 700ms cubic-bezier(.2, .7, .2, 1) var(--contact-reveal-delay, 0ms),
    transform 700ms cubic-bezier(.2, .7, .2, 1) var(--contact-reveal-delay, 0ms);
}

.contact-export__reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 640px) {
  .contact-export__section {
    padding-block: 8rem;
  }

  .contact-export__layout {
    padding-inline: 2rem;
  }

  .contact-export__form {
    padding: 2.25rem;
  }

  .contact-export__fields,
  .contact-export__product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-export__wide {
    grid-column: span 2;
  }

  .contact-export__product-panel {
    overflow-y: visible;
    padding: 1rem;
  }

  .contact-export__footer {
    padding-inline: 2rem;
  }

  .contact-export__footer-logos > span {
    display: block;
  }
}

@media (min-width: 768px) {
  .contact-export__footer-layout {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

@media (min-width: 1024px) {
  .contact-export__layout {
    grid-template-columns: .78fr 1.22fr;
    padding-inline: 3rem;
  }

  .contact-export__footer {
    padding-inline: 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-export__reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .contact-export__submit,
  .contact-export__chevron,
  .contact-export__back-top svg {
    transition: none;
  }

  .contact-export__submit:hover,
  .contact-export__back-top:hover svg {
    transform: none;
  }
}

/* Preserve the host page's fixed-header clearance and Netlify status feedback. */
.contact-export__section { scroll-margin-top: 140px; }
.contact-export__status { margin: 1rem 0 0; color: #174c32; font-size: .875rem; line-height: 1.5; }
.contact-export__status.is-error { color: #a52e23; }
.contact-export__submit:disabled { opacity: .65; cursor: wait; }
.contact-export__form [hidden] { display: none; }
