/* Contact Page Styles (mobile-first, content-driven) */

/* Header override: sticky on contact page per requirements */
body.contact-page {
  padding-top: 0;
  background-color: #ffffff;
  background-image: none !important; /* remove global background image only on contact page */
}
body.contact-page .site-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10000;
}

/* Intro Banner: Coffee & Catchup? */
.contact-intro {
  background: #ebc634; /* warm yellow */
}

.contact-intro__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 28px 0 24px; /* content-centered via padding, not vh */
  position: relative;
}

.contact-intro__content {
  text-align: center;
}

.contact-intro__title {
  font-family: "Montserrat-SemiBold", sans-serif;
  font-size: 57px;
  letter-spacing: 0.02em;
  margin: 0 0 8px;
  text-align: center;
}

@font-face {
   font-family: "Hillshort";
   src: url("../fonts/Hillshort.otf") format("opentype");
   font-weight: 400;
   font-style: normal;
   font-display: swap;
 }

 @font-face {
   font-family: "Montserrat-Regular";
   src: url("../fonts/Montserrat-Regular.ttf") format("truetype");
   font-weight: 400;
   font-style: normal;
   font-display: swap;
 }

 
.contact-intro__lead {
  margin: 0;
  font-size: clamp(16px, 4.5vw, 18px);
  line-height: 1.5;
}

/* Decorative phone (does not affect layout height) */
.contact-intro__art { position: relative; min-height: 0; }
.contact-intro__phone {
  position: absolute;
  right: 0;
  bottom: -10px;
  width: clamp(190px, 32vw, 100px);
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* Contact Section: text + form */
.contact-section { padding: clamp(28px, 7vw, 64px) 0; position: relative;}

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

.contact-copy__title { font-size: clamp(50px, 6.4vw, 36px); margin: 0 0 10px; font-family: 'Pacifico', cursive;}
.contact-copy__text { margin: 0 0 12px; line-height: 1.6; }
.contact-points { margin: 0; padding-left: 18px; line-height: 1.7; }

/* Form rules */
.contact-form__wrap { overflow: visible; }
.contact-form { max-width: 720px; gap: 20px;}
.form-row { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 14px; }
.form-row--2 { grid-template-columns: 1fr; gap: 15px; }
.form-field label { display: block; font-weight: 600; margin-bottom: 6px; }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: 44px;
  font: inherit;
  color: var(--color-text);
  border-radius: 5px;
  /*! border: 1px solid rgba(18,18,25,0.18); */
  background: #fff;
  padding: 10px 12px;
  outline: none;
}
.form-field textarea { resize: vertical; min-height: 120px; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color: rgba(138, 43, 226, 0.45); box-shadow: 0 0 0 4px rgba(138,43,226,0.12); }

.contact-form .btn { /*! width: 20%; */ /*! height: 48px; */ /*! border-radius: 12px; */ margin-left: 78%;}

/* Tablet + mobile fixes (keep desktop unchanged) */
@media (max-width: 1024px) {
  body.contact-page .contact-form .btn {
    margin-left: 0;
    width: 100%;
    justify-self: stretch;
  }

  body.contact-page .contact-form__wrap {
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
    box-sizing: border-box;
  }

  body.contact-page .contact-form,
  body.contact-page .form-field,
  body.contact-page .form-field input,
  body.contact-page .form-field textarea,
  body.contact-page .form-field select {
    box-sizing: border-box;
  }

  /* Prevent subpixel border gaps on mobile/tablet (keep same border color) */
  body.contact-page .form-field input,
  body.contact-page .form-field textarea {
    border-width: 2px;
    background: #fff;
    background-clip: padding-box;
  }

  /* Remove visible scrollbar/gutter that can look like a border "crack" on small screens */
  body.contact-page .form-field textarea {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  body.contact-page .form-field textarea::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  /* Prevent floating labels from covering the textarea border on small screens */
  body.contact-page .form-field label {
    max-width: calc(100% - 28px);
    white-space: normal;
    line-height: 1.25;
    font-size: 11px;
    padding-right: 10px;
  }

  body.contact-page .form-field textarea + label {
    top: 14px;
  }
}

/* CTA section */
.contact-cta { padding: clamp(28px, 7vw, 64px) 0; }
.contact-cta__inner { display: grid; gap: 16px; align-items: center; justify-items: start; }
.contact-cta__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 7.6vw, 48px);
  margin: 0;
}

/* Tablet */
@media (min-width: 768px) {
  .contact-intro__inner { grid-template-columns: 1fr 1fr; padding: clamp(34px, 9vw, 125px) 0; }
  .contact-cta__inner { grid-template-columns: 1fr auto; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .form-row--2 { grid-template-columns: 1fr 1fr; }
  body.contact-page .contact-form .btn {
    width: auto;
    min-width: 160px;
    justify-self: end;
  }
}

/* Desktop */
@media (min-width: 1025px) {
  .contact-grid { /*! grid-template-columns: 1.1fr 1fr; */ gap: 32px; }
  .contact-intro__phone { bottom: -65px; }
}

/* Decorative PairGroup position (match Figma) */
body.contact-page .testimonial__pair {
  position: absolute;
  right: clamp(12px, 5vw, 60px);
  top: 58%; /* vertically around the form area */
  transform: translateY(-50%);
  width: clamp(120px, 18vw, 280px);
  height: auto;
  pointer-events: none;
  user-select: none;
  opacity: 1;
  z-index: 0;
}

/* Tablet tweak: nudge slightly down and reduce size */
@media (max-width: 1024px) {
  body.contact-page .testimonial__pair {
    top: 62%;
    right: 24px;
    width: clamp(120px, 24vw, 220px);
  }
}

/* Small screens: move further down to avoid overlapping inputs */
@media (max-width: 767px) {
  body.contact-page .testimonial__pair {
    top: 72%;
    right: 12px;
    width: clamp(100px, 30vw, 180px);
  }
}

/* Place PairGroup image to the right of the Submit button */
.contact-form .form-row:last-child { position: relative; }
.contact-form .form-row:last-child::after {
  content: "";
  position: absolute;
  right: -450px;
  top: 199%;
  transform: translateY(-50%);
  width: clamp(500px, 14vw, 260px);
  height: clamp(500px, 14vw, 260px);
  background: url("../images/ContactUs/PairGroup.png") no-repeat center / contain;
  pointer-events: none;
}

/* Tablet: tuck closer to the button */
@media (max-width: 1024px) {
  .contact-form .form-row:last-child::after {
    right: -12px;
    top: calc(100% + 8px);
    transform: none;
    width: clamp(80px, 22vw, 140px);
    height: clamp(80px, 22vw, 140px);
  }
}

/* Mobile: smaller and just below the button */
@media (max-width: 767px) {
  .contact-form .form-row:last-child::after {
    right: 0;
    top: calc(100% + 10px);
    width: clamp(70px, 28vw, 120px);
    height: clamp(70px, 28vw, 120px);
  }
}

/* Hide the standalone decorative image on the contact page (we now draw it from the button row) */
body.contact-page .testimonial__pair { display: none !important; }

/* Mobile safety */
@media (max-width: 420px) {
  .contact-intro__phone { display: none; }
}

@media (max-width: 767px) {
  body.contact-page .contact-form__wrap { padding: 20px; }
}

@media (max-width: 420px) {
  body.contact-page .contact-form__wrap { padding: 16px; }
}