/* =========================
   CONTACT SECTION (WHITE BOX ON DARK BG)
========================= */
.contactSection{
  
  padding: 76px 0;
}


/* =========================
   CONTACT INTRO (ABOVE BOX)
========================= */
.contactIntro{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  margin-bottom: clamp(32px, 5vw, 64px);
}

.contactIntro__title{
  margin: 0;
  font-size: clamp(42px, 5.8vw, 76px);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #fbfbfb;
}

.contactIntro__text{
  margin: 0;
  max-width: 520px;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(251, 248, 248, 0.6);
}
.contactRow{
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 24px;
  padding: 25px 0;
  border-bottom: 1px solid #e6e6e6;
}

.contactLabel{
  font-weight: 500;
  color: #111;
}

.contactValue{
  color: #555;
  line-height: 1.6;
}



.contactCard{
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 0px; /* keep your style */
  padding: clamp(24px, 3vw, 44px);
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(18px, 3vw, 46px);
  align-items: start;
}

/* LEFT */
.contactLeft h2{
  margin: 0 0 14px;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.05;
  font-weight: 500;
  color: #101214;
  letter-spacing: -0.02em;
}

.contactLeft p{
  margin: 0;
  color: rgba(0,0,0,.6);
  line-height: 1.65;
  font-size: 15px;
  max-width: 520px;
}

/* FORM */
.contactForm{
  width: 100%;
}

.formGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.field{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field label{
  font-size: 13px;
  font-weight: 600;
  color: rgba(0,0,0,.78);
}

.field input,
.field textarea{
  width: 100%;
  border: 1px solid rgba(0,0,0,.14);
  background: #fff;
  color: #111;
  padding: 12px 14px;
  border-radius: 0px;
  outline: none;
  font-family: inherit;
  font-size: 14px;
}

.field input::placeholder,
.field textarea::placeholder{
  color: rgba(0,0,0,.40);
}

.field textarea{
  min-height: 160px;
  resize: vertical;
}

.field--full{
  grid-column: 1 / -1;
}

/* Use your global button system */
.contactSubmit{
  margin-top: 16px;
  height: 46px;
  padding: 0 22px;
  width: 150px;
  background-color: black;
  color: white;
}
/* =========================
   CONTACT SECTION BUTTON ONLY
========================= */
.contactSection .btn--primary{
  background: #101214;          /* dark button on white box */
  color: #ffffff;
  border: 1px solid #101214;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Hover ONLY for contact section */
.contactSection .btn--primary:hover{
  background: #000000;
  border-color: #000000;
  transform: translateY(-1px);
}

/* Optional active press */
.contactSection .btn--primary:active{
  transform: translateY(0);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 980px){
  .contactCard{
    grid-template-columns: 1fr;
  }
  .contactSubmit{
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 520px){
  .formGrid{
    grid-template-columns: 1fr;
  }
}
/* =========================
   RESPONSIVE
========================= */
@media (max-width: 980px){
  .contactIntro{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .contactIntro__text{
    max-width: 100%;
  }
}


/* =========================================================
   FIX: Contact form getting CUT (footer coming up early)
   We target the header by aria-label, NOT by .hero class
========================================================= */
header[aria-label="Hero"]{
  height: auto !important;        /* stop 100vh cut */
  min-height: unset !important;
  overflow: visible !important;   /* allow submit button to show */
  padding-bottom: 120px;          /* space below contact box */
}

header[aria-label="Hero"] .hero__wrap{
  height: auto !important;
  min-height: unset !important;
}
/* CONTACT WRAP spacing on all screens */
.contactSection__wrap{
  width: min(var(--max), 100%);
  margin: 0 auto;
  padding: 0 px;
}

/* Responsive */
@media (max-width: 980px){
  .contactIntro{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .contactCard{
    grid-template-columns: 1fr;
  }

  .contactSubmit{
    width: 100%;
    max-width: 220px;
  }
}

@media (max-width: 520px){
  .formGrid{
    grid-template-columns: 1fr;
  }

  .contactSubmit{
    max-width: none;
  }
}