/* Home-page embed of the contact-form section (extracted from the old
   contact page css; hero rules omitted -- home has its own hero). */
/* BUILD, MEASURE THIS: --h is a fixed canvas height and the section does NOT
   clip, so a form taller than --h renders its submit button BELOW the section
   and the footer paints over it. 740 fits the six fields this kit ships with
   (lowest control lands at 611, so 129px of slack). Adding questions eats that
   fast: one extra field plus the optional .addon-picks fieldset needs ~880,
   which is what the Viva build measured. Two ways the form grows after you
   last looked at it, both of which need --h raised to match:
     - a build wiring the reconciled package <select> / add-on checkbox group
       (templates/README.md "Reconciled form controls");
     - the CLIENT adding a question post-launch from the portal Account tab
       (src/site_forms.js rewrites the live markup in place and knows nothing
       about this canvas).
   Re-measure with the layout probe after any change to the form's fields. */
.sec-contact-form { --h: 740px; background: rgba(244,239,234,1); }
.z-contact-form_1 { left: 60px; top: 589px; width: 510px; line-height: 1.4; font-size: 15px; white-space: nowrap; }
.z-contact-form_2 { left: 60px; top: 558px; width: 510px; font-size: 17px; font-family: 'Poppins'; font-weight: 400; font-style: normal; white-space: nowrap; }
.z-contact-form_3 { left: 60px; top: 188px; width: 462px; line-height: 1.2; font-size: 50px; }
.z-contact-form_4 { left: 60px; top: 114px; width: 510px; text-align: left; white-space: nowrap; }
/* ============ CONTACT FORM: DESKTOP FLOW (2026-08-16) ============
   Her form's controls carried inline canvas coordinates, which locked the
   portal form editor to reword-only: she could not add, remove or reorder her
   own questions. She was missed by the 2026-08-13 sweep that converted the
   other six live sites and all five kits (docs/handoff-canvas-forms-to-flow.md
   names every client but her), and the B0 gate that guarantees it never ships
   again only ever looks at KITS, so nothing flagged it.

   This block reproduces her measured canvas geometry exactly, taken off the
   LIVE render at 1440: section 740 tall, form column at x630 starting y113,
   seven 34px fields on a 53px pitch (so 19px gaps), button 180x48 at y506,
   which is 41px below the last field rather than the kit's 29 because she has
   no textarea. Same mechanism as design-02's kit conversion, proven live on
   PBLA (14), Hudson Valley (19) and Viva (16): .cv is the flex root, because a
   block chain would collapse the form's top margin, and the button keeps its
   sizing inline so the mobile height rule below still wins.

   Mobile is untouched by any of this: the layer below already neutralised the
   inline geometry with position/left/top/width !important, so it never
   depended on the coordinates this conversion removed. */
@media (min-width: 901px) {
  .sec-contact-form, .sec-contact-form .cv { height: auto; min-height: 740px; }
  .sec-contact-form .cv { display: flex; flex-direction: column; align-items: flex-start; }
  .sec-contact-form .contact-form { position: static; width: 510px;
      margin: 113px 60px 129px 630px; }
  .sec-contact-form .cf-view.cf-form:not([hidden]) { position: static; display: flex;
      flex-direction: column; gap: 19px; }
  .sec-contact-form .cf-form .field { position: static; width: 100%; }
  /* Rows exist for questions the form editor ADDS side by side; she has none
     today, so these are inert until she uses the editor. */
  .sec-contact-form .cf-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
  /* a field left alone on a shared row spans the full line (owner rule) */
  .sec-contact-form .cf-form .form-row > :only-child { grid-column: 1 / -1; }
  /* 22, not 41. The canvas put the button 41px below the last field, but the
     column's own 19px gap already supplies part of that, and margin adds to
     the gap rather than replacing it. Measured: 41 here rendered at y525
     against the canvas's y506. */
  .sec-contact-form .cf-form .btn { margin-top: 22px; }
  .sec-contact-form .cf-form .cf-error { position: static; width: auto; }
}

/* MOBILE (additive layer; see style.css) */

@media (max-width: 900px) {

  .sec-contact-form .cv { display: flex; flex-direction: column; padding: 60px 22px 70px; }
  /* rows dissolve into the single column on a phone */
  .sec-contact-form .cf-form .form-row { display: contents; }
  .sec-contact-form .z-contact-form_4 { order: 1; font-size: 17px; }
  .sec-contact-form .z-contact-form_3 { order: 2; font-size: 28px; margin-top: 14px; }
  .sec-contact-form .z-contact-form_2 { order: 3; font-size: 16px; margin-top: 26px; }
  .sec-contact-form .z-contact-form_1 { order: 4; margin-top: 4px; }
  .sec-contact-form .contact-form { order: 5; margin-top: 34px; }
  /* form fields carry inline geometry → !important to neutralize */
  .sec-contact-form .cf-view:not([hidden]) { position: static; display: flex;
      flex-direction: column; gap: 20px; }
  .sec-contact-form .field { position: static !important; left: auto !important;
      top: auto !important; width: 100% !important; }
  /* The add-on fieldset carries inline canvas geometry like the fields do, so
     it needs the same neutralising. Without it the fieldset keeps its desktop
     coordinates on mobile and pushes the contact section to 1142px against a
     390px screen. */
  .sec-contact-form .addon-picks { position: static !important; left: auto !important;
      top: auto !important; width: 100% !important; }
  .sec-contact-form .cf-form .btn { position: static !important; left: auto !important;
      top: auto !important; width: 100% !important; max-width: 340px; height: 50px;
      margin-top: 8px; align-self: flex-start; }
  .sec-contact-form .cf-success > * { position: static !important; left: auto !important;
      top: auto !important; width: auto !important; }
}