/* SHAPE: Conversational Fit.
   A wide opening statement, four ruled domains, two honest fit columns
   set against each other, and the form promoted onto the field ground as
   the page's destination. No other v2 page may use this shape.

   Fixes from the v1 work page: the 2x2 feature-card grid (identical to
   the home page's) is gone, the form now carries a reply address, and
   each field states its own error. */

/* ---------- Opening ---------- */
.work-open { padding: clamp(var(--sp-7), 6vw, var(--sp-9)) 0 clamp(var(--sp-6), 5vw, var(--sp-7)); }
.work-open h1 { font-size: var(--fs-hero); max-width: 16ch; }
.open-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--sp-5), 4vw, var(--sp-7));
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line-strong);
}
.open-grid p { max-width: 52ch; }

/* The opening now carries a single statement, so it keeps the rule the
   two-column grid used to draw and holds its own measure. */
.open-lead {
  max-width: 60ch;
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line-strong);
}

/* ---------- Domains ---------- */
.domains {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(var(--sp-6), 5vw, var(--sp-8));
}
.domain { padding: var(--sp-6) 0; border-top: 1px solid var(--line); }
.domains > .domain:nth-child(1), .domains > .domain:nth-child(2) { border-top: 1px solid var(--line-strong); }
.domain h3 { margin-bottom: var(--sp-3); }
.domain p { color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.6; max-width: 46ch; }
.domain-tools {
  list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.domain-tools li {
  font-size: var(--fs-micro); font-weight: 500; color: var(--muted);
  background: var(--paper-sunk); padding: 4px 10px; border-radius: var(--r-pill);
}

/* ---------- Fit ---------- */
.fit {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(var(--sp-6), 5vw, var(--sp-8));
}
.fit-col h2 { margin-bottom: var(--sp-5); }
.fit-list { list-style: none; }
.fit-list li {
  position: relative; padding-left: 1.75rem;
  padding-block: var(--sp-3); border-top: 1px solid var(--line);
  font-size: var(--fs-small); line-height: 1.55; color: var(--ink-soft);
}
.fit-list li:first-child { border-top: none; padding-top: 0; }
.fit-list li::before {
  position: absolute; left: 0; top: var(--sp-3);
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
}
.fit-list li:first-child::before { top: 0; }
/* The mark is not the only signal: each column also has its own heading. */
.fit-list.yes li::before { content: "\2713"; color: var(--field); }
.fit-list.no li::before  { content: "\2715"; color: var(--clay-deep); }

/* ---------- Contact ---------- */
.work-contact { padding: clamp(var(--sp-8), 7vw, var(--sp-9)) 0; }
.contact-grid {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(var(--sp-6), 5vw, var(--sp-8));
  align-items: start;
}
.contact-intro h2 { font-size: var(--fs-h1); max-width: 12ch; }
.contact-intro p { margin-top: var(--sp-4); max-width: 40ch; }
.contact-alt { font-size: var(--fs-small); }

/* The form sits on paper so its inputs keep their contrast on the
   green ground. */
.contact-form {
  background: var(--paper); border-radius: var(--r-lg);
  padding: clamp(var(--sp-5), 4vw, var(--sp-7));
}
.contact-form .field:last-of-type { margin-bottom: var(--sp-6); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .open-grid { grid-template-columns: 1fr; }
  .domains { grid-template-columns: 1fr; }
  .domains > .domain:nth-child(2) { border-top: 1px solid var(--line); }
  .fit { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-intro h2 { max-width: 20ch; }
}