/* forms.css
   The one form component for the whole site.

   These rules used to live inside css/pages/contact-v2.css, which meant the
   contact page was the only page that could render a styled form. Anything
   else either shipped raw browser controls or grew a second, slightly
   different form system. They were lifted out of that file unchanged so there
   is exactly one definition of a field, a label, an error and a submit row.

   Load it before the page stylesheet, so a page can still adjust layout around
   the form without having to restate what a form control looks like.

   Structure a form expects:

     .cform-g                two column shell, intro left, form right
       .cform-intro          heading and supporting copy
       .cform-note           mono aside with an acid rule down the left
     form
       .cform                the field stack
         .frow .two          side by side pair, collapses under 640px
           .fld              label, control, and its .ferr
         .fld                full width field
         .form-honeypot      off screen, never visible, still in the DOM
         .fstatus            form level message, populated by contact-form.js
         .fsubmit            button plus consent line

   Tokens are referenced with fallbacks so the file works on a page that does
   not load tokens.css.

   DENSITY. The metrics below read from --f-* custom properties with the
   default baked in as the fallback, so this file on its own renders exactly
   what it always has. An ancestor can set any of them to get a tighter or
   looser form without restating a single selector. The sales letter closing
   CTA does that, because a form inside a closing section wants to be smaller
   than a form that is the whole page.

     --f-gap            space between fields and between rows
     --f-label-fs       label size
     --f-label-gap      label to control
     --f-control-h      control height
     --f-control-pad    control padding
     --f-control-fs     control text size
     --f-textarea-h     textarea start height
     --f-btn-h          submit height
     --f-btn-pad        submit padding
     --f-btn-fs         submit text size
     --f-label-lh       label line height
*/

/* ============================================================
   SHELL
   ============================================================ */
.cform-g{display:grid;grid-template-columns:1fr;gap:44px;align-items:start}
@media(min-width:1024px){
  .cform-g{grid-template-columns:minmax(0,36fr) minmax(0,64fr);gap:56px}
}
@media(min-width:1280px){
  .cform-g{gap:72px}
}

.cform-intro h2{font-size:clamp(26px,2.7vw,36px);line-height:1.15;letter-spacing:-.025em;
  font-weight:600;margin:0;max-width:14ch}
.cform-intro p{font-size:15.5px;line-height:1.7;color:var(--gray,#6B6B6B);margin:18px 0 0;max-width:40ch}
.cform-note{font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;line-height:1.75;
  color:var(--gray,#6B6B6B);
  border-left:2px solid var(--acid,#E9FF5C);padding:3px 0 3px 14px;margin:24px 0 0;max-width:38ch}

/* ============================================================
   FIELDS
   ============================================================ */
.cform{display:grid;gap:var(--f-gap,22px)}

.frow{display:grid;grid-template-columns:1fr;gap:var(--f-gap,22px)}
@media(min-width:640px){
  .frow.two{grid-template-columns:repeat(2,1fr);column-gap:var(--f-col-gap,var(--f-gap,22px))}
}

/* Column, so the label is always above its control and never beside it. */
.fld{display:flex;flex-direction:column;min-width:0}
.fld label,.fset legend{font-size:var(--f-label-fs,14px);line-height:var(--f-label-lh,normal);
  font-weight:500;color:var(--black,#0A0A0A);
  margin-bottom:var(--f-label-gap,8px);display:block;padding:0}
.req{color:var(--gray,#6B6B6B);font-weight:400}

/* A hint belongs under the label and above the control, so it is read before
   the field is filled in rather than being hidden in a placeholder. */
.fhint{font-size:var(--f-hint-fs,12px);line-height:var(--f-hint-lh,1.5);color:var(--gray,#6B6B6B);
  margin:-2px 0 var(--f-hint-gap,var(--f-label-gap,8px))}

.fld input,.fld textarea,.fld select{
  font-family:var(--sans);font-size:var(--f-control-fs,16px);color:var(--black,#0A0A0A);background:#fff;
  border:1px solid #D7D4CB;border-radius:4px;padding:var(--f-control-pad,14px 15px);
  width:100%;min-height:var(--f-control-h,54px);
  transition:border-color var(--t-fast,150ms),box-shadow var(--t-fast,150ms);appearance:none;
}
.fld textarea{min-height:var(--f-textarea-h,152px);resize:vertical;line-height:1.65}
.fld select{
  background-image:linear-gradient(45deg,transparent 50%,var(--black,#0A0A0A) 50%),
                   linear-gradient(135deg,var(--black,#0A0A0A) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(var(--f-control-h,54px) / 2 - 4px),
                      calc(100% - 14px) calc(var(--f-control-h,54px) / 2 - 4px);
  background-size:6px 6px;background-repeat:no-repeat;padding-right:44px;
}
.fld input::placeholder,.fld textarea::placeholder{color:#A8A49A}
.fld input:focus,.fld textarea:focus,.fld select:focus{
  outline:none;border-color:var(--black,#0A0A0A);box-shadow:0 0 0 3px var(--acid,#E9FF5C)}

/* Error state is a border weight change and a message, never colour alone. */
.fld input[aria-invalid="true"],
.fld textarea[aria-invalid="true"],
.fld select[aria-invalid="true"]{border-color:#B3261E;border-width:2px}
.ferr{font-size:12.5px;line-height:1.5;color:#B3261E;margin:8px 0 0;display:flex;gap:7px}
.ferr::before{content:"!";font-family:var(--mono);font-weight:500;flex-shrink:0}
.ferr[hidden]{display:none}

/* ============================================================
   SUBMIT
   The button construction is repeated here at .fsubmit specificity so a page
   that does not load home-v2.css still gets the site button. On pages that do,
   the values are identical, so nothing changes.
   ============================================================ */
.fsubmit{display:flex;align-items:center;gap:var(--f-submit-gap,20px);flex-wrap:wrap}
.fsubmit .btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-weight:500;font-size:var(--f-btn-fs,15px);
  padding:var(--f-btn-pad,15px 28px);border-radius:100px;text-decoration:none;
  transition:transform .18s,background .18s;
  cursor:pointer;border:0;min-height:var(--f-btn-h,52px);
}
.fsubmit .btn-black{background:var(--black,#0A0A0A);color:var(--paper,#FAF9F5)}
.fsubmit .btn-black:hover{transform:translateY(-2px)}
.fsubmit .btn .ar{transition:transform .18s}
.fsubmit .btn:hover .ar{transform:translateX(4px)}
.fsubmit .btn[disabled]{opacity:.55;cursor:not-allowed}

.fconsent{font-size:var(--f-consent-fs,12.5px);line-height:1.55;color:var(--gray,#6B6B6B);margin:0;max-width:34ch}
.fconsent a{color:var(--black,#0A0A0A)}

@media(max-width:520px){
  .fsubmit .btn{width:100%;justify-content:center}
}

/* ============================================================
   FORM LEVEL MESSAGE
   ============================================================ */
.fstatus[hidden]{display:none}
.fstatus.err{border-left:3px solid #B3261E;padding:15px 18px;background:rgba(179,38,30,.05)}
.fstatus.err p{margin:0;font-size:14px;line-height:1.6;color:var(--black,#0A0A0A)}
.fstatus.err a{color:var(--black,#0A0A0A)}

/* ============================================================
   HONEYPOT
   A real input parked off screen rather than display:none, because bots skip
   display:none fields. It must never be visible and must never take layout
   space. Kept out of the tab order and the accessibility tree in the markup.
   ============================================================ */
.form-honeypot{
  position:absolute !important;left:-10000px !important;top:auto !important;
  width:1px !important;height:1px !important;overflow:hidden !important;
}

@media(prefers-reduced-motion:reduce){
  .fld input,.fld textarea,.fld select,.fsubmit .btn,.fsubmit .btn .ar{transition:none}
  .fsubmit .btn-black:hover{transform:none}
}