/* ============================================================================
   ARGOS - form.css
   Contact and sample-report request forms. Shared by both pages, so it stays a
   file of its own rather than being duplicated or pushed into base.css.
   ========================================================================= */

.form-layout{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:start}

.form-panel{
  background:var(--bg-raised);border:1px solid var(--border-subtle);
  border-radius:var(--r-panel);padding:40px;
}

/* The HubSpot embed (assets/js/forms.js). HubSpot renders the fields and we
   disable its stylesheet (css: ''), so everything below targets its stable class
   names. The look is the site's own: tinted inputs, accent focus ring, Severity
   Alert for errors (never Critical), and the submit button is a .btn .btn-aqua. */
.form-panel .hs-form fieldset{max-width:none;min-width:0;border:0;padding:0;margin:0}
.form-panel .hs-form .hs-form-field{margin-bottom:20px}
.form-panel .hs-form label{
  display:block;margin-bottom:8px;
  font-family:var(--font-display);font-size:var(--fs-small);font-weight:500;color:var(--text-primary);
}
.form-panel .hs-form .hs-form-required{color:var(--accent-bright);margin-left:4px}
.form-panel .hs-form .hs-field-desc{margin:0 0 8px;font-size:var(--fs-small);line-height:19px;color:var(--text-muted)}
.form-panel .hs-form .input{margin:0}
.form-panel .hs-form input.hs-input:not([type=checkbox]):not([type=radio]),
.form-panel .hs-form select.hs-input,
.form-panel .hs-form textarea.hs-input{
  display:block;width:100%;box-sizing:border-box;
  font-family:var(--font-body);font-size:var(--fs-body);line-height:24px;
  color:var(--text-primary);background:var(--bg-base);
  border:1px solid var(--border-subtle-hover);border-radius:var(--r-btn);
  padding:12px 16px;transition:border-color .25s,background .25s;
}
.form-panel .hs-form textarea.hs-input{min-height:150px;resize:vertical}
.form-panel .hs-form .hs-input::placeholder{color:var(--text-muted)}
.form-panel .hs-form .hs-input:hover{border-color:rgba(255,255,255,.2)}
.form-panel .hs-form .hs-input:focus{
  outline:none;border-color:var(--accent);
  background:var(--bg-raised);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.15);
}
.form-panel .hs-form .hs-input.invalid.error:not([type=checkbox]):not([type=radio]){border-color:var(--sev-alert)}
.form-panel .hs-form .hs-error-msgs{list-style:none;margin:6px 0 0;padding:0}
.form-panel .hs-form .hs-error-msgs.inputs-list label,
.form-panel .hs-form .hs-error-msgs label,
.form-panel .hs-form .hs-error-msg{
  margin:0;font-family:var(--font-body);font-size:var(--fs-small);font-weight:400;line-height:19px;color:var(--sev-alert);
}
.form-panel .hs-form .inputs-list{list-style:none;margin:0;padding:0}
.form-panel .hs-form .inputs-list label{display:flex;gap:10px;align-items:flex-start;font-weight:400;color:var(--text-secondary)}
.form-panel .hs-form input[type=checkbox],.form-panel .hs-form input[type=radio]{margin-top:5px;accent-color:var(--accent)}
.form-panel .hs-form .hs-richtext,
.form-panel .hs-form .legal-consent-container{font-size:var(--fs-small);line-height:20px;color:var(--text-muted)}
.form-panel .hs-form .hs-richtext p,.form-panel .hs-form .legal-consent-container p{margin:0 0 10px}
.form-panel .hs-form a{color:var(--accent-bright);text-decoration:underline;text-underline-offset:3px}
.form-panel .hs-form .hs_submit{margin-top:8px}
.form-panel .hs-form .actions{margin:0}

.form-panel .btn{width:100%;margin-top:8px}
.form-note{font-size:var(--fs-small);line-height:20px;color:var(--text-muted);margin-top:18px}
.form-note a{color:var(--accent-bright);text-decoration:underline;text-underline-offset:3px}

/* Success. Replaces the form inside the same panel so the page does not jump. */
.form-success{margin-top:16px}
.form-success:focus{outline:none}
.form-success p{color:var(--text-secondary)}
.form-success .btn-row{margin-top:24px;flex-direction:column;gap:12px}
.form-success .btn-row .btn{width:100%;margin-top:0}
.form-success .form-note{margin-top:16px}

/* Routing lines above the contact form. A hairline ledger, not cards: three
   peers that tell the reader which channel is theirs before they type. */
.form-routes{margin:0 0 28px;padding:0;list-style:none}
.form-routes li{
  display:grid;grid-template-columns:minmax(0,11em) 1fr;gap:4px 16px;
  padding:10px 0;border-top:1px solid var(--border-subtle);
}
.form-routes li:last-child{border-bottom:1px solid var(--border-subtle)}
.form-routes b{font-family:var(--font-display);font-size:var(--fs-small);font-weight:600;color:var(--text-primary)}
.form-routes span{font-size:var(--fs-small);line-height:20px;color:var(--text-muted)}
.form-routes a{color:var(--accent-bright)}
.form-routes a:hover{text-decoration:underline;text-underline-offset:3px}

/* Report page: the two captioned pages beside the form. */
.report-pages{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}
.report-pages figcaption{
  margin-top:10px;font-family:var(--font-display);font-size:var(--fs-small);
  font-weight:500;color:var(--text-muted);
}

/* Contact detail list beside the form. */
.contact-list{display:flex;flex-direction:column;gap:20px;margin-top:32px}
.contact-list li{display:flex;gap:16px;align-items:flex-start}
.contact-list .ico{
  flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:rgba(var(--accent-rgb),.08);border:1px solid rgba(var(--accent-rgb),.2);
}
.contact-list .ico svg{width:20px;height:20px;stroke:var(--accent-bright);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.contact-list b{display:block;font-family:var(--font-display);font-size:var(--fs-small);font-weight:600;color:var(--text-primary);margin-bottom:2px}
.contact-list span{font-size:var(--fs-small);line-height:23px;color:var(--text-muted)}
.contact-list a{color:var(--accent-bright)}
.contact-list a:hover{text-decoration:underline;text-underline-offset:3px}

@media (max-width:1023px){
  .form-layout{grid-template-columns:1fr;gap:40px}
}
@media (max-width:767px){
  .form-panel{padding:28px}
  .form-routes li{grid-template-columns:1fr}
  .report-pages{grid-template-columns:1fr}
}