/* ================================================================
   CONTACT PAGE (contact.html), Figma frame "contact us" (78:2479).
   Form UI only: submission is handled by assets/js/contact.js, which
   validates and shows a notice. The Resend backend comes in a later
   phase (see the README / PR notes).
   ================================================================ */
.contact .div-hero{ border-bottom: 0; background: #000; }
.contact .div-hero__inner{ padding-bottom: 53px; }
.contact .div-hero__title{ line-height: 1.07; max-width: 1077px; }
.contact-hero__sub{ max-width: 815px; font-size: 15px; line-height: 23.61px; color: #fff; }

.contact-form-section{ position: relative; overflow: hidden; background: #000; color: #fff; border-top: 1px solid rgba(255,255,255,.2); }
.contact-form-section__inner{ position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; padding: 32px 150px 90px; }
.contact-tri{ position: absolute; z-index: 1; pointer-events: none; left: calc(50% - 24px); top: 69px; width: 796px; max-width: none; }

.contact-form{ display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.contact-form h2{ font-size: 24px; font-weight: 500; letter-spacing: -.02em; line-height: 50px; }
.contact-field{ position: relative; width: 458px; max-width: 100%; }
.contact-field input, .contact-field select, .contact-field textarea{
  display: block; width: 100%; padding: 8px 16px; border: 0; border-bottom: 1px solid rgba(255,255,255,.16); border-radius: 0;
  background: #272727; color: #fff; font: inherit; font-size: 15px; line-height: 23.61px;
  appearance: none; -webkit-appearance: none;
}
.contact-field input::placeholder, .contact-field textarea::placeholder{ color: #fff; opacity: 1; }
.contact-field input:focus, .contact-field select:focus, .contact-field textarea:focus{ outline: 2px solid var(--focus, #00e6ff); outline-offset: 0; }
.contact-field select{ padding-right: 48px; cursor: pointer; background: #272727 url("../../svg/chevron-down.svg") right 16px center / 24px 24px no-repeat; }
.contact-field textarea{ height: 148px; resize: vertical; }
.contact-form button{ margin-top: 0; padding: 16px 32px; background: #fff; color: #000; font-size: 15px; font-weight: 500; line-height: 22.48px; transition: opacity .2s ease; }
.contact-form button:hover{ opacity: .88; }
.contact-form__status{ min-height: 24px; font-size: 15px; line-height: 23.61px; color: #fff; }
.contact-form__status.is-error{ color: #ff6b6b; }
.visually-hidden{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* CTA band: .media-cta (60% black scrim in style.css) and one long line of copy */
.contact .media-cta{ min-height: 0; padding-top: 90px; padding-bottom: 90px; }
.contact .media-cta__copy{ max-width: 1068px; }
.contact .media-cta__copy h2{ margin-bottom: 0; }

@media (max-width: 1000px){
  .contact .div-hero__inner{ padding-bottom: calc(var(--gap) + 24px); }
  .contact-hero__sub{ margin-top: 16px; font-size: clamp(16px, 4.3vw, 19px); line-height: 1.55; }
  .contact-form-section__inner{ padding: 32px var(--gap) 60px; }
  .contact-form h2{ font-size: 20px; line-height: 1.3; margin-top: 16px; }
  .contact-tri{ left: 40%; top: 40%; width: 120vw; opacity: .5; }
  .contact-field{ width: 100%; }
}