/* ============================================================================
   ONE BCG — shared page-contact section ("pcf")

   The dark closing section + enquiry form reused, unchanged in behaviour,
   on every secondary page. The field/formstatus rules mirror the homepage
   form exactly (same markup, same classes: .field, .formstatus, .formnote,
   .req) so the two can never drift out of sync; only the section-level
   wrapper is namespaced (.pcf, .pcf-form) to avoid colliding with the
   homepage's own .v22talk/.v22form, which stay exactly as they were.
   ========================================================================== */

.pcf{background:var(--dark);color:#fff;padding-block:clamp(4rem,7.5vw,6.5rem) clamp(1.75rem,3vw,2.5rem)}
.pcf__g{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(2.5rem,6vw,5.5rem);align-items:start}
.pcf__eb{margin:0 0 .9rem;font-size:.75rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#ff8c8f}
.pcf__h{margin:0;max-width:14ch;font-size:var(--ty-h1-home,clamp(2rem,1.3rem + 2.4vw,3.1rem));
  font-weight:var(--ty-h1-w,600);line-height:1.08;letter-spacing:-0.01em;color:#fff}
.pcf__p{margin:clamp(1.1rem,2.2vw,1.6rem) 0 0;max-width:38ch;color:rgba(255,255,255,.76);
  font-size:1.0625rem;line-height:1.6}

/* ---- the form card ---- */
.pcf-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.5rem);background:var(--paper);border-radius:18px;
  padding:clamp(1.75rem,3.5vw,2.75rem)}
.pcf-form .field{margin:0}
.pcf-form .field--full,.pcf-form .formnote,.pcf-form .pcf-form__act,
.pcf-form .formstatus{grid-column:1 / -1}
.pcf-form .formnote{margin:0;font-size:.8125rem;color:var(--ink-3)}
.pcf-form__act{display:flex;justify-content:flex-start}
.pcf-form textarea{min-height:130px}
.pcf-form,.pcf-form label,.pcf-form input,.pcf-form textarea{color:var(--ink)}
.pcf-form .formstatus{color:var(--ink-2)}

/* field base, identical to the homepage form (duplicated here, not shared via
   link, because the homepage stylesheet is homepage-only) */
.field{margin-bottom:1.5rem}
.field label{display:block;font-size:.8125rem;font-weight:600;margin-bottom:.55rem}
.field .req{color:var(--red)}
.field input,.field textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--line-2);border-radius:8px;
  padding:.95rem 1.1rem;transition:border-color .2s ease}
.field textarea{min-height:9.5rem;resize:vertical;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:#8B857A}
.field input:focus,.field textarea:focus{outline:2px solid var(--red);outline-offset:1px;
  border-color:var(--red)}
.field.is-invalid input,.field.is-invalid textarea{border-color:var(--red)}
.formstatus{margin-top:1.25rem;font-size:.8125rem;line-height:1.6;
  border-left:2px solid var(--red);padding-left:1rem;color:rgba(255,255,255,.8)}
.pcf-form .formstatus{color:var(--ink-2)}
.formstatus:empty{margin:0;padding:0;border-left-width:0;height:0;overflow:hidden}

/* ---- the text column that sits beside the form in every two-column contact
   fold (homepage .v22talk__say and every secondary-page .pcf__g alike):
   eyebrow, heading, supporting copy, one optional contextual text link ---- */
.pcf__alt{margin:clamp(2rem,4vw,3rem) 0 0;font-size:.875rem;
  display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}

@media (max-width:1040px){
  .pcf__g{grid-template-columns:minmax(0,1fr);gap:2.5rem}
}
@media (max-width:600px){
  .pcf-form{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .field input,.field textarea{transition:none}
}