/* Home-page embed of the inquiry-form section (extracted from the old
   contact page css; hero/more-to-explore rules omitted). Desktop geometry
   is inline on the elements. */
@media (max-width: 900px){

  /* --- inquiry form first, then the studio card --------------------------------- */
  .sec-contact-form .cv{padding:52px 20px; gap:14px;}
  .sec-contact-form .cv > form{order:1; margin-bottom:38px;}
  .sec-contact-form .cv > img,
  .sec-contact-form .cv > video {order:2; aspect-ratio:326/366; object-fit:cover;}
  .sec-contact-form .cv > :nth-child(2){order:3;}
  .sec-contact-form .cv > :nth-child(3){order:4;}
  .sec-contact-form .cv > .ico{display:none;}
  .contact-form{display:flex; flex-direction:column; gap:22px;}
  /* 16px floor: below it iOS Safari zooms the page on focus */
  .contact-form .field{font-size:16px;}
  .contact-form > *{
    position:static !important; left:auto !important; top:auto !important;
    width:100% !important;
  }
  .contact-form .btn{max-width:340px; align-self:center; height:54px !important; margin-top:6px;}
  /* keep the _hp honeypot and the status note out of the flattened flex flow:
     the > * blanket above would otherwise turn the off-screen honeypot into a
     real (tabbable, gap-consuming) flex item on mobile */
  /* selector names no form-wrapper class: an absolute+left rule on one reads
     as a canvas pin to the form editor's stylesheet check (same element,
     same protection, still outranks the > * blanket) */
  form > input[name="_hp"]{position:absolute !important; left:-9999px !important; width:0 !important; height:0 !important;}
  .contact-form > .form-note{width:100%;}

}

/* ============ CONTACT FORM: DESKTOP FLOW (2026-08-13) ============
   The home form's controls carried inline canvas coordinates, which locked
   the portal form editor to reword-only (the four pattern pages were built
   flow and were never locked). Controls are now flow markup and this block
   reproduces the canvas geometry exactly, measured live: single column at
   x481 w480, 70px rhythm from y96 (44px fields + 26px gap), textarea 110,
   button gap 23, 151px bottom gap, section 1000. The section grows with
   the form; min-height keeps the pinned left column (photo, phone line,
   instagram) from ever clipping. Mechanism per the PBLA conversion: .cv is
   the flex root (block-chain margin collapse would swallow the top margin),
   decor stays absolute, the form is the one in-flow child. */
@media (min-width: 901px) {
  .sec-contact-form, .sec-contact-form .cv { height: auto; min-height: 1000px; }
  .sec-contact-form .cv { display: flex; flex-direction: column; align-items: flex-start; }
  .sec-contact-form .cv > form.contact-form { position: static; width: 480px;
      margin: 96px 0 151px 481px; display: flex; flex-direction: column; gap: 26px; }
  .sec-contact-form .contact-form .btn { margin-top: -3px; }
  .sec-contact-form .contact-form .form-note { margin-top: -17px; width: 100%; }
}