/* =========================================================
   CONTACT PAGE — extends css/style.css, does not modify it.
   Reuses shared tokens/components: .btn, .eyebrow, .category-strip.
   Values sourced exactly from Figma node 645:26.
   ========================================================= */

.contact-wrap { background: var(--c-bg-white); }

/* --- Contact hero / form --- */
.contact-hero {
  background: var(--c-bg-white);
  padding: 64px 64px 96px;
  display: flex;
  justify-content: flex-end;
}
.contact-hero-inner {
  display: flex;
  gap: var(--space-8);
  width: 100%;
  max-width: 1312px;
  align-items: flex-start;
  justify-content: flex-end;
}

.contact-intro { flex: 1 1 0; display: flex; flex-direction: column; gap: 12px; align-self: stretch; }
.contact-intro .eyebrow { text-align: left; }
.contact-heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 4.6vw, 64px);
  line-height: 1;
  letter-spacing: -1.28px;
  color: var(--c-text-heading);
}
.contact-desc {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.36px;
  color: var(--c-text-muted-2);
}

.contact-socials { display: flex; gap: 12px; margin-top: 4px; }
.contact-social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--c-text-black);
  transition: color 180ms var(--ease);
}
.contact-social:hover { color: var(--c-primary); }
.contact-social svg { width: 100%; height: 100%; }

/* --- Form --- */
.contact-form { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 700px; }
.contact-field {
  background: #f5f4f3;
  box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.05);
  padding: 24px;
  width: 100%;
}
.contact-field input,
.contact-field textarea {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15.3px;
  letter-spacing: -0.2px;
  color: var(--c-text-black);
  resize: none;
  padding: 0;
}
.contact-field input::placeholder,
.contact-field textarea::placeholder { color: rgba(9, 9, 9, 0.5); }
.contact-field input:focus,
.contact-field textarea:focus { outline: none; }
.contact-field--textarea textarea { height: 102px; }

.contact-submit {
  width: 100%;
  border: none;
  cursor: pointer;
}

.contact-status {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--c-text-muted-2);
  min-height: 20px;
}
.contact-status--error { color: var(--c-primary); }
.contact-status--success { color: #166534; }

.contact-field--invalid { box-shadow: inset 0 0 0 1.5px var(--c-primary); }

/* --- Photo strip --- */
.contact-photo-strip {
  background: var(--c-bg-soft);
  padding: 0 64px 64px;
  display: flex;
  justify-content: center;
}
.contact-photo-row {
  display: flex;
  gap: 4px;
  width: 100%;
  max-width: 1312px;
  overflow: hidden;
}
.contact-photo-row img {
  object-fit: cover;
  display: block;
  flex-shrink: 0;
  min-width: 0;
  height: 431px;
  align-self: flex-start;
}
.contact-photo-row img:nth-child(1) { flex: 340 0 0; height: 211px; }
.contact-photo-row img:nth-child(2) { flex: 429 0 0; height: 388px; }
.contact-photo-row img:nth-child(3) { flex: 340 0 0; height: 211px; }
.contact-photo-row img:nth-child(4) { flex: 635 0 0; }

/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */
@media (max-width: 1024px) {
  .contact-hero { padding-left: 32px; padding-right: 32px; }
  .contact-hero-inner { flex-direction: column; }
  .contact-form { max-width: none; }

  .contact-photo-strip { padding-left: 32px; padding-right: 32px; }
  .contact-photo-row { flex-wrap: wrap; overflow: visible; }
  .contact-photo-row img {
    height: 220px !important;
    flex: 1 1 calc(50% - 4px) !important;
    max-width: calc(50% - 4px);
    align-self: auto !important;
  }
}

/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */
@media (max-width: 640px) {
  .contact-hero { padding: 40px 20px 48px; }
  .contact-heading { line-height: 1.05; }

  .contact-field { padding: 16px; }
  .contact-field--textarea textarea { height: 90px; }

  .contact-photo-strip { padding-left: 20px; padding-right: 20px; padding-bottom: 40px; }
  .contact-photo-row { flex-wrap: wrap; gap: 8px; overflow: visible; }
  .contact-photo-row img {
    height: 200px !important;
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100%;
  }
}