/* 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: 1080px; background: rgba(247,247,247,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; }
/* MOBILE (additive layer; see style.css) */

@media (max-width: 900px) {

  .sec-contact-form .cv { display: flex; flex-direction: column; padding: 60px 22px 70px; }
  .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; }
}
