/* ============================================================
   CONTACT PAGE
   Designed to match the existing agricultural / biotech system
   ============================================================ */

.contact-page {
  background: var(--offwhite);
  color: var(--ink-700);
}


/* ============================================================
   SHARED CONTACT ELEMENTS
   ============================================================ */

.contact-page__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;

  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;

  letter-spacing: 0.14em;
  text-transform: uppercase;

  color: var(--forest-600);
}

.contact-page__dot {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: var(--earth-500);

  box-shadow: 0 0 0 4px rgba(168, 90, 33, 0.08);
}


/* ============================================================
   HERO
   ============================================================ */

.contact-hero {
  position: relative;

  min-height: 760px;

  padding-top: var(--nav-h);

  background: var(--forest-900);
  color: #fff;
}


.contact-hero__grid {
  min-height: 760px;

  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 44%);

  max-width: var(--container-wide);

  margin: 0 auto;
}


/* CONTENT */

.contact-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 100px 8% 90px 3rem;
}


.contact-hero__content .contact-page__eyebrow {
  color: var(--forest-300);
}


.contact-hero__title {
  max-width: 850px;

  margin: 30px 0 35px;

  font-family: var(--font-display);
  font-size: clamp(4rem, 6.7vw, 7rem);
  font-weight: 600;

  line-height: 0.95;
  letter-spacing: -0.055em;

  color: #fff;
}


.contact-hero__title em {
  display: block;

  color: var(--gold-400);

  font-style: normal;
}


.contact-hero__intro {
  max-width: 530px;

  margin: 0;

  color: var(--forest-200);

  font-size: 1.05rem;
  line-height: 1.8;
}


/* META */

.contact-hero__meta {
  display: flex;

  margin-top: 75px;

  border-top: 1px solid rgba(255,255,255,.15);
}


.contact-hero__meta > div {
  min-width: 150px;

  padding: 20px 28px 0 0;

  margin-right: 28px;

  border-right: 1px solid rgba(255,255,255,.15);
}


.contact-hero__meta > div:last-child {
  border-right: 0;
}


.contact-hero__meta span,
.contact-hero__meta strong {
  display: block;
}


.contact-hero__meta span {
  margin-bottom: 7px;

  font-family: var(--font-mono);
  font-size: .62rem;

  color: var(--gold-400);
}


.contact-hero__meta strong {
  font-family: var(--font-mono);
  font-size: .64rem;
  font-weight: 500;

  letter-spacing: .1em;

  color: rgba(255,255,255,.65);
}


/* IMAGE */

.contact-hero__visual {
  position: relative;

  min-height: 760px;

  overflow: hidden;

  background: var(--forest-800);
}


.contact-hero__visual img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  opacity: .88;

  filter: saturate(.75);
}


.contact-hero__visual-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(20,32,15,.6) 0%,
      rgba(20,32,15,.08) 45%,
      rgba(20,32,15,.2) 100%
    );
}


.contact-hero__status {
  position: absolute;

  top: 35px;
  right: 35px;

  display: flex;
  align-items: center;
  gap: 9px;

  padding: 9px 12px;

  background: rgba(20,32,15,.6);

  border: 1px solid rgba(255,255,255,.2);

  backdrop-filter: blur(10px);

  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .12em;

  color: #fff;
}


.contact-hero__status span {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: var(--forest-300);

  box-shadow: 0 0 0 4px rgba(155,189,130,.12);
}


.contact-hero__data {
  position: absolute;

  left: 30px;
  bottom: 30px;

  display: flex;
  flex-direction: column;

  padding: 15px 18px;

  background: rgba(20,32,15,.68);

  border-left: 2px solid var(--gold-400);

  backdrop-filter: blur(10px);
}


.contact-hero__data small,
.contact-hero__data span {
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .12em;

  color: rgba(255,255,255,.55);
}


.contact-hero__data strong {
  margin: 4px 0;

  font-family: var(--font-mono);
  font-size: .8rem;
  font-weight: 500;

  letter-spacing: .08em;

  color: #fff;
}


/* ============================================================
   CONTACT CHANNELS
   ============================================================ */

.contact-channels {
  padding-top: 60px;
  padding-bottom: 60px;
}


.contact-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  margin-bottom: 55px;
}


.contact-section-head h2 {
  max-width: 720px;

  margin: 20px 0 0;

  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5vw, 5rem);
  font-weight: 600;

  line-height: .98;
  letter-spacing: -.05em;

  color: var(--forest-900);
}


.contact-section-head h2 span {
  display: block;

  color: var(--forest-500);
}


/* GRID */

.contact-channels__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  border-top: 1px solid var(--sage-300);
  border-left: 1px solid var(--sage-300);
}


/* CARD */

.contact-channel {
  position: relative;

  min-height: 390px;

  padding: 28px;

  border-right: 1px solid var(--sage-300);
  border-bottom: 1px solid var(--sage-300);

  background: transparent;

  color: var(--ink-700);

  transition:
    background .3s var(--ease),
    transform .3s var(--ease);
}


.contact-channel:hover {
  background: var(--paper);

  transform: translateY(-5px);

  color: var(--ink-700);
}


.contact-channel__top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  font-family: var(--font-mono);
  /*font-size: .61rem;*/
  letter-spacing: .1em;

  color: var(--ink-400);
}


.contact-channel__top i {
  font-size: 17px;

  color: var(--forest-600);

  transition: transform .3s var(--ease);
}


.contact-channel:hover .contact-channel__top i {
  transform: translate(3px,-3px);
}


.contact-channel__icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 54px;
  height: 54px;

  margin-top: 60px;

  border: 1px solid var(--sage-300);

  color: var(--forest-600);

  font-size: 20px;
}


.contact-channel h3 {
  margin: 28px 0 15px;

  font-size: 1.55rem;
  line-height: 1.05;

  color: var(--forest-900);
}


.contact-channel h3 span {
  display: block;

  color: var(--forest-500);
}


.contact-channel p {
  max-width: 300px;

  margin: 0 0 25px;

  font-size: .9rem;
  line-height: 1.7;

  color: var(--ink-500);
}


.contact-channel > strong {
  font-family: var(--font-mono);

  font-size: .7rem;
  font-weight: 500;

  color: var(--forest-600);

  word-break: break-word;
}


/* ============================================================
   FORM AREA
   ============================================================ */

.contact-form-area {
  padding: 120px 0;

  background:
    linear-gradient(
      135deg,
      var(--forest-900),
      var(--forest-800)
    );

  color: #fff;
}


.contact-form-layout {
  display: grid;
  grid-template-columns: .8fr 1.2fr;

  gap: 90px;

  align-items: start;
}


/* COPY */

.contact-form-copy {
  position: sticky;
  top: 100px;
}


.contact-form-copy .contact-page__eyebrow {
  color: var(--forest-300);
}


.contact-form-copy h2 {
  max-width: 500px;

  margin: 25px 0;

  font-size: clamp(3rem, 5vw, 5rem);
  font-weight: 600;

  line-height: .95;
  letter-spacing: -.055em;

  color: #fff;
}


.contact-form-copy h2 em {
  display: block;

  font-style: normal;

  color: var(--gold-400);
}


.contact-form-copy > p {
  max-width: 440px;

  margin: 0;

  font-size: .95rem;
  line-height: 1.8;

  color: var(--forest-200);
}


/* INFO */

.contact-form-info {
  max-width: 440px;

  margin-top: 65px;

  border-top: 1px solid rgba(255,255,255,.15);
}


.contact-form-info__item {
  display: flex;
  justify-content: space-between;
  gap: 25px;

  padding: 18px 0;

  border-bottom: 1px solid rgba(255,255,255,.15);
}


.contact-form-info__item span {
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .12em;

  color: var(--forest-400);
}


.contact-form-info__item strong {
  font-size: .78rem;
  font-weight: 500;

  text-align: right;

  color: rgba(255,255,255,.75);
}


/* FORM */

.contact-form-wrap {
  padding: 35px 38px;

  background: rgba(255,255,255,.045);

  border: 1px solid rgba(255,255,255,.14);
}


.contact-form__number {
  margin-bottom: 40px;

  font-family: var(--font-mono);
  font-size: .62rem;

  letter-spacing: .13em;

  color: var(--gold-400);
}


.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 30px;
}


.contact-field {
  margin-bottom: 30px;
}


.contact-field label {
  display: block;

  margin-bottom: 9px;

  font-family: var(--font-mono);
  font-size: .62rem;

  letter-spacing: .12em;
  text-transform: uppercase;

  color: rgba(255,255,255,.55);
}


.contact-field label sup {
  color: var(--gold-400);
}


.contact-field input,
.contact-field textarea,
.contact-field select {
  width: 100%;

  padding: 13px 0;

  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.2);
  border-radius: 0;

  outline: none;

  background: transparent;

  color: #fff;

  font-family: var(--font-sans);
  font-size: .9rem;

  transition: border-color .25s ease;
}


.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: rgba(255,255,255,.28);
}


.contact-field input:focus,
.contact-field textarea:focus,
.contact-field select:focus {
  border-bottom-color: var(--gold-400);
}


.contact-field textarea {
  resize: vertical;

  min-height: 120px;
}


.contact-field select {
  cursor: pointer;

  appearance: none;

  background-image:
    linear-gradient(45deg, transparent 50%, #fff 50%),
    linear-gradient(135deg, #fff 50%, transparent 50%);

  background-position:
    calc(100% - 7px) 50%,
    calc(100% - 2px) 50%;

  background-size:
    5px 5px,
    5px 5px;

  background-repeat: no-repeat;
}


.contact-field select option {
  background: var(--forest-900);
  color: #fff;
}


/* FORM FOOTER */

.contact-form__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 30px;

  margin-top: 10px;
}


.contact-form__footer > span {
  font-family: var(--font-mono);
  font-size: .58rem;

  color: rgba(255,255,255,.35);
}


.contact-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 35px;

  padding: 14px 20px;

  border: 1px solid var(--gold-400);

  background: var(--gold-400);
  color: var(--forest-900);

  font-family: var(--font-mono);
  font-size: .65rem;
  font-weight: 600;

  letter-spacing: .1em;
  text-transform: uppercase;

  transition:
    background .25s var(--ease),
    color .25s var(--ease);
}


.contact-form__submit i {
  font-size: 16px;
}


.contact-form__submit:hover {
  background: transparent;
  color: var(--gold-400);
}


.contact-form__status {
  display: none;

  margin-top: 20px;
  padding: 12px 15px;

  border-left: 2px solid var(--forest-300);

  background: rgba(155,189,130,.08);

  font-size: .78rem;
  line-height: 1.6;

  color: var(--forest-200);
}


/* ============================================================
   LOCATION
   ============================================================ */

.contact-location {
  padding-top: 120px;
  padding-bottom: 120px;
}


.contact-location__head {
  margin-bottom: 55px;
}


.contact-location__head h2 {
  margin: 20px 0 0;

  font-size: clamp(3rem, 5vw, 5rem);
  font-weight: 600;

  line-height: .95;
  letter-spacing: -.055em;

  color: var(--forest-900);
}


.contact-location__head h2 span {
  display: block;

  color: var(--forest-500);
}


.contact-location__grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;

  min-height: 570px;

  border: 1px solid var(--sage-300);
}


/* DETAILS */

.contact-location__details {
  display: flex;
  flex-direction: column;

  padding: 45px;

  background: var(--cream);
}


.contact-location__block {
  padding: 0 0 28px;
  margin-bottom: 28px;

  border-bottom: 1px solid rgba(20,32,15,.13);
}


.contact-location__label {
  display: block;

  margin-bottom: 12px;

  font-family: var(--font-mono);
  font-size: .59rem;
  letter-spacing: .13em;

  color: var(--ink-400);
}


.contact-location__block h3 {
  margin-bottom: 10px;

  font-size: 1.35rem;

  color: var(--forest-900);
}


.contact-location__block p {
  margin: 0;

  font-size: .87rem;
  line-height: 1.7;

  color: var(--ink-500);
}


.contact-location__block a {
  font-family: var(--font-mono);
  font-size: .75rem;

  color: var(--forest-600);

  transition: color .2s ease;
}


.contact-location__block a:hover {
  color: var(--earth-500);
}


.contact-location__coordinates {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;

  margin-top: auto;
  padding-top: 25px;
}


.contact-location__coordinates span {
  padding: 6px 9px;

  border: 1px solid var(--sage-300);

  font-family: var(--font-mono);
  font-size: .58rem;

  color: var(--forest-600);
}


.contact-location__coordinates strong {
  width: 100%;

  font-family: var(--font-mono);
  font-size: .57rem;
  font-weight: 500;

  letter-spacing: .1em;

  color: var(--ink-400);
}


/* MAP */

.contact-location__map {
  position: relative;

  min-height: 570px;

  background: #d8ddd0;
}


.contact-location__map iframe {
  width: 100%;
  height: 100%;

  min-height: 570px;

  border: 0;

  filter: grayscale(1) contrast(.9);
}


.contact-map__label {
  position: absolute;

  left: 20px;
  bottom: 20px;

  display: flex;
  align-items: center;
  gap: 8px;

  padding: 9px 12px;

  background: rgba(255,255,255,.9);

  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .1em;

  color: var(--forest-700);
}


.contact-map__label span {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: var(--earth-500);
}


/* ============================================================
   CLOSING
   ============================================================ */

.contact-closing {
  padding: 120px 0;

  background: var(--forest-100);
}


.contact-closing__inner {
  max-width: 1100px;
}


.contact-closing h2 {
  margin: 25px 0 50px;

  font-size: clamp(3.5rem, 7vw, 7rem);
  font-weight: 600;

  line-height: .92;
  letter-spacing: -.06em;

  color: var(--forest-900);
}


.contact-closing h2 em {
  display: block;

  font-style: normal;

  color: var(--forest-500);
}


.contact-closing__button {
  display: inline-flex;
  align-items: center;
  gap: 30px;

  padding: 15px 20px;

  border: 1px solid var(--forest-600);

  font-family: var(--font-mono);
  font-size: .65rem;
  font-weight: 600;

  letter-spacing: .1em;

  color: var(--forest-700);

  transition:
    background .25s var(--ease),
    color .25s var(--ease);
}


.contact-closing__button i {
  font-size: 16px;
}


.contact-closing__button:hover {
  background: var(--forest-600);

  color: #fff;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {

  .contact-hero__grid {
    grid-template-columns: 1fr 40%;
  }

  .contact-hero__content {
    padding-left: 2rem;
  }

  .contact-hero__title {
    font-size: clamp(3.5rem, 6vw, 5.5rem);
  }

  .contact-form-layout {
    gap: 55px;
  }

}


@media (max-width: 991.98px) {

  .contact-hero,
  .contact-hero__grid {
    min-height: auto;
  }

  .contact-hero__grid {
    display: grid;
    grid-template-columns: 1fr;
  }

  .contact-hero__content {
    padding: 100px 2rem 70px;
  }

  .contact-hero__visual {
    min-height: 520px;
  }


  .contact-channels__grid {
    grid-template-columns: 1fr 1fr;
  }

  .contact-channel:last-child {
    grid-column: 1 / -1;
  }


  .contact-form-layout {
    grid-template-columns: 1fr;

    gap: 70px;
  }

  .contact-form-copy {
    position: static;
  }


  .contact-location__grid {
    grid-template-columns: 1fr;
  }

  .contact-location__map,
  .contact-location__map iframe {
    min-height: 450px;
  }

}


@media (max-width: 767.98px) {

  .contact-hero__content {
    padding: 90px 1.5rem 60px;
  }

  .contact-hero__title {
    margin-top: 25px;

    font-size: clamp(3.1rem, 13vw, 5rem);
  }

  .contact-hero__intro {
    font-size: .92rem;
  }

  .contact-hero__meta {
    margin-top: 50px;
  }

  .contact-hero__meta > div {
    min-width: 0;

    flex: 1;

    padding-right: 15px;
    margin-right: 15px;
  }

  .contact-hero__meta strong {
    font-size: .54rem;
  }

  .contact-hero__visual {
    min-height: 430px;
  }

  .contact-hero__status {
    top: 20px;
    right: 20px;
  }


  .contact-channels {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .contact-section-head {
    margin-bottom: 40px;
  }

  .contact-section-head h2 {
    font-size: clamp(2.7rem, 11vw, 4rem);
  }

  .contact-channels__grid {
    grid-template-columns: 1fr;
  }

  .contact-channel:last-child {
    grid-column: auto;
  }

  .contact-channel {
    min-height: 330px;
  }


  .contact-form-area {
    padding: 80px 0;
  }

  .contact-form-copy h2 {
    font-size: clamp(3rem, 12vw, 4.5rem);
  }

  .contact-form-wrap {
    padding: 28px 20px;
  }

  .contact-form__row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .contact-form__footer {
    align-items: stretch;
    flex-direction: column;
  }

  .contact-form__submit {
    width: 100%;
  }


  .contact-location {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .contact-location__head h2 {
    font-size: clamp(3rem, 12vw, 4.5rem);
  }

  .contact-location__details {
    padding: 30px 22px;
  }

  .contact-location__map,
  .contact-location__map iframe {
    min-height: 380px;
  }


  .contact-closing {
    padding: 80px 0;
  }

  .contact-closing h2 {
    font-size: clamp(3.2rem, 13vw, 5rem);
  }

}


@media (max-width: 575.98px) {

  .contact-hero__meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }

  .contact-hero__meta > div {
    padding: 15px 0 0;

    margin: 0;

    border-right: 0;
  }

  .contact-hero__meta > div:last-child {
    grid-column: 1 / -1;
  }

  .contact-hero__visual {
    min-height: 350px;
  }

}