/* ============================================================================
   Collaborate (light page), for architects, builders and trade partners.
   No mockup: built from AJID/04-ajid-analysis/2026-10-02-site-critique/
   collaborate-page-recommendations.md with Robb's 2026-10-02 answers.
   #E7E7E4 end to end, sections divided by .draw hairlines, text-led.
   Form styles: css/forms.css. Two-column form grid and studio block: reuses
   .ct-grid / .ct-aside / .ct-formcol / .ct-more / .ct-studio from contact.css.
   ========================================================================= */

:where(.page-collaborate) p + p { margin-top: 1.15em; }
.cl-section { padding-block: var(--sec); }
.cl-head { max-width: var(--measure); }
.cl-head .h2 { margin-top: 18px; }
.cl-head .lede { margin-top: 22px; color: var(--ink-2); }

/* ---- Masthead: one H1, eyebrow line + display line (Process pattern) -------- */
.cl-masthead { padding: clamp(120px, 14vw, 172px) 0 clamp(56px, 7vw, 96px); }
.cl-h1 { margin: 0; font-weight: inherit; }
.cl-h1 > span { display: block; }
.cl-masthead .display { max-width: 18ch; margin-top: 18px; }
.cl-masthead .lede { max-width: 58ch; margin-top: 26px; color: var(--ink-2); }
.cl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; margin-top: 34px; }
@media (max-width: 479px) { .cl-actions .btn { width: 100%; text-align: center; } }

/* ---- What we bring: heading beside key/value rows --------------------------- */
.cl-split { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
@media (min-width: 900px) { .cl-split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.cl-rows li {
  display: grid; grid-template-columns: 1fr; gap: 4px 28px;
  padding-block: 16px; border-top: 1px solid var(--hairline);
}
.cl-rows li:last-child { border-bottom: 1px solid var(--hairline); }
@media (min-width: 600px) { .cl-rows li { grid-template-columns: 9em 1fr; } }
.cl-rows__k {
  padding-top: 3px;
  font-size: var(--size-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: var(--quiet);
}
.cl-rows__v { color: var(--ink); }

/* ---- Numbered items: five (partner standards) and three (when to bring us in) */
.cl-five, .cl-three {
  display: grid; grid-template-columns: 1fr; gap: 36px clamp(24px, 3vw, 44px);
  margin-top: clamp(40px, 5vw, 64px);
}
.cl-five li, .cl-three li { padding-top: 18px; border-top: 1px solid var(--hairline); }
@media (min-width: 600px) { .cl-five { grid-template-columns: repeat(2, 1fr); } }   /* 2 + 2 + 1 */
@media (min-width: 1100px) { .cl-five { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 900px) { .cl-three { grid-template-columns: repeat(3, 1fr); } }
.cl-num {
  display: block;
  font-family: var(--display); font-weight: 100; font-size: var(--size-numeral); line-height: 1;
  color: var(--quiet);
}
.cl-five .h4, .cl-three .h4 { margin-top: 18px; }
.cl-five p, .cl-three p { margin-top: 10px; color: var(--ink-2); }
.cl-after { max-width: 64ch; margin-top: clamp(32px, 4vw, 48px); color: var(--ink); }
.cl-after a { color: var(--voice-link); text-decoration: underline; text-underline-offset: .2em; }
.cl-homeowner { margin-top: 18px; }

/* ---- Voices ------------------------------------------------------------------- */
.cl-voices .wrap { display: grid; grid-template-columns: 1fr; gap: clamp(40px, 5vw, 64px); }
@media (min-width: 900px) { .cl-voices .wrap { grid-template-columns: 1.2fr .8fr; align-items: start; } }
.cl-voice blockquote p {
  font-family: var(--display); font-weight: 300; font-size: var(--size-h4); line-height: 1.45;
  color: var(--headline);
}
.cl-voice:first-child blockquote p { font-weight: 100; font-size: var(--size-h2); line-height: 1.2; letter-spacing: -.012em; }
.cl-voice figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 20px; }
.cl-voice__role { font-size: var(--size-caption); color: var(--ink-2); }
.cl-voice--tbd { padding: 22px 24px; border: 1px dashed var(--quiet); }
.cl-voice__flag { margin-bottom: 14px; }
.cl-voice__flag .tbd-tag { margin-left: 0; }
.cl-more { grid-column: 1 / -1; justify-self: start; }

/* ---- Newsletter issues (text cards) and signup ------------------------------- */
.cl-issues { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: clamp(36px, 4.4vw, 56px); }
@media (min-width: 760px) { .cl-issues { grid-template-columns: repeat(3, 1fr); } }
.cl-issues li { display: flex; }
.cl-issue {
  display: flex; flex-direction: column; gap: 10px; width: 100%;
  padding: clamp(22px, 2.6vw, 32px); border: 1px solid var(--hairline);
  color: inherit; text-decoration: none;
  transition: background var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease);
}
.cl-issue__kicker { font-family: var(--display); font-weight: 300; font-size: var(--size-h4); line-height: 1.3; color: var(--headline); transition: color var(--dur-micro) var(--ease); }
.cl-issue__who { color: var(--ink); }
.cl-issue__date { font-size: var(--size-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--quiet); }
.cl-issue__read { align-self: flex-start; margin-top: auto; padding-top: 10px; }
@media (hover: hover) {
  .cl-issue:hover { background: var(--linen); border-color: var(--ink-2); box-shadow: 0 18px 40px rgba(52,58,68,.10); }
  .cl-issue:hover .cl-issue__kicker { color: var(--voice); }
  .cl-issue:hover .tlink::after { transform: scaleX(0); transform-origin: right; }
  .cl-issue:hover .tlink .arw { transform: translateX(6px); }
}
.cl-issue:focus-visible { outline-offset: 4px; background: var(--linen); }

.cl-signup, .cl-signup__done { max-width: 40rem; margin-top: clamp(32px, 4vw, 48px); }
/* Gravity Forms prints the button as its own field after the email field (inline submit), so the
   field's parts join one grid with it: label, then input and button in a row, then the note.
   (Static build: a flex row inside the input's container.) */
.cl-signup .gform_fields { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; }
.cl-signup .gfield--type-email { display: contents; }
.cl-signup .gfield--type-email > * { grid-column: 1 / -1; }
.cl-signup .gfield--type-email > .ginput_container { grid-column: 1; grid-row: 2; }
.cl-signup .gfield--type-submit { display: flex; grid-column: 2; grid-row: 2; }
.cl-signup .gform_footer { display: none; }   /* Only GF's hidden inputs: the button is inline. */
.cl-signup .gfield_label { grid-row: 1; }
.cl-signup .gfield_required { display: none; }
.cl-signup .gform_validation_errors { display: none; }
.cl-signup .gfield_description { margin: 10px 0 0; }
@media (max-width: 479px) {
  .cl-signup .gform_fields { grid-template-columns: minmax(0, 1fr); }
  .cl-signup .gfield--type-email > .ginput_container, .cl-signup .gfield--type-submit { grid-column: 1; }
  .cl-signup .gfield--type-submit { grid-row: 3; margin-top: 10px; }
  .cl-signup .gfield--type-submit .btn { flex: 1; }
}

/* ---- Trade form column ---------------------------------------------------------- */
.cl-formlede { margin-top: 22px; color: var(--ink-2); }
.gform_footer { justify-content: flex-end; }

@media (prefers-reduced-motion: reduce) {
  .cl-issue, .cl-issue__kicker { transition: none; }
}

/* ---- Close: Allison's words over the drift (Robb, 2026-11-07) ------------------------------------ */
/* A two-sentence quote: the reading size and Canela weights of Praise's closing card (praise-rev-1.css),
   so it sits in two lines on desktop instead of four. */
.cl-note .drift-note__card { max-width: 860px; }
.cl-note .drift-note__card .h2 {
  font-size: clamp(20px, 2.4vw, 32px); line-height: 1.34;
  font-weight: 300; letter-spacing: 0; word-spacing: .04em;
}
@media (min-width: 900px) { .cl-note .drift-note__card .h2 { font-weight: 100; } }