/* 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; }
  /* rebuilt flow form: rows dissolve into the column on a phone */
  .sec-contact-form .cf-form .form-row { display: contents; }
  .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; }
}

/* ============ CONTACT FORM: DESKTOP FLOW (2026-08-13) ============
   The form's controls used to carry inline canvas coordinates, which locked
   the portal form editor to reword-only AND meant a client-added question
   rendered below the fixed --h with the footer painting over the button (the
   documented hazard in the --h comment above). The controls are now flow
   markup (half-width pairs in .form-row divs, design-04's convention) and
   this block reproduces the canvas geometry exactly, measured live: rows at
   19px rhythm from y113, addons +7/+5.5 (and its 2px fieldset margin), button
   +17, 117px bottom gap, section 1080. The section grows with the form now;
   min-height keeps the left-column texts (still pinned) from ever clipping. */
@media (min-width: 901px) {
  .sec-contact-form, .sec-contact-form .cv { height: auto; min-height: 1080px; }
  /* .cv becomes the flex root so the form's margins cannot collapse away
     (block-chain collapse swallowed the 113px top margin; flex children
     never collapse margins - same mechanism as the design-01 conversions) */
  .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 117px 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%; }
  .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:
     no blank half-cells on a customer form, ever) */
  .sec-contact-form .cf-form .form-row > :only-child { grid-column: 1 / -1; }
  .sec-contact-form .cf-form .addon-picks { position: static; width: 510px;
      margin: 7px 0 5.5px 2px; }
  .sec-contact-form .cf-form .btn { margin-top: 17px; }
  .sec-contact-form .cf-form .cf-error { position: static; width: auto; }
}