/* ─────────────────────────────────────────────────────────────
   contact-redesign.css — Contact page v6
   One-screen split: city-office image + "Let's talk" text +
   contact details (left) and dark contact form (right).
   "Let's talk" starts at the same left edge as the header logo.
   Scoped to the contact page only.
   ───────────────────────────────────────────────────────────── */

html body.contact-page {
  background: #0e1822;
}

/* ─── Split shell ─── */
html body.contact-page .contact-split {
  display: grid;
  grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
  min-height: calc(100svh - 74px);
  min-height: calc(100dvh - 74px);
  background: #0e1822;
}

/* ─── Image side ─── */
html body.contact-page .contact-media {
  position: relative;
  overflow: hidden;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  background: #0e1822;
}

html body.contact-page .contact-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url("../img/iStock-1600989794.jpg") center center / cover no-repeat;
  transform: scaleX(-1);
}

html body.contact-page .contact-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgb(14 24 34 / 0.82) 0%, rgb(14 24 34 / 0.38) 40%, rgb(14 24 34 / 0) 70%),
    linear-gradient(0deg, rgb(14 24 34 / 0.62) 0%, rgb(14 24 34 / 0.08) 55%);
}

/* Text aligns with the header logo edge (1360px shell) */
html body.contact-page .contact-media-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1360px;
  margin-inline: auto;
  padding: calc(clamp(28px, 3vw, 56px) + 40px) clamp(24px, 4.2vw, 88px) clamp(26px, 3.4vw, 52px);
  margin-left: 190px;
}

/* ─── Eyebrow + title + lead ─── */
html body.contact-page .contact-media .contact-eyebrow {
  margin: 0 0 10px !important;
  color: var(--jp-amber-light, #f2b134) !important;
  font-size: clamp(0.78rem, 0.9vw, 0.95rem) !important;
  font-weight: 800 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  text-shadow: 0 4px 16px rgb(0 0 0 / 0.4) !important;
}

html body.contact-page .contact-media .contact-title {
  margin: 0 !important;
  color: var(--jp-warm-white, #f6f0e4) !important;
  font-family: var(--font-serif-display, Georgia, serif) !important;
  font-size: clamp(2.6rem, 4.2vw, 4.4rem) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-wrap: balance !important;
  text-shadow: 0 6px 24px rgb(0 0 0 / 0.45) !important;
}

html body.contact-page .contact-media .contact-lead {
  max-width: 46ch;
  margin: 14px 0 0 !important;
  color: rgb(var(--jp-warm-white-rgb) / 0.88) !important;
  font-size: clamp(0.98rem, 1.05vw, 1.12rem) !important;
  line-height: 1.55 !important;
  text-shadow: 0 4px 16px rgb(0 0 0 / 0.4) !important;
}

/* ─── Contact details block ─── */
html body.contact-page .contact-media-details {
  margin-top: clamp(18px, 3vh, 30px);
  padding-top: clamp(14px, 2vh, 20px);
  border-top: 1px solid rgb(255 255 255 / 0.22);
  max-width: 560px;
}

html body.contact-page .contact-media-details-title {
  margin: 0 0 10px !important;
  color: var(--jp-amber-light, #f2b134) !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

html body.contact-page .contact-detail-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
}

html body.contact-page .contact-detail-list li {
  display: flex;
  gap: 12px;
  align-items: baseline;
}

html body.contact-page .cd-label {
  flex: 0 0 64px;
  color: rgb(var(--jp-warm-white-rgb) / 0.62) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

html body.contact-page .cd-value {
  color: var(--jp-warm-white, #f6f0e4) !important;
  font-size: 0.88rem !important;
  line-height: 1.45 !important;
  text-decoration: none !important;
  text-shadow: 0 2px 8px rgb(0 0 0 / 0.35) !important;
}

html body.contact-page .cd-value:hover {
  color: var(--jp-amber-light, #f2b134) !important;
}

html body.contact-page .contact-media-note {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 16px;
}

html body.contact-page .contact-media-eyebrow {
  color: var(--jp-amber-light, #f2b134);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

html body.contact-page .contact-media-note strong {
  color: var(--jp-warm-white, #f6f0e4);
  font-family: var(--font-serif-display, Georgia, serif);
  font-size: clamp(0.95rem, 1.05vw, 1.15rem);
  font-weight: 500;
  line-height: 1.25;
  text-shadow: 0 2px 8px rgb(0 0 0 / 0.35);
}

/* ─── Form panel ─── */
html body.contact-page .contact-panel {
  order: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 4vw, 56px) clamp(22px, 3.4vw, 56px);
  background:
    radial-gradient(circle at 8% -6%, rgb(var(--jp-amber-rgb) / 0.1), transparent 22rem),
    linear-gradient(168deg, #17242f 0%, #101b26 60%, #0d1721 100%);
}

html body.contact-page .contact-panel-inner {
  width: min(100%, 560px);
  max-height: 100%;
  overflow-y: auto;
  padding-right: 4px;
}

html body.contact-page .contact-panel-inner::-webkit-scrollbar {
  width: 6px;
}

html body.contact-page .contact-panel-inner::-webkit-scrollbar-thumb {
  background: rgb(255 255 255 / 0.14);
  border-radius: 999px;
}

/* ─── Form heading ─── */
html body.contact-page .contact-form .contact-form-heading {
  margin: 0 0 clamp(16px, 1.8vh, 24px) !important;
  color: var(--jp-warm-white, #f6f0e4) !important;
  font-family: var(--font-serif-display, Georgia, serif) !important;
  font-size: clamp(1.8rem, 2.4vw, 2.5rem) !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  text-wrap: balance !important;
}

/* ─── Dark form ─── */
html body.contact-page .contact-form {
  gap: 11px;
}

html body.contact-page .contact-form .field-grid {
  gap: 11px;
}

/* White field labels */
html body.contact-page .contact-form label {
  color: #fff !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.12em !important;
  gap: 7px !important;
}

html body.contact-page .contact-form input,
html body.contact-page .contact-form select,
html body.contact-page .contact-form textarea {
  min-height: 44px;
  border: 1px solid rgb(255 255 255 / 0.16) !important;
  border-radius: 8px;
  background: rgb(255 255 255 / 0.055) !important;
  color: #fff !important;
  caret-color: var(--jp-amber, #d88900);
  font-size: 0.98rem;
  box-shadow: none !important;
  transition: border-color 0.2s, background 0.2s;
}

html body.contact-page .contact-form input::placeholder {
  color: rgb(255 255 255 / 0.3) !important;
}

html body.contact-page .contact-form textarea {
  min-height: clamp(80px, 9vh, 110px);
  padding-block: 11px;
  resize: vertical;
}

html body.contact-page .contact-form select {
  background-color: #1b2a37 !important;
}

html body.contact-page .contact-form select option {
  background: #17242f;
  color: #fff;
}

html body.contact-page .contact-form input:focus,
html body.contact-page .contact-form select:focus,
html body.contact-page .contact-form textarea:focus {
  border-color: var(--jp-amber, #d88900) !important;
  background: rgb(255 255 255 / 0.08) !important;
  box-shadow: 0 0 0 3px rgb(var(--jp-amber-rgb) / 0.18) !important;
}

html body.contact-page .contact-form .consent-label {
  color: rgb(var(--jp-warm-white-rgb) / 0.68) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html body.contact-page .contact-form .button[type="submit"] {
  width: 100%;
  min-height: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

html body.contact-page .contact-form .form-status {
  color: rgb(var(--jp-warm-white-rgb) / 0.7) !important;
  font-size: 0.85rem !important;
  min-height: 1.2em;
}

/* ─── Secondary tools row ─── */
html body.contact-page .contact-alt-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

html body.contact-page .contact-alt-decor {
  flex: 0 0 auto;
  width: 28px;
  height: 1px;
  background: rgb(var(--jp-amber-rgb) / 0.4);
}

html body.contact-page .contact-alt-note {
  margin: 0 !important;
  color: rgb(var(--jp-warm-white-rgb) / 0.55) !important;
  font-size: 0.8rem !important;
}

html body.contact-page .contact-alt-note a {
  color: var(--jp-amber-light, #f2b134);
  font-weight: 700;
}

/* ─── Mobile: image banner on top, details + form below ─── */
@media (max-width: 900px) {
  html body.contact-page .contact-split {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  html body.contact-page .contact-media {
    min-height: clamp(300px, 40vh, 380px);
  }

  html body.contact-page .contact-media-inner {
    max-width: none;
    padding-top: 48px;
    margin-left: 0;
  }

  html body.contact-page .contact-panel {
    align-items: flex-start;
  }

  html body.contact-page .contact-panel-inner {
    max-height: none;
    overflow: visible;
  }
}