/* ==========================================================================
   Contact page

   Measured off the reference screenshot supplied by the user (a ~1896px
   viewport captured at 0.3887 scale). Every figure below is that measurement
   converted back to CSS px at the 1920 reference width, expressed as a vw
   clamp so it scales:

     content column      102 -> 1818 (the site's standard 1716 wrap, no cap)
     left column         540      gap 34      form card 1142
     card padding        77       card radius 26
     single-line input   88 tall  radius 13
     message box         319 tall            (matches the original Figma 319)
     send button         108 tall
     pills               78 tall  28 apart
     label -> input      22       field -> field 62
   ========================================================================== */

.contact {
  /* Reference puts the card top at y=278, just under the header block. */
  padding-top: clamp(24px, 4.3vw, 82px);
  padding-bottom: clamp(64px, 10vw, 140px);
}

.contact-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 56px);
}

/* Reference splits the 1716 column 540 / 34 / 1142, so the form runs a little
   over twice the width of the intro and finishes flush with the wrap edge. */
@media (min-width: 900px) {
  .contact-shell {
    grid-template-columns: 1fr 1.6fr;
    align-items: start;
    gap: clamp(24px, 1.8vw, 34px);
  }
}

@media (min-width: 1280px) {
  .contact-shell {
    grid-template-columns: 1fr 2.11fr;
  }
}

/* ---------- Intro column ---------- */

/* Figma-side reference sets this as plain copy on the page, no card, no rule,
   top-aligned with the form. */
.contact-intro {
  min-width: 0;
}

/* Reference measures the headline at 66px on a 77px line box (calibrated on
   the rendered width of "Let's build": 304px), held to a 7.5em measure so it
   breaks "Let's build / something / worth shipping." */
.contact-title {
  font-weight: 600;
  font-size: clamp(1.9rem, 3.5vw, 4.15rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  max-width: 7.5em;
  margin: 0 0 clamp(16px, 2vw, 24px);
}

/* Same 24px body as the rest of the site, justified to match the case studies.
   Reference holds it to a 480px measure, narrower than the column. */
.contact-lede {
  font-size: clamp(1.15rem, 1.3vw, 1.5rem);
  line-height: 1.29;
  color: var(--ink-muted);
  max-width: 20em;
  margin: 0 0 clamp(24px, 2.95vw, 56px);
  text-align: justify;
  text-justify: inter-word;
}

.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 1.5vw, 28px);
}

.contact-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 1.48vw, 28px) clamp(20px, 2.5vw, 48px);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: clamp(1rem, 1.1vw, 1.15rem);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.contact-pill:hover {
  background: #1a1a1a;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
  transform: translateY(-1px);
}

.contact-pill--ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--edge);
}

.contact-pill--ghost:hover {
  background: #f7f7f5;
  border-color: var(--ink);
  box-shadow: none;
}

/* ---------- Form card ---------- */

.contact-form {
  background: #f7f7f5;
  border-radius: clamp(16px, 1.4vw, 28px);
  padding: clamp(24px, 4.06vw, 78px);
}

.field { margin: 0 0 clamp(20px, 3.27vw, 62px); }

/* Last field sits closer to the button than the fields do to each other. */
.field:last-of-type { margin-bottom: clamp(20px, 2.85vw, 54px); }

.field label {
  display: block;
  font-size: clamp(15px, 1.05vw, 20px);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin-bottom: clamp(10px, 1.16vw, 22px);
}

.field .required {
  font-size: clamp(12px, 0.85vw, 14px);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-left: 6px;
}

.field input,
.field textarea {
  width: 100%;
  border: 1.5px solid transparent;
  border-radius: clamp(10px, 0.7vw, 14px);
  padding: clamp(12px, 1.1vw, 20px) clamp(16px, 1.6vw, 30px);
  font-family: var(--font-body);
  font-size: clamp(16px, 1.1vw, 20px);
  color: var(--ink);
  background: var(--paper);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field input {
  min-height: clamp(52px, 4.64vw, 88px);
}

/* Figma draws the message box at 319px */
.field textarea {
  min-height: clamp(160px, 16.83vw, 320px);
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--ink-muted);
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.06);
}

.contact-send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-family: var(--font-body);
  font-size: clamp(1.15rem, 1.4vw, 1.5rem);
  font-weight: 600;
  line-height: 1.21;
  color: var(--paper);
  background: var(--ink);
  border: none;
  border-radius: 999px;
  padding: clamp(16px, 2.08vw, 40px) clamp(32px, 4vw, 48px);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.contact-send:hover {
  background: #1a1a1a;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
}

/* Justified copy opens rivers on narrow screens, so it goes ragged there */
@media (max-width: 720px) {
  .contact-lede { text-align: left; }
}

@media (max-width: 520px) {
  .contact-pill {
    width: 100%;
    white-space: normal;
  }
}