/* ==========================================================================
   NorthStar Insights — Contact Us
   Builds on css/styles.css. Desktop values are --u design pixels (1440 frame).
   ========================================================================== */

/* Introduction */
.contact-intro { padding-top: calc(193 * var(--u)); text-align: center; }
.contact-intro__title {
  font-size: calc(64 * var(--u));
  line-height: calc(76 * var(--u));
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--burgundy);
}
.contact-intro__sub {
  margin-top: calc(28 * var(--u));
  font-size: calc(28 * var(--u));
  line-height: calc(36 * var(--u));
  font-weight: 600;
  color: var(--burgundy);
}

/* Enquiry: photograph (1300 × 688) with the form card over its right side */
.enquiry { padding: calc(70 * var(--u)) 0 calc(130 * var(--u)); }
.enquiry__stage { position: relative; min-height: calc(688 * var(--u)); background: #e8e6e3; overflow: hidden; }
.enquiry__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left center; }
.enquiry__card {
  position: relative; z-index: 1;
  width: calc(699 * var(--u));
  margin: calc(44 * var(--u)) calc(51 * var(--u)) calc(38 * var(--u)) auto;
  padding: calc(40 * var(--u)) calc(57 * var(--u)) calc(37 * var(--u)) calc(46 * var(--u));
  background: var(--white);
}
.enquiry__title {
  font-size: calc(40 * var(--u));
  line-height: calc(50 * var(--u));
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--burgundy);
}

/* Form */
.enquiry-form { margin-top: calc(28 * var(--u)); }
.enquiry-form__grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(36 * var(--u)); row-gap: calc(16 * var(--u)); }
.field--wide { grid-column: 1 / -1; }
.field__label { display: block; margin-bottom: calc(8 * var(--u)); font-size: calc(18 * var(--u)); line-height: 1.3; color: var(--burgundy); }
.field__input {
  display: block; width: 100%;
  height: calc(56 * var(--u)); min-height: 44px;
  padding: 0 calc(18 * var(--u));
  border: 1px solid #a9a9a9; border-radius: 4px;
  background: var(--white);
  font: inherit; font-size: calc(18 * var(--u)); color: var(--ink);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.field__input--area { height: calc(150 * var(--u)); padding-top: calc(14 * var(--u)); resize: vertical; }
.field__input::placeholder { color: #a5a5a5; font-weight: 300; }
.field__input:hover { border-color: rgba(80, 5, 35, .5); }
.field__input:focus { outline: none; border-color: var(--burgundy); box-shadow: 0 0 0 3px rgba(80, 5, 35, .1); }
.field.is-invalid .field__input { border-color: #a3242f; }
.field__error { min-height: 0; margin-top: 4px; font-size: calc(14 * var(--u)); color: #a3242f; }
.field__error:empty { display: none; }

.enquiry-form__footer { display: flex; align-items: center; justify-content: space-between; gap: calc(24 * var(--u)); margin-top: calc(54 * var(--u)); }
/* Outlined button that fills burgundy on hover, arrow nudging forward */
.enquiry-form__submit {
  display: inline-flex; align-items: center; gap: calc(12 * var(--u));
  height: calc(48 * var(--u)); min-height: 44px;
  padding: 0 calc(28 * var(--u));
  border: 1px solid var(--burgundy);
  font-family: var(--font-ui); font-size: calc(18 * var(--u)); letter-spacing: .02em; text-transform: uppercase;
  color: var(--burgundy);
  background: transparent;
  transition: background-color .4s var(--ease-out), color .4s var(--ease-out);
}
.enquiry-form__submit svg { width: calc(24 * var(--u)); height: calc(12 * var(--u)); min-width: 20px; min-height: 10px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .45s var(--ease-out); }
.enquiry-form__submit:hover, .enquiry-form__submit:focus-visible { background: var(--burgundy); color: var(--white); }
.enquiry-form__submit:hover svg, .enquiry-form__submit:focus-visible svg { transform: translateX(4px); }
.enquiry-form__general { font-size: calc(22 * var(--u)); line-height: 1.25; color: var(--burgundy); text-align: left; }
.enquiry-form__general strong { font-weight: 700; }
.enquiry-form__general a { position: relative; font-weight: 400; }
.enquiry-form__general a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out);
}
.enquiry-form__general a:hover::after, .enquiry-form__general a:focus-visible::after { transform: scaleX(1); }
.enquiry-form__status { margin-top: calc(18 * var(--u)); font-size: calc(17 * var(--u)); color: var(--burgundy); }
.enquiry-form__status:empty { display: none; }

/* Offices: same component as the homepage, closing straight into the footer */
.contact-page .offices { padding-top: 0; }

/* ==========================================================================
   Tablet (≤1023px): card sits below the photograph
   ========================================================================== */
@media (max-width: 1023px) {
  .contact-intro { padding-top: 140px; }
  .contact-intro__title { font-size: 48px; line-height: 58px; }
  .contact-intro__sub { font-size: 21px; line-height: 29px; margin-top: 18px; }
  .enquiry { padding: 48px 0 96px; }
  .enquiry__stage { min-height: 0; background: none; overflow: visible; }
  .enquiry__img { position: relative; inset: auto; height: auto; aspect-ratio: 1300 / 688; }
  .enquiry__card { width: auto; margin: -64px 32px 0; padding: 32px 32px 32px; box-shadow: 0 20px 40px -28px rgba(80, 5, 35, .35); }
  .enquiry__title { font-size: 32px; line-height: 40px; }
  .enquiry-form { margin-top: 20px; }
  .enquiry-form__grid { column-gap: 20px; row-gap: 14px; }
  .field__label { font-size: 16px; margin-bottom: 6px; }
  .field__input { font-size: 16px; padding: 0 14px; }
  .field__input--area { height: 140px; padding-top: 12px; }
  .field__error { font-size: 13px; }
  .enquiry-form__footer { margin-top: 32px; }
  .enquiry-form__submit { font-size: 15px; padding: 0 22px; }
  .enquiry-form__general { font-size: 18px; }
  .enquiry-form__status { font-size: 15px; }
}

/* Mobile (≤767px) */
@media (max-width: 767px) {
  .contact-intro { padding-top: 116px; }
  .contact-intro__title { font-size: 36px; line-height: 44px; }
  .contact-intro__title br { display: none; }
  .contact-intro__sub { font-size: 18px; line-height: 26px; }
  .enquiry__card { margin: -40px 0 0; padding: 26px 20px 28px; }
  .enquiry__title { font-size: 28px; line-height: 36px; }
  .enquiry-form__grid { grid-template-columns: 1fr; }
  .enquiry-form__footer { flex-direction: column; align-items: flex-start; gap: 22px; }
  .enquiry-form__general { font-size: 17px; }
}

/* 404 page: reuses the Contact Us introduction */
.not-found .contact-intro { padding-bottom: calc(160 * var(--u)); }
.not-found .cta { margin-top: calc(56 * var(--u)); }
@media (max-width: 1023px) { .not-found .contact-intro { padding-bottom: 112px; } .not-found .cta { margin-top: 40px; } }