/* 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. */
/* BUILD (Desert Glow, 2026-09-17): her form carries NINE questions, not the
   kit's six -- the reconciled package <select>, the five-item .addon-picks
   fieldset and the 'Anything else' textarea all landed here, which is exactly
   the growth the note above predicts. Measured on the rendered page at 1440 (button bottom 134px above the section
   bottom, matching the kit's 129px design margin), not
   guessed: see the layout probe run in the build log. */
.sec-contact-form { --h: 950px; background: rgba(244,241,235,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: 950px; }
  .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; }
}

/* The 901 to 1199 gap. The desktop rule above pins this block's right edge at
   1140px (a 630px left margin + 510px, inside .cv's fixed 1200px canvas), while
   the stacked layout does not take over until 900px. Between the two the form
   runs past the viewport, and html{overflow-x:clip} removes the scrollbar, so
   the cut-off half could not be reached at all: 116px lost at 1024 (ordinary
   iPad landscape) and 239px at 901, taking the second column of add-on
   checkboxes and the send button off screen. Reuse the kit's own stacked
   reflow here, including the blanket that un-absolutes canvas children
   (style.css `.sec .cv > *`), which is what the mobile layout relies on and
   the only reason this is a few rules rather than a re-layout. Centred,
   because at these widths a left-aligned column leaves the right half empty.
   Nothing outside 901-1199 is touched. */
@media (min-width: 901px) and (max-width: 1199px) {
  .sec-contact-form, .sec-contact-form .cv { height: auto; min-height: 0; }
  .sec-contact-form .cv > * { position: static; left: auto; top: auto; right: auto; bottom: auto;
      width: auto; height: auto; white-space: normal; }
  .sec-contact-form .cv { width: auto; max-width: 760px; margin: 0 auto; display: flex;
      flex-direction: column; padding: 60px 40px 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; position: static; width: 100%; max-width: 620px;
      margin: 34px 0 0; }
  .sec-contact-form .cf-view:not([hidden]) { position: static; display: flex; flex-direction: column; }
  .sec-contact-form .field { position: static !important; left: auto !important; top: auto !important;
      width: auto !important; }
  .sec-contact-form .cf-form .btn { position: static !important; left: auto !important; top: auto !important; }
  .sec-contact-form .cf-success > * { position: static !important; left: auto !important;
      top: auto !important; width: auto !important; }
  .sec-contact-form .cf-form .form-row { display: contents; }
  .sec-contact-form .addon-picks { position: static !important; left: auto !important;
      top: auto !important; width: auto !important; }
}